スタイルシートを使うメリット
テキストのレイアウトが簡単にできる。
このエントリーは、見やすいように段落の最初がインデントされています。また見出しやリストにも文字の装飾がされています。普通はインデントを再現するためにスペースをいれ、目立たせたい部分に太字とフォントタグを使います。 html エディタを使えばたいした手間ではありませんが、何度もやるとなるとこれが馬鹿にならず面倒。しかしそこでスタイルシートを使うと、そんな手間から開放されます。
たとえば段落の初めをインデントさせたいとしましょう。それには段落をあらわす <p> というタグに、スタイルシートでこのように設定します。
p { text-indent: 1em; }
テキストがインデントされるだけの簡単な設定ですが、これがあるだけでずいぶん違います。
テーブルレイアウトをしなくていい。
テーブルレイアウトは、大体スタイルシートを覚える前に誰でもやった経験があると思います。いわゆるテーブルを沢山並べて、好きな位置にテキストを持っていくという方法ですね。これはどんなブラウザでも見れるということで、企業のHPでもよく利用されています。
ですがテーブルレイアウトにも欠点があります。テーブルを沢山並べたり、複雑に入れ子にしてしまうため、それと同じくらい複雑な挙動を見せます。たとえば2ペイン3ペインのページを作ったことがあるなら、「片方のテーブルが大きくならない」とか「思い通りの位置にテーブルを配置できない」という経験はあると思います。これらはどれかのテーブルがつっかえ棒になっていたり、どこかのテーブルの横幅が固定されている、などが原因で起こります。
その場合原因を解決するには、入れ子にされているテーブルを細かくチェックしていかなければなりません。退屈で、しかも原因がわからない理不尽さを味わうため、これはかなりつらい作業になります。といってもこの作業も一度や二度ならなんとか我慢できる範囲でしょう。
ですが何度も更新していくページを作っていると、この手間は２度３度ではすまなくなります。たとえばコンテンツのリンクを追加するために、ホームページのデザインを変えようとします。もちろんそのたびにテーブルを増やしたり減らしたりして、それぞれが自己主張するテーブルの群れとそのつど格闘することになるでしょう。
一方CSSでは絶対値で表示位置を指定する、という設定が可能です。これでテーブルを好きな位置におくことができると考えて結構です。これがあると万事うまくいく・・・というわけではありませんが、テーブル複雑に配置してレイアウトする必要はなくなります。そのためちょっとレイアウトを変えるために、すべてのテーブルを設定しなおす・・・という手間から開放されます。
いままで初心者にテーブルレイアウトをすすめていた理由
-
- ホームページビルダーやDreamWeaverでは、テーブルでwebページをレイアウトする機能が豊富＆変更されたレイアウトが一目でわかる。
- セルの分割＆結合で、器用にホームページをレイアウトした経験がある方も多いのでは。
いままでCSSレイアウトを初心者にすすめなかった理由
- CSSを設定できるhtmlエディタがあんまり無い。あっても設定機能が貧弱なので、手打ちしなければならない。
- CSSの文法について勉強する必要がある。
- CSSを設定するたび、そのつどプレビューを見れるhtmlエディタがないから
- CSSを設定する前に、ページのhtmlタグをできる限り整理して、使うタグを絞っておかないと、むちゃくちゃになる。
あまりCSSデザインについて敷居は低くありません。ですがCSSレイアウトはテーブルレイアウトに比べて、更新・変更が簡単です。そのため今後CSSレイアウトはさらに増えてくるでしょう。現にfc2blogのテンプレートはほぼCSSレイアウトで、他のブログにしてももっとCSSレイアウトがはやるのは間違いありません。
CSSレイアウトを勉強するのにオススメのサイト
オススメのコンテンツはRenewal。ああでもないこうでもないと、だらだらレイアウトしてしまったホームページ達。それをまずhtmlタグひとつひとついたるまで分解して整理整頓。webの文法に沿った適切なタグを使ってテキストにマークアップを施し、CSSでシャキッと読みやすく引き締まったホームページに生まれ変わらせます。
特にたったあれだけの手数で、緻密に整理されたhtmlコードをデザインできる氏の手腕には、どきどきさせられます。
- 2005/03/21
- 未整理
- トラックバック：0
- コメント：0
- EDIT
- トラックバック: http://acca.blog3.fc2.com/tb.php/97-b5794c31