はてなブログを使い始めてまだ一ヶ月経っていませんが、はてなブログは結構考えられているなぁと感心させられるところもあるので、こうやってしょうもない事でも続けて投稿しています。使ってみないと分からない事ありますからね。
以前も記しましたが、私はWebブラウザーはFirefoxをずっと使っています。FirefoxにはWeb解析ツールとしてFirebugが便利なのでこの組み合わせは私にとって便利です。
今使っている、回転寿司のデザインテーマを調べてみたところ、CSSで定義されている部分が多いので、ここ弄れるなぁと思えるところがいくつか有ります。CSSは非常に便利です。
HTMLとCSSをそれなりに理解している人には今更ですが、まだ理解できていない人に向けて今日は書いてみようと思います。オススメは「CSS Zen Garden」です。かなり昔になりますがCSSでどれだけデザインを弄れるか競う（アイディアやテクニックを披露する）のが流行った時期が有りました。まだサイトが存在しているのが嬉しい。
CSS Zen Garden: The Beauty of CSS Design
ここで色々なデザインを見ることが出来ます。よく確認してみると内容は同じだという事がわかると思います。つまりCSSと構成ファイル（デザイン画像等）で見た目をだけをカスタマイズしているサンプルが沢山見られます。CSSしかいじれないという制限の中で画期的なデザインを施すというゲームの様なイベントでした。
このサイトではHTMLは基本的にいじれないので、CSSを駆使して構成画像を組み合わせてサイトの見た目を別物にしてしまうというテクニックがここで学べるのです。気になるデザインを見つけたら、ここどうやってるんやろ？と興味を持って欲しいですね。私はこのサイトで覚えたテクニックがいくつかあります（概要しか覚えてないけど）。
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (1件) を見る
個人的にはFirefoxとFirebugの組み合わせで構造を解析して、どういう手法なのかを調べます。正直なところFirebugが使えないと大変です。
最近のWebブラウザはF12を押すと解析ツールが使えるものが多いので、気に入ったデザインがあれば是非構造解析まで取り組んでテクニックをもらって来て下さい。Webの技術は真似して応用することが基本だと思います。
CSS Zen Gardenは制限の中でいかにして実現するかという遊び？なので、もちろんここで得られるスキルに限度は有りますが、はてなブログのCSSカスタマイズでもかなりの事は応用出来ると思います。
コメント