「Creator’s Meeting In NAGOYA」第2回の講師は、現在フリーランスで第一線のWebデザイナーとして活躍されており、書籍・雑誌記事の執筆の他、東京で「ロクナナワークショップ」などで多数講師をされている、千貫 りこさんです。

今回は「現場目線のCSS Tips」をお届けします。
更に自分では「問題なく書ける」と思っていても、意外と奥が深いのが(X)HTMLの世界。
来たるHTML5時代に備えるためにも、いま一度自分の(X)HTMLソースを見直してみることの重要性についてお話して頂きました。

講師プロフィール

千貫 りこ 氏
某企業における自社サイトのWebマスターとして4年間、その後転職したWeb制作会社にてHTMLコーディング専任者として4年間勤務した後、2005年に独立。小〜中規模サイトの企画・制作や大規模サイトの(X)HTMLコーディングといった制作業務の他、書籍・雑誌記事の執筆、「ロクナナワークショップ」講師、イベントセミナーでのスピーカーなども行う。
各制作会社との取引はもちろんのこと、出版、呉服、店舗、作家、NPO法人などクライアントの業種は多岐に渡る。

■ブログ：KICKS Web
■2009年には東京で開催したWeb Designer Inspire Night vol.8でもご公演いただきました。

マークアップ力を再確認文

CSSとHTMLは切っても切れない関係ですので、まずはHTMLのお話をしたいと思います。十分理解している、問題なく書けると思っていても、HTMLの世界は意外と奥が深いもの。「HTML＝デザインを再現するためのもの」という感覚だとHTML5の習得は厳しいように思います。
マークアップとは、文書の内容をしっかり読み込んでそれに適したタグをつけていく作業です。ポイントを5つご紹介します。

1.画像や文章を直接divでくくっていませんか？

みなさんは、画像や文章を直接「div」で括っていませんか？
仕様書を見てみると、div要素は「汎用ブロックレベル要素」という意味合いしかもっていません。ではp要素ならOKかと言いますと、そうとは言い切れません。「段落」でない内容にpタグをつけてしまっているのでは、単なるdivの代替品です。

2.見出し＋内容のセットになっている？

読みやすい文書は、多くの場合、見出しと内容がセットになっています。
さらに、大小さまざまな「見出しと内容のセット」がマトリョーシカのように入れ子構造になっていると考えてください。
つまり、突然「内容」があらわれるのは不自然なのです。

3.見出しのレベル付け

見出しのレベル付けについては、意外と苦戦している人が多いようです。
まず、「h1レベルの見出し」とその「内容」があります。
「h1の内容」の中に「h2レベルの見出し」とその「内容」があります。
「h3レベルの見出し」とその「内容」は、「h2の内容」に含まれます。
見出しを宣言すると、箱がひとつつくられるイメージです。その見出しよりも小さな見出しレベルであれば、先ほど作った箱の中に含まれます。例えば、h3とその内容は、h2を説明するための（もしくはh2に関係する）ものでなくてはいけません。文章の内容をしっかり把握して見出しレベルを決めましょう。

4.altをちゃんと考える

4つ目のポイント。altをきちんと考えていますか？ 前後の内容と重複していませんか？音声ブラウザをイメージしてみるといいと思います。

5.情報の記述順にこだわる

デザインにとらわれて原稿を入れ替えていませんか？きちんと情報の記述順にもこだわ るのがコーダーの腕の見せ所です。

みんなが使いやすいサイト制作には(X)HTMLへの配慮が不可欠
「おきまりのマークアップ」ではなく、「本当にこれでいい？」と常に疑問をもつ
さまざまな閲覧環境にいる人のことを意識することが大切です。

共有できるCSSを書こう

職場など複数人で作業する場合にはできるだけ分かりやすくてシンプルなCSSを作っておくことが大切です。

1.ネーミングセンスは人それぞれ

id/class名のネーミングセンスは各人異なります。あらかじめネーミングルールを設けておくといいかもしれません。また、ネーミングの乱発はできるだけ避けたいものです。
id/class名の乱発を避けるために、子孫セレクタを積極的に利用しましょう。セレクタをある程度遡ったところから記述することで、子要素にわざわざ名前をつけなくても済む場合があります。またセレクタの優先度も高まるので一石二鳥です。
本来CSSは、ソースの上の方に記述されたスタイルより下の方に記述されたスタイルが優先されます。しかしセレクタの書き方によっては、上の方に記述されたスタイルが優先されることもあるので注意が必要です。

<h1>見出しレベル1</h1>
　<p>段落</p>
　<h2>見出しレベル2</h2>
　<p>段落</p>
<div>
 <h2>見出しレベル2</h2>
 <p>段落</p>
</div>

子孫セレクタと合わせてタイプセレクタ（要素名）も積極的に利用しましょう。このソースの場合、タイプセレクタを使えばdivの中のh2（div h2）とp（div p）は名前を付けなくても他と区別できます。

2.共通するスタイルをまとめる

ソースをより簡潔にするために、CSSの「上に書いたスタイルが下に書いたスタイルで上書きされる」特性を活かしましょう。 p.styleAとp.styleBに共通のスタイルがあれば、タイプセレクタ（ｐ）を使って、こんな風にまとめられます。

p {
margin-top:1em;
line-height:1.2;
 }
p.typeA {
background:#99CCFF;
color:#666666;
}
p.typeB {
padding:1em;
border:solid 1px #FF0000;
}

3.プロパティの記述順

複数人で作業する場合には、プロパティの記述順を揃えるのもひとつの手です。

4.CSSに「保険をかける」

よく陥りがちなトラブルを分析しておいて、未然に防ぐようにすると作業がスムーズです。

javascriptを積極的に利用する

メニューボタンのロールオーバーなど、CSSだけで実装するのが流行った時期もありましたが、Ajaxのブームをきっかけにしてjavascriptがどんどん見直されています。フリーでダウンロードできるすばらしいライブラリがありますので、ご紹介します。
■jQuery
とりあえずこれを使えばいろいろなことが簡単になりますよ。
■yuga.js
メニューボタンの画像切替え、ページ内リンクのアニメーションなど、定番中の定番の動きを簡単に実装できます。javascriptを知らない人でも大丈夫です

まとめ

1. まずはHTMLのブラッシュアップを
2. 思い込みのマークアップをやめる
3. 要素名を上手に利用した「子孫セレクタ」で、共有しやすいCSSをつくる
4. 転ばぬ先の「お約束スタイル」

次世代の技術も気になる・・・

雑誌やあちこちのブログでは、HTML5とCSS3の話題で盛り上がっています。当然気になりますし、情報をキャッチしておくのは大切なことです。
ただし、実際に利用できるのはまだ先と考えていいでしょう。なぜならIEのシェアはいまだ50%以上を占めているため、多くのユーザーは恩恵にあずかれないからです。
HTML5やCSS3への対応を強化したIE9の正式リリースはおそらく2011年になるだろうと言われています。その後、旧バージョンのシェアがぐっと下がるまではHTML5やCSS3を積極的に取り入れるのは難しいかもしれませんね。とはいえ、日々勉強は必要！足下をしっかり固めつつ将来に備えましょう。今日の努力が明日につながります。ちなみに、各ブラウザにおけるHTML5とCSS3の実装状況はこちらでチェック！（Can I Use）

おわりに

講演の後の質疑応答では、活発な質問がたくさん挙がりました。
それだけ参加者の意識が高いということがうかがえます。
その後、懇親会に入ってもまだまだ「質問したい！」「話を聞きたい！」というたくさんの参加者が千貫さんの周りに集まって、熱い議論がなされました。

今後のCreator’s Meeting in Nagoyaにもご期待ください。