スタイルシートとはなんぞや?

昨日の夜栃木から帰宅し、休んだ感覚皆無のまま新たな一週間がスタート。
いつもなら「だら~、ぼけ~」で過ごすところですが(苦笑)、今週中にサイトを完成させなければいけない追い込み週間の為、朝から殆ど休みなしで作業してきました。
当初の予定では今週は画像編集に集中するはずだったんですが、急遽予定を変更して論理構造の見直しをする事に。

実は、ちょっと前までは「論理構造云々はよく分からんけど、とりあえずブラウザでちゃんと表示されてればいいやろ」的考えだったんです。
その証拠に現在の六合のサイトのコードは酷い有様…(汗)
でも、ここ数週間でスタイルシートをより理解するにつれ、「これではいかん!」と考えを大幅に改めました。
Webの国際基準であるW3C曰く、

・HTML→論理構造
・CSS→デザイン

と完全に分離(埋め込みもなし)させるのが現在の常識らしく、適切なマークアップがなされていないとアクセシビリティの観点からもSEO対策の観点からも穴だらけのサイトになってしまいます。

例えば、文字を太字にする為に<b>タグで囲むのはNG。
何故なら<b>タグは装飾タグで論理構造上意味を持たないからです。
その文字列を論理構造上強調したいのであれば、<em>や<strong>タグで囲い、それをCSSで{font-weight: bold}と指定しなければいけません。
文章ではないものに<p>タグを使ったりするのもNG。
<p>は論理構造上段落を意味付けるタグなので、例えばリンク先を列記する際は<ul>と<li>タグを使わなければいけません。
他にも<br>を行間を空ける為に使ったり、レイアウト目的でテーブルを使うなど、一般的に使われているけど実は間違っているというものが山ほどあります。

そんなわけで、今日は午前中を全部このマークアップの見直しにあてました。
基本的な部分は殆ど完成しているのでかなり大変でしたが、そのお陰でソースもすっきり、ブラウザでの見栄えも格段に良くなりました。


そして、午後からは画像ではなくCSSでメニュー・ボタンを作るという試みにチャレンジ。
何故そんな事に挑戦しようと思ったかと言うと、画像でボタンを作るとデザインやレイアウト変更の度に作り直す手間がかかり、CSSの利点を活かせないという事と、ロールオーバー使用時にJavaScriptを使う事になるという2点が主な理由です。

しかし、実際にやってみるとこれが大変で(汗)
なかなか思う様に表示されず四苦八苦。
displayやfloatをいじくり回し、何とか教室から追い出される前に形にする事が出来ました。
苦労を重ねたCSSが見事に反映された時はほんと嬉しかったですね。
CSSをこんなに面白いと思ったのは初めてです。
まぁブラウザ上でその苦労が全く分からないのが難点ですが…(苦笑)

さぁ、これで明日から心置きなく画像編集に取り掛かれます。


Similar Posts

ファイル・ロケーション: Life

コメント

  1. ろくまん says:

    CSSで矩形の位置とかサイズを指定しだすとかなり思いどおりのデザインが出来ますよね。
    気をつけないといけないのはIEで上手く表示されててもFirefoxやOperaでは崩れている、、なんて事もあるところでしょうか(笑)、、IEがいちばんゆるいんだよね。。
    あとMACで見ると変、、て事も(笑)
    ほんと嫌になってしまいます。

  2. sin says:

    そうなんですよ。
    テーブルでやってレイアウト固めちゃうという手もあるんですが、後で修正が面倒臭いのと、本来の使い方ではないという部分で今回は使わないようにしています。
    殆どリストで書いてCSSで指定してますね。

    ブラウザによって表示が違うのは本当に頭痛の種です…。
    あと、DTDでもレイアウト変わってしまいますよね。

コメントの受付は終了しました。