このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!
Q:テーブルレイアウトはダメでしょうか? CSS のメリットは?
ご質問ありがとうございます。
CSSデザイン手法の講座でもよくいただく質問です。
A:ダメなんてことはないと思いますが、オススメはしません。
テーブルを脱却して CSS でレイアウトすることで得られる様々なメリットをご紹介します。
メリット
CSS でデザインを設定すると?
例えば、ページ内の<h1>(見出し1)に対して全て同じデザインを一括で適用する、ということができます。CSSを使わない場合、一つずつ手動で設定することになります。とてもめんどくさいことです。
また、一度作った CSS ルールは基本的に何度も使い回すことができるので、制作工数削減につながります。何ページもあるサイトの全てのページにゼロからデザインを設定していくなんて気が遠くなりそうですよね。
CSS ファイルと HTML ファイルをわけると?
まず、HTML からデザイン的な要素が排除されることで、ソースコードが簡略化します。すなわち、制作工数が減ります。また、更新も断然楽になるはずです。読み込み速度の向上も期待できます。
また、ソースコードが簡略化するとクローラビリティも向上し、検索エンジン最適化の手助けとなります。
さらに、UA(ユーザーエージェント:サイトにアクセスしてくるソフトやハードのこと)によって CSS を切り替えることができたり、
音声ブラウザが情報を読み取る精度もよくなるので、アクセシビリティの向上にもつながります。
考えなくてはいけないこと
いいことだらけに見える CSS ですが、ちょっと悩ましい部分もあります。最大のポイントは、ブラウザーによって CSS の動作、対応度が異なる点です。Internet Explorer と Firefox でレンダリング結果が異なる、なんてことはよくあります。当然の結果なので気にしないのもアリですし、完全に同じにしようとおもえばテクニックが必要です。
…ということで実際のレイアウト手法やブラウザー対応テクニックはCSS講座で!(宣伝です!)
引き続きみなさまからのご質問お待ちしております!
また、現在m-SchoolではCSS講座の上級編を企画中です。"こんな講座があれば受けたい!"というご意見などありましたらドシドシお寄せください!
▼関連講座
【 Webサイトは自分でも作れる! 】
□ Adobe Dreamweaver CS3 入門講座
【 CS3を使ってWebサイト構築の基礎をマスター 】
□ Adobe Dreamweaver CS3: Fundamentals
【 自由自在なレイアウトを実現 】
□ レイアウト自由自在!Dreamweaver CS3 CSSデザイン手法





その1:正直CSSを知らなくてもいい。






