【jQuery】オリジナルサイトの完成。

おはようございます。おーみんです。

オリジナルサイトを作っていたのですが、ようやく完成しました。

今回の記事では作成したサイトのjQueryを用いた箇所を振り返ってみたいと思います。HTML、CSSの部分は別記事にてまとめていますので、最後の方にリンクを載せました。

Day 10
Finished to write #JavaScript （#jQuery）of my top page.

I used jQuery Plug-in to make slide.（It is autoplay）

when I scroll down, make Access appear.

Next, I"ll write it of other pages.#100DaysOfCode pic.twitter.com/KydblfavUQ

— 超おーみん2@Unity民族 (@Ooooooomin_365) 2019年2月27日

（英語でツイートすると海外の方々にウケが良いので英語にしています。）

まずトップページ。今回は"All Blue"という架空のレストランのサイトを作りました。レストランの画像は無料写真素材サイト「写真AC」さんからダウンロードしています。

Web制作におすすめの無料写真素材サイトは写真AC！ - おーみんだよ。

画像が自動で動いていますが、これはslickというjQueryプラグインを用いています。画面下にスクロールするとアクセスマップがフェードインするようにもなっています。

やり方は以下の記事でまとめたので気になる方はぜひ。

【jQuery】ウェブサイトにアニメーションを付ける。 - おーみんだよ。

Day 11
Finished to write #JavaScript （#jQuery）of "About us" and "Menu" pages.
I think it is specially cool the modal window when click the menu picture!#100DaysOfCode pic.twitter.com/HFsR0XhVwR

— 超おーみん2@Unity民族 (@Ooooooomin_365) 2019年2月28日

こちらは「メニュー欄」と「私たちについて」のページです。

Menu欄では画像をクリックすると半透明な背景の上に画像が映るような仕組みになっています（モーダルウィンドウ）。

このツイートは結構海外の方にも特にウケが良かったです。

モーダルウィンドウは海外勢には人気なのでしょうか？

Day 12
At last, completed my original website!

Today, I wrote #JavaScript （#jQuery）of CONTACT page.

If you don't write textarea "The content", appear the caution.

yeahhhh!! all complete!!
Creating a web site is very interesting!#100DaysOfCode pic.twitter.com/JUoJzMx3i8

— 超おーみん2@Unity民族 (@Ooooooomin_365) 2019年3月1日

そして「お問い合わせ」ページです。

こちらでは最後の"The Content"欄が必須項目（Essential）となっているのですが、ここへ記入せずに送信すると赤文字で「未記入です」と警告が出るようにしました。

ザッとこんな感じです。

自分のイメージしたウェブサイトが作れると楽しいものですね。

ところでオリジナルサイトを2作作って感じたんですが、HTML&CSS、jQueyはかなりやりやすいです。

プログラミング初心者で、何をやろうか全く決まっていない方はぜひこの辺から入ってみるのはアリだと思いました。

とりあえずオリジナルサイト2作作って思ったんですが、HTML、CSS、JavaScript（jQuery）、あたりはかなりやりやすいですね。

Unity（C#）も僕はやっていますが、個人的にはUnityのほうが難しいかなと思います。

— 超おーみん2@Unity民族 (@Ooooooomin_365) 2019年3月1日

僕もまた色々なサイトを作っていこうと思います。