おーみんだよ。

おーみんだよ。

プログラミング、Unityなどのアウトプットを主に行っています。

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

f:id:bookreadkun:20190221071404p:plain

 

おはようございます。おーみん(@Ooooooomin_365)です。

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

  

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

 

 

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

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

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

 

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

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

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

 

 

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

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

 

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

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

 

 

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

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

 

ザッとこんな感じです。

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

 

 

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

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

 

 

 

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

では!

 

オリジナルサイトのHTML、CSSの振り返りについては以下の記事にまとめているので気になる方はぜひ。

オリジナルサイト2作目のHTML部分が完成。 - おーみんだよ。

 

【HTML&CSS】オリジナルサイトのCSSが書き終わりました! - おーみんだよ。

 

オリジナルサイト1作目はこちら。

【jQuery】Web制作素人がオリジナルサイトを作ったよ。 - おーみんだよ。