webサイト作り練習
最近、趣味でwebサイト作りの勉強をしている。
以前FC2ブログのテンプレートを自作してみた。
しかし、そのクオリティーは初心者としてはマシとしても、満足できるものではなかった。
そこで、web制作の基礎をキチンと勉強してみようと思った。
使用したサイトはドットインストール。
このサイトは本当にすばらしい。
1回3分の動画のレッスンを無料で受けることができる。
講師である@taguchiさんの説明は非常にわかりやすく、基礎勉強といいながら完成していく楽しさを味わうことができた。
完了したレッスンはHTML・CSSに始まり、JavaScript・jQuery・PHP・MySQLなど。
今回はそれを活かして新たにweb制作の練習をしてみた。
web制作をするといっても、何のサイトを作るかが問題となる。
しかし、これといって作りたいサイトもない。
そこで今回は個人のwebサイトを作ることを想定して、自分のwebサイトのようなものを作ってみた。
コンセプトはページ移動をしないで見られるwebサイト。
普通webサイトはメニューをクリックして各ページに飛び、その度にメニューの下までスクロールする。
この形式は、本来ユーザーに手間を強いてしまうデザインだと思う。
そこで、ページ移動することなく内容を変えていく方法を考えた。
候補は以下の2つ。
1, Ajaxで内容を読み込む
2, タブで切り替える
どちらでもよかったが、せっかくドットインストールでAjaxを学んだので、今回は1でやってみた。
メニューをクリックするとそれに対応したファイルからページ内容をAjaxで読み込み、表示している。
内容を表示する枠は、内容量に応じて伸び縮みするアニメーションをつけた。
また、コンテンツページではスライドして内容を変えるアニメーションもつけてみた。
これは、以下のサイトの画像ギャラリーを応用して作っている。
これらのアニメーションはどちらもjQueryによって実装した。
ちなみに、木枠はCSS3を使って立体的に見せている。
まとめ。
jQueryやCSS3を使ってちょっとオサレなサイトを作る練習をした。
出来映えは割と満足。
今度は本物のwebサービスなんかを作ってみたい。誰か一緒に作ってください。
