くらげメモ１

きのう私のはてなブログのデザインを変えたのですが、周りの人からは好評なようで良かったです。夜の０時くらいに思いついて４時くらいまでやっていたかいがありました。こういうモチベーションは日をまたいで長くは続かないので、昔から徹夜で朝までやって作るみたいなことが多いような気がします。そして、ほぼできたモノを見せてフィードバックをもらって、モチベーションを次につなげていくというやり方です。
 
私は普段からCSSトリックの様な技術をはてなブックマークで毎日追いかけているのですが、そういう類のものは実践で使えないことが多いです。Internet Explorerというブラウザがあるからです。最近ではiPhone,Androidといった特定のデバイス向けにWebページを作ることもあるので、そういう場合には気にせず使っていくことができるのですが、PC向けとなるとなかなか…。
 
という訳で、ためしてみたいCSSの技術がいくつかあったので、それをやってみたのが今回のこのデザインです。細かいところにちょっとした技が使われていたりしますので、順に紹介してみたいと思います。

Multi Column Layout

このデザインのもっとも大きな特徴なので、すぐに気づくのがこのマルチカラム・レイアウト（段組み）だと思います。デザインを変えるときに一番最初に「これはやろう」と思っていたのが段組みです。段組みを使ったテーマをそのうちuedayくんも作るんじゃないかと思ったので、先に作ってやろうと思いました。
 
段組みレイアウトはCSS3で以前から実装されていますが、実際に使うところが少ないのか使われているのを見たことは、ほとんどないように思います。CSSではカラム数やカラムの幅、カラムの間の余白・線、文字の流し方など細かく設定することができるので面白いですよ。
 
私は、はてなブログで「長い文を書くユーザー」としてテストをしているのですが、長い文章を段組みにするとそれっぽくなって良いと思います。
 
３段組にするとどうしても横幅が大きくなってしまうのを作っていて直したいと思っていました。Windowを小さくして見てる人にとっては横スクロールがでてしまって、あまり好ましくないと思ったからです。デザインを作って公開した後に「Media Queries」を使えば解決できるなと思いついたので加えてみました。メディアクエリでWindow幅に応じてカラム数が変わるようになっていますので、動かして試してみてください。
 
それから、地味にテキストを両揃えにもしたりしています。これはInternet ExplorlerやFirefoxでしかうまく再現できないのですが、Webkit系ブラウザでもうまく表示されるようになるといいなぁと思います。でも、私の書いてる文章では結構いい感じに表示されるようで嬉しいです。

Drop Cap, Texture & Shadow

段組みの要素も入れて雑誌ぽい感じにしたので、ついでにという感じでドロップキャップも使ってみました。ドロップキャップは最初の文字を大きくして文章の読み出しを分かりやすくしたり、注目させたりするためのものです。DTPなどではよく使われていて、英字だとかっこ良くなりますよね。これはWebでも前々からよく使われていたテクニックでかんたんに取り入れることが出来ます。
 
エントリーの用紙の様なグラフィックはCSSの小技をいくつも使っています。例えば、用紙の下の両側が少し浮き上がって見えるような影もそのひとつです。通常、CSSのドロップシャドウではまっすぐに伸びる影しか表現できませんが、擬似要素という技術を使うことでこのような表現をすることができます（CSS3対応のCSSセレクタ一覧）。CSSで描いているので横幅が変化してもかんたんに対応することができます。
 
リンクボタンもすぐに気づくUIです。最近ではこういう表現もよく見るようになりました。マウスをボタンの上に持っていくとアニメーションで浮き上がり、クリックするとへこんで見えるようにしています。
 
タイトルの赤いリボンはCSSというより画像ですが、下に回り込んでいるように見える表現は少し前にすごく流行ったように思います。今までやってみたことがなかったので今回やってみました。
 
ブログのタイトルの「くらげだらだら」という文字ですが、ここにもCSSのテクニックを使っています。CSS3ではグラデーションや角丸など以前に比べてたくさんのことができるようになりましたが、テキストの文字自体にグラデーションをかけたり、内側に影をつけたりすることはできません。しかし、いくつかのCSSテクニックを組み合わせて使うことでそういった表現もすることができます。
 
本当はもっといい感じに見えるロゴにしたかったのですが、コレをやっている頃は朝４時くらいで眠たかったということもあって少し手を抜いた感じになっています。また暇なときにでも直そうと思います。
 
Webフォントは発表された頃から期待をしてきたCSSの技術ですが、日本語は英語に比べて文字数が多いということもあって、あまり手を出せないところでもありました。最近では日本語でもWebフォントが上手く使えるようなWebサービスが少しづつ出てきて、今後ますます期待できそうです。私はというと、今までWebフォントを使った経験がなかったので、今回はGoogle Web Fontを実際に使ってみました（英字や数字の部分だけですが）。

Paradigm Shift Design

ほかにも試してみたいテクニックなどがあったりします。このような新しい技術に関しては私のはてなダイアリーの方でも書いたりしていますが、それを実際に試してみる場所としてもはてなブログはちょうど良いなぁと思いました。
 
これからも勉強したり、研究して見つけたりして、新しい表現を試していきたいと思います。