Blog

ブログ

第2回XHTML＆CSSコーディング勉強会 in 札幌

, ,

「THE HAM MEDIA」のh2hamさんが主催する、XHTML・CSSコーディングの勉強会に参加してきました。

告知記事
第2回XHTML&CSSコーディング勉強会

その後のまとめ
第2回XHTML&CSSコーディング勉強会

ポピュラーなテーマなだけあって、参加者の皆さんの顔触れも
私のような専業のコーダーから、独学の学生、
制作会社のデザイナー、デザイン面も習熟したいプログラマ、
仕事で自社サイト管理を担当している方など、様々でした。

「職場のコーディングがレガシーなので、スキルを磨いて最新のコーディングにスイッチするよう説得したい」

という切実な方も…＾＾；

coding090523

詳しい内容・完成データは非公開ですが、今回のお題はこんなサイトでした。

一般企業によく採用される、左右2カラム・横型ナビゲーションです。

うぬうかっこいいぞ。

包括ブロック（外側を囲んでるdivとか）に画像や罫線がないため、CSSレイアウトとしては難易度低めです。
しかし、floatによる段組みが複数個所で使用されているので、「どのようにリスト要素またはdivでマークアップ・idを付与するか」がポイントになります。

描画依存によるCSSコーディングスタイル

私の場合、何度も触れているレイアウトだったので、
「通常と違うCSSコーディングスタイルで記述する」というハンデをかけて挑戦してみました。

一般には「HTMLの文書の要素に直結＝構造依存」のスタイルで書かれるCSSですが、
作業効率や、オブジェクト指向で捉えると、他にもいろいろな記述方式が考えられるそうです。

R流 CSS Coding Styles :: R-STYLES.NET

R-STYLEさんがいろいろ挙げられている中から、構造依存の次に使われることが多いと思われる「描画依存」形式を意識して書いてみました。
（改装中の自分のサイトでも、既に挑戦中です）

/* boxmodel
======================================= */

#wrapper {
width: 960px;
margin: 0 auto;
}

#wrapper #header {
padding: 45px 0 0;
}

#wrapper #header #site-title {
width: 204px;
float: left;
margin: 0 0 10px;
}

・・・中略

/* position, layer
======================================= */

#wrapper #header {
position: relative;
}

#wrapper #header ul#sub-navi {
position: absolute;
top: 75px;
right: 0;
}

/* background
======================================= */

#wrapper #header ul#sub-navi {
background-image: url(../images/snavi_line.gif);
background-repeat: no-repeat;
background-position: 100% 50%;
}

#wrapper #header ul#sub-navi li {
background-image: url(../images/snavi_line.gif);
background-repeat: no-repeat;
background-position: 0 50%;
}

・・・以下略

実際に書いてみての感想としては、ひとつのCSS定義の単位が短く、かつ描画スタイルごとに段落分けされているので、CSSコードの見通しがききます。
CSSプロパティに習熟したコーダーが、テキストで手入力するには良い方法だなーと思いました。

ですが、Dreamweaverの機能を使って制作している場合は、簡単にいきません。
DreamweaverのCSS編集機能は「構造依存」に対応する形で作られているので、ひとつの要素に多数のCSS定義があると、どこの定義に追加・修正したらいいのかすぐにわからないのです。

実際、自分のサイトの方はそれで難儀してます。
慣れるのにはまだまだ時間がかかりそうです。

トップダウンとボトムアップ

勉強会の中で、h2hamさんがHTMLの記述方式＝「トップダウン方式」「ボトムアップ方式」について説明されていました。

トップダウン方式とは
「包括する要素等を記述してから内部構造を入れ込んでいく」手法で、
ボトムアップ方式とは
「内部構造を入れ込んでから包括要素を記述する」手法だそうです。

トップダウン方式は技量がいりますが、タグの間違いを最小限に抑えて記述でき、全体の構造をつかみやすいです。実際、私もCMS構築等でテキストエディタを多用する場合はこちらの方法で書いています。

ボトムアップ方式は、論理的なマークアップに慣れていない人の、一般的な手順です。
また、私もDreamweaverを使って制作する場合は、こちらを使用します。
Dreamweaverのデザインモードは仕様上、空のdivタグに内部要素を入れ込むのが難しく、
ざっくり書いたp要素を選択してdiv要素で包括したり、リスト化した方が失敗が少ないからです。

トップダウン方式で確実に作業するには、どのようにマークアップするかをあらかじめ理解している必要があります。
h2hamさんも勧めておられましたが、デザインを作る段階で頭にイメージしたり、紙などに構造図をまとめてからはじめると、効率がいいし、習熟も早いと思います。

左右二段組リストのレイアウト

今回の勉強会で、いちばん難しいのではないかと思ったのが、この「TOPICS」部分です。

coding090523_2

よく見かけるレイアウト方法なのですが、HTML・CSSともいろいろなマークアップが考えられます。
しかも、floatを使用すると文字増減に対応するのが難しく、使った要素によってはIEでバグが出ます。

こだわりがなければ、テーブルでマークアップしてしまっても全く問題がないと思いますが
リスト要素にした方が、今後の制作での使い回しが効きます。

h2hamさんは、下罫線を確実に表示することを重視されたのか
下のようなul・dlを入れ子にしたマークアップでした。

5/25追記：
h2hamさんから勉強会のフォローアップメールが来ました。
このようにマークアップするとIE6のみ崩れるので、その例示が目的だそうです。 

<ul>
  <li>
    <dl>
      <dt>2009.05.23</dt>
      <dd>ダミーテキストですダミーテキストです</dd>
    </dl>
  </li>

  <li>
    <dl>
      <dt>2009.05.23</dt>
      <dd>ダミーテキストですダミーテキストです</dd>
    </dl>
  </li>

  <li>
    <dl>
      <dt>2009.05.23</dt>
      <dd>ダミーテキストですダミーテキストです</dd>
    </dl>
  </li>
</ul>

私はというと、dl要素でマークアップして

<dl>
  <dt>2009.05.23</dt>
  <dd>ダミーテキストですダミーテキストです</dd>
  <dt>2009.05.23</dt>
  <dd>ダミーテキストですダミーテキストです</dd>
  <dt>2009.05.23</dt>
  <dd>ダミーテキストですダミーテキストです</dd>
</dl>

dt要素のみに、floatとwidthを指定する方法を取りました。
こうすると、後続するdd要素の外枠だけがdt要素を囲むように伸びきり
中のテキストは右に回り込むことになります。

#wrapper #main #topic dl {
margin: 0 0 1.5em 12px;
}

#wrapper #main #topic dl dt {
float: left;
display: inline;
width: 5em;
margin: 0 15px 0.5em 0;
padding: 0 0 0.3em;
line-height: 1.3;
}

#wrapper #main #topic dl dd {
margin: 0 0 0.5em;
padding: 0 0 0.3em;
line-height: 1.3;
border-bottom: 1px dotted #333333;
}

このとき、line-heightとmargin・paddingの値は同一にしないとずれてしまいます。

floatの仕様に沿ったレンダリングがされることが前提のコーディングなので、
IE5.5以前では崩れる可能性があるのが難点です。
また、dd要素が三行を超えるとdt要素の下に流れてしまいます＞＜

他の参加者の皆さんが
この部分をどのようにコーディングしたのか、とても興味があります。

class・idの命名規則

Webデザインをはじめた頃から今も迷っているのが、各パーツのclass・idの命名規則です。
とりあえず、ある程度の法則性を持たせ、HTMLの情報内容が変わっても違和感が出ない命名を心がけているのですが、今回のデザインのように多数のナビゲーションが出てくると迷ってしまいます。

大まかなブロック以外で、今回命名したのはこんな感じです。
私は略記法ではなく、ハイフンでつなぐ方法を使うので、少し冗長です。

ロゴ部分　・・・　#site-title
グローバルナビ　・・・　#global-navi
右上の小さなナビ　・・・　#sub-navi
本文枠TOPICS　・・・　#topic
本文枠ABOUT US　・・・　#about
右バナー群　・・・　#banners　（特に自信がない）
フッターナビ　・・・　#foot-navi
W3Cバナー　・・・　#valid　（特に自信がない）
コピーライト　・・・　#copy

この命名の部分に関しても、他の皆さんがどうしてるのか、是非知りたいところです。

コーディングは独学で身につけた人が多い分、奥が深いジャンルです。
今日も「フッターナビは表と解釈しても問題ないのではないか」
という話でひとしきり盛り上がりました。

こういった、コーディングに関する情報交換に、もっと参加したいものです。
h2hamさん、どうもありがとうございました！