当サイト「きこえない海」も開設から半年くらいになりそうです。ということで開設当初から考えていたレスポンシブ化をテーマの新調にあわせてかなり手探りで行なってみました。

[adsense]

テーマ

前回はなるべくシンプルなものを作ろうと考えながら作成しました。
なのでカラーもモノトーンを基調としていたのですが、少し地味だったように思います。
なので今回は前回よりも色を使っていくことにしました。
全体のイメージは「きこえない海」という言葉の響きから前回に引き続きシンプル、レトロです。

レスポンシブ

レスポンシブと簡単にいうとPCからでもタブレットからでもスマートフォンからでも最適化されて見れるデザインのことです。要素を可変させたりすることで画面サイズに合わせてサイズを調節します。
リデザインと合わせてレスポンシブレイアウトに今回挑戦してみました。
テスト環境はMac OSX、windows7、iPhone5、nexus7です。

webフォント

今回webフォントを少し利用してみました。webフォントとはフォントをwebから参照して利用するため閲覧者の端末に存在しないフォントも表示できるスグレモノです。
日本語フォントだとまだまだ無料で使えるものが少ないのですが、英字フォントだとgoogleが配布しているため使えました！数も多いので迷っちゃいます。
今回は折角webフォントを利用するのでどうせなら変わったフォントをと探して見つけた「League Script」を使ってみました。ただ、Win、IEの環境などでは少し見難いようなのでそのうち変えようと思っています。

その他

スクロールに合わせて浮かんでくる上へ戻るボタンをjqueryで実装しました。憧れていたので満足です。 
コンタクトページやfacebookやtwitterへの連携などが手軽に行えるメニューをヘッダーに置きました。流行の円形を使ったデザインにしてみました。 
マウスオーバー時にゆらりと浮かび上がるアニメーションを付けてみました。

まとめ

レスポンシブ化に思っていたよりも苦戦しました。慣れの部分もあると思うのでコツを掴めばスムーズにできそうです。CSSフレームワークを使う手もあるそうなので次回は挑戦してみようかと思います。
CSS3やHTML5を利用してかっこいい動きをつけたりしましたが、IEのことなどを考えるとまだ用途次第では使わないほうが良いパターンもありそうです。 
 
ということでこれからも細々と修正を続けていきますのでサグラダファミリアを見守るような気持ちで見守ってください…。

また当方アンドロイド端末でのデバッグが満足に行えておりませんのでレイアウトが崩れている部分など見かけましたら教えてくださると助かります。沢山あると思いますので宜しくお願い致します。