Home > WordPress＆Blog > 創造マラソンのデザイン更新中◆Web Direcitons East 2008でいい刺激。

創造マラソンのデザイン更新中◆Web Direcitons East 2008でいい刺激。

2008-11-08 (土) 13:16
WordPress＆Blog
CSS | CSS3 | Webデザイン

Web Directions East 2008に参加して、色々と刺激を受けてきました。…ということで、たまにはWebの話題でも。

ちょうど数日前に創造マラソンのCSSをいじりなおして、模様替えをしたところだったのですが…せっかくなので、Dan Cederholm氏の講演内容を参考に再調整中です。

以下、CSS3のお話なんかも含めて調整しているところをメモ書き。

※ちなみにCSSはまだまだ勉強中なので、ヘンな所とか勘違いしてるような所もあるかと思いますがご了承ください…。

emを使ったサイズ指定

まず最初に直しているのはサイズ指定。今までpx指定してた部分も結構あるのですが、画面サイズの調整などにも対応しやすいようにemで指定するようにしてみました。

ここでのポイントはfont-size:62.5%をbodyで指定してやること。これにより、16px（ブラウザのデフォルト指定）×0.625=10pxが指定されたことになります。こうしておくと、1em=10pxとなるため、例えば900pxなら90emといったように簡単に計算ができ、width指定などもemで統一させることが容易になります。

※ただし、ブラウザ側のデフォルト指定がずれているとデザインが崩れるので要注意。

ちなみにDan氏のプレゼンの中では、「G：Gridlaticness」という項目で紹介されていました。これによって、あたかも格子で切られているようにキッチリと領域を分けたデザインをやってみよう、という考え方です。

角丸のBorderを使ってみる（CSS3）

CSS３から実装されるborder-radious。今までは角丸の枠を作るには画像を使うことがほとんどでしたが、CSS3では画像無しで作ることができます。現在ではwebkitとmozillaで実装されている状態なので、

.entry blockquote{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

のように実装します。ここで指定する値は角丸の半径です。

Safari等のブラウザだと、ここの領域が角丸になっています。

widthやheightも調整して頑張れば円も描けますｗ

.css_circle{
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
width:2em;
height:2em;
background-color:#EEE;
border:0.1em solid #000;
text-align:center;"
}

こんな感じでやってみると、

円

…ま、軽い遊び感覚で。

Dan氏のプレゼンでは「B: Border-radius」という項目で紹介されてました。

CSSファイルを分ける

CSS3、特にborder-radiusなどの部分に関しては、CSSファイルを分けて作っておくといいよ！といったお話。ヘッダーやサイドバーを分けたり、フォントサイズを指定したり…という構造を作る部分と、見た目をより美しくする部分とかちょっとした遊び心（さっきの円とか）の部分はファイルを分割して、後々

@import url("css4plugin.css");

みたいにimportかけた方がメンテナンスもしやすくなります。これに関連して、自分なりのCSS用Frameworks（むしろテンプレート？）を作っておくのも大事、とDan氏のプレゼンにありました（F：Frameworks）。

他、CSSで使ってみたいところ

他、どうやって適応するか考え中なところをいくつか。

新しいセレクタ色々

例えばリストの最後を指定するとき、.last などのクラスを指定する事がよくありましたが、CSS3では:last-childや:first-child, さらには:nth-child(n)などが使えるようになります。

これによって、「リストの最後だけは境界線が違うから・・」とか「偶数番目だけ色を変えて・・」とか、わざわざクラス指定をする必要がなくなってシンプルになります。また、突発的にリストの中身が変わった時、いちいち指定し直さなくても自動で判断してくれる、というのも嬉しいところです。

ul li:nth-child(3n){
background-color:#EEE
}

なんて感じで、3の倍数だけ~~アホに~~色を変える、なんてこともできますｗ

S：Shifting backgrounds

画面のリサイズに合わせて、背景画像がスライドするように動く、というもの。トップ画像に使ってるマインドマップの大きさが変わったら面白いかなぁ、などと考えております。

The Rissington Podcastが参考になります。

一番大事なのは…

さて、色々CSSで作れることも増えてきましたが、最も重要なのは

すなわち、「自分のサイトの利用者に合ったデザイン」。例えば全世界のブラウザシェアで見たらIEがまだまだ優勢ですが、サイトによってはFirefoxユーザが8割だったり、あるいはiPhoneが半分以上だったり…ということもあるでしょう。

そういったユーザ統計に基づいてデザインを調整するのも大事な考え方です。※こういったユーザビリティの話って、認知工学とも絡んでくるからまた面白い。

Dan氏のプレゼンから一言引用します。

Do websites need to look exactly the same in every browser？

ウェブサイトって、全てのブラウザで全く同じように見える必要があるのか？という問いかけ。Dan氏の答えはdowebsitesneedtolookexactlythesameineverybrowser.com（そのままURLにしてる…ｗ）にあります。

僕もこの回答に賛同です。

編集後記

筑紫哲也さんのご冥福をお祈りします…。

Tags: CSS, CSS3, Webデザイン