CSSとはCascading Style Sheetsの略で、英辞郎で調べてもイマイチCascadingの意味が管理人にはピンと来ないのですが、HTMLにはコンテンツのみを記入しレイアウトに関する設定はスタイルシートによって行うべきだという考え方です。別項でも書きましたがHTMLタグで直接にレイアウトに関する設定をせずに、スタイルシートを用いさらに外部化することでいくつかの利点があります。
SEOには明らかに有利です。CSSを分離(外部化)することでページのHTMLタグが論理構造のみに専念できるため、ソースがすっきりし意味の通ったものになります。プラウザを通してみると違いはありませんが、クローラーが読み取るソースベースではわかりやすくなっています。
サイトのレイアウトは統一されていたほうが良いです。ページごとに背景の色や文字のサイズ・ナビゲーションが異なるようなサイトはユーザーに使いにくいと思われてもしかたありません。むしろサイト全体でスタイルを統一することで、ユーザーが直感的にわかりやすいサイトを作ることが出来ます。具体的には、コンテンツとナビゲーションの位置を全てのページで固定すればユーザーにわかりやすく、ページ数が多くても負担なくサイトから必要な情報を探すことが出来ます。
ニュースサイトなど扱っている分野が多彩で頻繁に情報が更新されるサイトでは、ナビゲーションを充実したりレイアウトをわかりやすくすることで膨大な情報を効率的に伝えています。NIKKEI NETの場合、大分類としてニュース・マネー・IR・IT・・・などに分けそれぞれ該当のテーマを専門に扱っています。大分類の一つを選択すると更に中分類・小分類のテーマが現れます。ナビゲーションの基本ともいえますが、なんでもかんでも羅列すればよいわけではなく、重要度に応じて項目を表示させることで使いやすさがアップします。またレイアウトに関してですが、コンテンツの位置をナビゲーションのすぐ下左寄せに統一することでユーザーがまず何処を見ればよいのかがすぐにわかります。記事を読み終えた後に、関連の記事を探したりバナー広告に目がいったりしますがこれらも一目でそれとわかるレイアウトになっています。本来であればコンテンツのほかに外部サイトへのリンクやバナー広告、内部リンクで溢れた雑多なページなのですがレイアウトを明確にし統一させることで情報が整理されわかりやすいサイトになっています。
個人のサイトではわかりにくいレイアウトが結構多いです。これは別にレイアウトの知識がないということではなく、誤クリックでもかまわないからアフィリエイトのバナー広告やアクセスランキングの他サイトへのアクセスを稼ぐことを意図しているためと思われます。そういう気持ちもわからないではありませんが、本末転倒といえます。コンテンツのわかりにくいサイトにはユーザーが再び訪れることは少なく、また誤クリックでアクセスした広告の商品に興味を持って買う人はまずいません。そもそも、サイトのコンテンツと広告の内容が異なること自体が儲かりにくい原因になっています(SEM項参照)。ユーザーを惑わせることよりも、広告に自然と興味を持ってもらえるようなコンテンツやレイアウトの構築に力を注いだほうが得策です。
スタイルシートのワンポイントアドバイスとして管理人が良く使うものをいくつか紹介します。といっても管理人自身最近やっとスタールシートを知ったばかりなので、あまり当てにならないと思います。近くの図書館でCSSとタイトルのついた本を1,2冊読めば基本は十分のはずです。
スタイルの宣言については三つの方法があります。1.については余計にごちゃごちゃするのであまり意味がありません。2.がよく使う方法で、編集箇所が多い場合a・b・cなどアルファベット順にクラス・IDをつけると処理がしやすいかもしれません。3.は例えばページ内の全てのHタグにスタイルを適用する場合などに使います。スタイルを全て揃えたい場合には使えます。
スタイルシートの適用については外部化したほうが効率的ですが、作成に当たっては編集ページのヘッダーにスタイルシートの宣言をする形で記入します。最初から外部化(分離)してしまうといちいちプレビューで確認する必要があり手間だからです。全て完了した時点でヘッダーからスタイル宣言箇所を切り取り、スタイルシート用に作成したページのヘッダーに貼り付けます。あとはヘッダーに外部化のタグを打ち込んで終了です。
ホームページでは文章に余白があったほうが読みやすくなります。ここではプラウザの表示サイズを変えてもコンテンツが常に中央に表示される方法を紹介します。
以上で、例えばDIVの幅を600ピクセルに指定した場合、プラウザの幅が800だったとしてもコンテンツは600ピクセルのまま中央に表示(もちろんコンテンツは左詰)され残りの200ピクセルは左右に余白として表示されます。なお余白はBODYの背景として画像・色の挿入が可能です。
もちろんテーブルタグではなくリストタグで作成します。リストにすることでソースがすっきりし論理的なタグ付けになるからです。LIタグはそれを囲むDIVタグの幅の範囲で折り返して表示されます。DIVタグの幅に基づいてLIタグ一個あたりの幅を決定すれば一行に表示する項目数が決められます。意外に簡単です。
いろいろやり方があるみたいで、管理人の方法がベストではありませんがfloatタグを使用した段組作成を紹介します。三段組は自分で考えてください。1.がポイントで全体の幅を決めないと思うように段組できません。
同じリストでもDTとDLの二つの項目があるため思うように段組できずに結構悩みます。キレイなやり方かどうかはわかりませんが管理人のやり方を紹介します。DT・DDに直接回り込み設定をしてしまうとDTとDDが横並びになってしまいます。DT・DDを一まとまりにした状態で段組にすることを考えた場合、説明付きリストを二つにわけ段組表示することを思いつきました。