ついに、、、念願のHokkaido Galleryプロジェクトを紹介します。
実はまだ完成ではなく、９割ほど進んでいる状況です。
意外と持っている夏の写真が少なかったです。。。
フレームは完成しておりますが、写真の枚数が足りなくて、応急処置をしているところと言っておきます。とにかく！フレームはすべて完成したので紹介していきます！
今回はTOPの部分です！
サイトのテーマは、北海道写真展！Hokkaido Gallery!
前回も似たようなものですが、練習したということで、、
サイトのコンセプトは、涼しさとカレンダーです。
北海道の四季の美しさを知ってもらうために作ったのでカレンダーを連想させたデザインにしてみました。夏編だから色は涼しく！
四季別のシリーズウェブサイトとして作っていくつもりです！
つまり、秋編、冬編、春編も作るということ。
今回はCSSも気にして作りました。
背景色は、さっきも言った通り、涼しさを連想させるため、風、海が浮かぶような色を選びました。ストレスなく楽しんでいただきたいので明度を高くし、柔らかい印象にしました。でも、背景色なので他の要素に妨害をする可能性もあり、彩度を低く調節しました。この組み合わせで柔らかく落ち着いた印象が与えられたと思います。
フォントのサイズと行間は、ユーザーが一番読みやすいよう、font-sizeは17px、line-heightは1.7にしました。これで行間は0.7になりました。
あと、line-heightの数字に単位を付けていないのは、font-sizeが変わったりして、意図していないことになる可能性があるので、それを排除するためにつけておりません。
右側のタイトル部分のCSSです。
あまりにもデザインが静的過ぎたので面白いデザインがないかなと考えていたところ、昔の記憶を思い出しました。
たまに、文字が縦になっているカレンダーを見たことはございませんか？
私は、結構見たことがあるので適用してみました。
（見たことがなかったらごめんなさい
）
結構面白くなってきましたね。気に入ります。
英語と日本語の並び方にも違いを設け、また面白い感じになりました。
次はナビゲーション！右上のメニューバーの部分です。
BLOGの部分だけ、target="_blank"を適用しました。
外部のリンクに接続してもまだ自分のサイトにはいてほしいので適用しました。
ナビゲーションのCSSです！
メニューバーはサイトの全体的なイメージを崩さない程度で他の要素と区別させようとしました。ところで、ほかのデザイン要素には触れず、文字の下にborder属性だけを適用させてみました。そうすると、サイトのデザインともよく合い、ほかの要素も区別できるようになりました。一層、デザインが良くなった感じです。
実は、ナビゲーションをドロワー形式にしようか迷いましたが、メニューの数も少なく、そうする必要性が感ぜられなかったのでただ並ばせました。まぁ、リスポンス型を作るときに適用しようかなと思います。
このプロジェクトを始めた理由は色々ありますが、その中にはコーディングスキルを磨きたいという目的もあります。
ところで、Java Scriptもフル！活用することにしまして、このようなfunctionを作ってみました。その名は、Image Sliderです。
単にボタンを押せば写真が変わるScriptです。
images配列の中身を修正しても対応できるようにコーディングしました（コーディングするときは当たり前の作業）。
current変数を設け、functionで数字を計算し、images配列からimgを取り出すという簡単なScriptです。
currentとnumの合計が"0<=current+num<配列のサイズ"にしてスライダーが両端に至るとこれ以上進めないようになっていて、current+numが0から配列のサイズの間でだけ動かせるようになっています。
prevを押すとchangeImageファンクションに-1を渡し、イメージが前に戻るようになります。
nextはその反対！
CSSの矢印はこんな感じです。
Illustratorで絵を描いてみようかなと思ったのですが、コーディングで簡単に作ることが出来ました！
boderのtopとbottomを作成して回しただけです。（nextは、45deg）
これ考えた人、天才かも。
positionをabsoluteにして、写真の上に重ねました。
写真を邪魔なく見てほしかったので、opacityを利用して普段は隠し、hoverでマウスを乗せたときだけ、矢印が現れるようにしました。
イースターエッグみたいな感じで面白くないですか？
TOPはこんな感じです！
今回のプロジェクトはすごく楽しかったです。
デザインを勉強してサイトを作ってみたら、色んなデザイン要素が目に見えてきました。
CSSももっと勉強してみるとできることがたくさんですし、JavaScriptも応用できるコードが多くありました。
とにかく楽しかった。。。。