CSSについて

CSSとはCascading Style Sheetsの略で、英辞郎で調べてもイマイチCascadingの意味が管理人にはピンと来ないのですが、HTMLにはコンテンツのみを記入しレイアウトに関する設定はスタイルシートによって行うべきだという考え方です。別項でも書きましたがHTMLタグで直接にレイアウトに関する設定をせずに、スタイルシートを用いさらに外部化することでいくつかの利点があります。

SEOに有利

SEOには明らかに有利です。CSSを分離(外部化)することでページのHTMLタグが論理構造のみに専念できるため、ソースがすっきりし意味の通ったものになります。プラウザを通してみると違いはありませんが、クローラーが読み取るソースベースではわかりやすくなっています。

レイアウトに統一感をもたせる

サイトのレイアウトは統一されていたほうが良いです。ページごとに背景の色や文字のサイズ・ナビゲーションが異なるようなサイトはユーザーに使いにくいと思われてもしかたありません。むしろサイト全体でスタイルを統一することで、ユーザーが直感的にわかりやすいサイトを作ることが出来ます。具体的には、コンテンツとナビゲーションの位置を全てのページで固定すればユーザーにわかりやすく、ページ数が多くても負担なくサイトから必要な情報を探すことが出来ます。

ニュースサイトなど扱っている分野が多彩で頻繁に情報が更新されるサイトでは、ナビゲーションを充実したりレイアウトをわかりやすくすることで膨大な情報を効率的に伝えています。NIKKEI NETの場合、大分類としてニュース・マネー・IR・IT・・・などに分けそれぞれ該当のテーマを専門に扱っています。大分類の一つを選択すると更に中分類・小分類のテーマが現れます。ナビゲーションの基本ともいえますが、なんでもかんでも羅列すればよいわけではなく、重要度に応じて項目を表示させることで使いやすさがアップします。またレイアウトに関してですが、コンテンツの位置をナビゲーションのすぐ下左寄せに統一することでユーザーがまず何処を見ればよいのかがすぐにわかります。記事を読み終えた後に、関連の記事を探したりバナー広告に目がいったりしますがこれらも一目でそれとわかるレイアウトになっています。本来であればコンテンツのほかに外部サイトへのリンクやバナー広告、内部リンクで溢れた雑多なページなのですがレイアウトを明確にし統一させることで情報が整理されわかりやすいサイトになっています。

個人のサイトではわかりにくいレイアウトが結構多いです。これは別にレイアウトの知識がないということではなく、誤クリックでもかまわないからアフィリエイトのバナー広告やアクセスランキングの他サイトへのアクセスを稼ぐことを意図しているためと思われます。そういう気持ちもわからないではありませんが、本末転倒といえます。コンテンツのわかりにくいサイトにはユーザーが再び訪れることは少なく、また誤クリックでアクセスした広告の商品に興味を持って買う人はまずいません。そもそも、サイトのコンテンツと広告の内容が異なること自体が儲かりにくい原因になっています(SEM項参照)。ユーザーを惑わせることよりも、広告に自然と興味を持ってもらえるようなコンテンツやレイアウトの構築に力を注いだほうが得策です。

スタイルシート ワンポイントアドバイス?

スタイルシートのワンポイントアドバイスとして管理人が良く使うものをいくつか紹介します。といっても管理人自身最近やっとスタールシートを知ったばかりなので、あまり当てにならないと思います。近くの図書館でCSSとタイトルのついた本を1,2冊読めば基本は十分のはずです。

スタイルの宣言について

スタイルの宣言については三つの方法があります。1.については余計にごちゃごちゃするのであまり意味がありません。2.がよく使う方法で、編集箇所が多い場合a・b・cなどアルファベット順にクラス・IDをつけると処理がしやすいかもしれません。3.は例えばページ内の全てのHタグにスタイルを適用する場合などに使います。スタイルを全て揃えたい場合には使えます。

  1. BODY内のタグに直接スタイル宣言する(記述箇所はBODY)
  2. タグにクラス・IDを設定しスタイルを宣言する(記述箇所はHEAD)
  3. タグ全てにスタイルを宣言する(記述箇所はHEAD)

スタイルシート外部化の手順

スタイルシートの適用については外部化したほうが効率的ですが、作成に当たっては編集ページのヘッダーにスタイルシートの宣言をする形で記入します。最初から外部化(分離)してしまうといちいちプレビューで確認する必要があり手間だからです。全て完了した時点でヘッダーからスタイル宣言箇所を切り取り、スタイルシート用に作成したページのヘッダーに貼り付けます。あとはヘッダーに外部化のタグを打ち込んで終了です。

CSSでよく使うタグ(管理人の場合ですが)

DIVタグ
スタイルシートをいじるまでは全く知らなかったタグですが、ホームページレイアウトにおいてはかなり重宝します。DIVタグでは幅と高さを指定することで縦長・横長のナビゲーション・広告スペースを作ることや、floatタグと併せることで読みやすい幅の段組を作成することが出来ます。
リストタグ UL・LI
CSSには関係が薄いように思われるかもしれませんが、このサイトのナビゲーションはリストタグで作っています。テーブルタグで出来ることは全てリストタグで出来ます。注意が必要な点はホームページ作成ソフトによっては初期設定でLIタグに左マージンが設定されている場合があるので、改めて左マージンを0とすることで左詰で表示することが出来ます。
説明付きリストタグ DL・DT・DD
”CSSでよく使うタグ”は説明付きリストタグで書いています。相互リンクなど一口コメントをつけたい場合に重宝します。LIと同じくDDには初期設定で左マージンが設定されている場合があるので、左マージンを0にすることで左詰に出来ます。
回り込みと解除 float・clear
簡単そうでなかなか使いこなせないのが回り込みfloatタグです。floatタグを使うことによってリストタグで横並びのナビゲーションを作ったり、二段組三段組のレイアウトを作ることが出来ます。回り込み解除のclearタグは整形のために使います。必要以上に回り込んだりして編集がしにくくなった時に、水平線HRタグに回り込み解除の属性をつけて挿入することで編集しやすくなったりします。

コンテンツを中央揃えにする

ホームページでは文章に余白があったほうが読みやすくなります。ここではプラウザの表示サイズを変えてもコンテンツが常に中央に表示される方法を紹介します。

  1. DIVタグでコンテンツを全て囲みます。
  2. DIVのスタイルで幅をピクセル単位などの絶対値で設定し文字揃えを左詰にします。
  3. BODYの属性を中央揃えにすれば完成です。
  4. この方法はBODYのマージンを0にすることでも出来るそうです(古いのは対応していません)。

以上で、例えばDIVの幅を600ピクセルに指定した場合、プラウザの幅が800だったとしてもコンテンツは600ピクセルのまま中央に表示(もちろんコンテンツは左詰)され残りの200ピクセルは左右に余白として表示されます。なお余白はBODYの背景として画像・色の挿入が可能です。

横長のナビゲーションを作る

もちろんテーブルタグではなくリストタグで作成します。リストにすることでソースがすっきりし論理的なタグ付けになるからです。LIタグはそれを囲むDIVタグの幅の範囲で折り返して表示されます。DIVタグの幅に基づいてLIタグ一個あたりの幅を決定すれば一行に表示する項目数が決められます。意外に簡単です。

  1. LIタグの幅を決め、初期設定の左マージンを0にする
  2. LIタグに回り込み属性を指定する
  3. 項目ごとに区切りたい場合はLIタグに背景色を指定し右マージンを入れる

二段組表示にする

いろいろやり方があるみたいで、管理人の方法がベストではありませんがfloatタグを使用した段組作成を紹介します。三段組は自分で考えてください。1.がポイントで全体の幅を決めないと思うように段組できません。

  1. 段組したい箇所全てをDIVタグで囲み幅を決める
  2. 一段目(A)にしたい箇所をDIVタグで囲む。二段目(B)も同様にする
  3. A+Bの幅が全体を囲むDIVタグの幅より大きくならないように指定する。多少余すと良い
  4. Aを左にBを右に回り込ませる。A+Bの幅が大きすぎると回り込まずに段組表示にならないので注意する。なお余した部分が中央の余白になる

説明付きリストタグ DL・DT・DDを段組にする

同じリストでもDTとDLの二つの項目があるため思うように段組できずに結構悩みます。キレイなやり方かどうかはわかりませんが管理人のやり方を紹介します。DT・DDに直接回り込み設定をしてしまうとDTとDDが横並びになってしまいます。DT・DDを一まとまりにした状態で段組にすることを考えた場合、説明付きリストを二つにわけ段組表示することを思いつきました。

  1. 10項目のDT・DDを二段組にする場合、5項目ずつをDLで囲みます。2つの説明付きリストに分けます
  2. DT・DDの幅を指定します。段組のずれを防ぐためにDDの高さを大きめに指定します。
  3. 後は上記の段組の要領で全体とDLをそれぞれDIVタグで囲み回り込ませれば完了です。