CSSでの書式設定

CSS設定の基本方針

(1)エレメントスタイルを基準に設定する

スタイルシートに対応していないブラウザで見ても、表示要素が大きく崩れないようにするため、エレメントスタイルを基本に使用していく。

(2)エレメントスタイルについては本来の仕様に近い設定値にする

エレメントスタイルについては、その役割を大きく逸脱しない設定にする。(例、色を変えたりボールドを解除したりして、見出しとは別の目的に使うなど)

(3)テキストの書式に関連する情報は外部スタイルシートに、グラフィック(デザイン)要素については内部に記述

クライアントからの注文に応じて、文字のサイズや色を簡単に変更できるようにするのが目的。後述の設定例を参照。

(4)スタイルシートのメディアタイプ指定を「すべて」(all)にする

メディアタイプは、cssエディタから確認する。外部スタイルシートの場合、cssのファイル名を選択するとメディアタイプが確認できるが、内部スタイルシートの場合、「▼内部スタイルシート」と書かれている文字を選択しないと確認できない。内部スタイルシートのメディアタイプは、デフォルトで「screen」なので特に注意すること。
もちろん、プリント時やモバイルでの見え方をコントロールしたい場合は、その限りではなく、スタイルシートを複数用意して切り替えることで、表現の幅を広げられる。

設定値の基準

  • ベースとなる(使用頻度の一番高い「段落」テキストの)文字の高さに対して、1.5倍の行間を設定。その行の間隔と絶対値で同じ値の行間を、H1〜4タグに指定する。H5〜6タグは、文字の高さに対して1.5倍とする。(例:段落の文字サイズが12pxなら、行間は18pxで、H3が16pxならばその行間は16+(18-12)で22pxとなる)
  • 文字サイズを変更した場合のレイアウト崩れを防ぐために、設定単位は全てpxとする(相対指定であるemや%は、ブラウザの設定によってサイズが変動するため。ただし、グラフィックの使用量が少なく、サイトの文字サイズを変えてもレイアウトに支障がないと判断されるテキストペースのサイトを構築する場合は、emなどの相対指定がよい。その時は、サイトの枠組みなどデザイン部分の単位もemにする)。
  • 見出しタグはH4を「段落」タグと同じサイズとし、H1はその2倍の大きさとする。H5〜H6は順に小さくなる。全て「ボールド」指定とする。
  • 【p】その他、マージンの設定は、ベースとなる文字の行間と同値を取る。

設定値

内部スタイルシート

【*】全称セレクタ:「マージン」「パディング」を全て「0」に

【body】:「マージン」「パディング」を全て「0」に。GoLiveCSでは、デフォルトで文字の色に黒が設定されますがこれは放っておいても問題ありません。背景については、必要に応じて設定します。

【#】各種IDスタイル:GoLiveのレイヤーに該当するテキストや画像を納めるボックスなど、レイアウト(デザイン)に関する記述はこちらに書き込みます。

* { margin: 0; padding: 0 }
body { background: white url("pic1.jpg") no-repeat fixed center 0; margin: 0; padding: 0 }
#base { visibility: visible; margin: 0 auto; padding: 0; width: 500px }

※上記の例では、背景画像を固定する設定が【body】に、本文などを記述するレイヤーとして#baseを設定してあります。

外部スタイルシート

スタイルシートを使ったWebページでは、文字その他全てを【div】要素内に配置することになるので、【body】への書式設定は不要です(【div】への設定は、特に後から記述がなければp,td,hなど全てのエレメントに影響します)。しかし、万一の事があると困るので、【div】と合わせて記述します。

設定するのは、テキストプロパティ内の「カラー」「サイズ」「行の高さ」のみです。

ただし、【p】【h1】〜【h6】【tabel】については、段落を開けるために、「マージンとパディング」から「上」「下」方向にマージンを設定します(値は上記記述に基づく)。

またリスト表示の【ol】【ul】は段落を開けるためのマージンに加え、インデントを定義しておく必要があります。特にインデントを設定しておかないとマーカーがブロックエリア外に表示されてしまいます。設定は「マージンとパディング」から上下方向は1.5文字分(上記記述に基づく)、左が2字分とします。またリストの二段階目、三段階目となる【ol ol】【ol ol ol】【ul ul】【ul ul ul】も設定しておきます(マージンはそれぞれ上下が「0」で、リストのプロパティから「スタイル」を設定しておきます)。

body,div { color: #333; font-size: 12px; line-height: 18px }
table { margin-top: 18px; margin-bottom: 18px }
p { color: #333; font-size: 12px; line-height: 18px; margin-top: 18px; margin-bottom: 18px }
h1 { font-size: 24px; font-weight: bold; line-height: 30px; margin: 30px 0 }
h2 { font-size: 20px; font-weight: bold; line-height: 26px; margin: 26px 0 }
h3 { font-size: 16px; font-weight: bold; line-height: 22px; margin: 22px 0 }
h4 { font-size: 12px; font-weight: bold; line-height: 18px; margin: 18px 0 }
h5 { font-size: 10px; font-weight: bold; line-height: 15px; margin: 15px 0 }
h6 { font-size: 8px; font-weight: bold; line-height: 12px; margin: 12px 0 }
ol { list-style-type: decimal; margin: 18px 0 18px 24px }
ol ol { list-style-type: lower-roman; margin-top: 0; margin-bottom: 0 }
ol ol ol { list-style-type: lower-alpha }
ul { list-style-type: disc; margin: 18px 0 18px 24px }
ul ul { list-style-type: circle; margin-top: 0; margin-bottom: 0 }
ul ul ul { list-style-type: square }

※上記の例では、【body】と【div】をまとめて記述しています。

補足

  • 色を付けたり、境界線を使って飾りの付いた見出しを作ることができるが、それらはクラススタイルで作成すること。境界線は段落に適用した場合、特に指定がないとボックスの幅いっぱいに広がろうとするが、そのボックスの幅が指定されていない(マージンが設定されていて算出できる場合を除く)と表示されないので注意。
  • テーブルを使った場合、テーブル内にテキストを配置した場合、テーブルのマージン設定が無視されます。そのため、背景色があるセル(【td】)に文字を入れる際は、以下の手段を採ります。
    • 【p】【h】系で記述し、センタリングする
    • 【td】でマージンを記述する(見かけの異なる複数のテーブルを使用する場合には使えない)
    • テーブルでは枠組みだけ作り、スタイルシートでテーブル毎にクラススタイルを記述する
無し(テーブルマージン有り)

H4(テーブルマージン無し)

※CSSより、htmlのインスペクタの「外枠の幅」「セルの間隔」が優先される現象を確認(フレーム使用時)。ドキュメントタイプによるかもしれない。デザインは、CSSかテーブルか、どちらでやるのか統一した方がよさそう。

  • 本文のフォントサイズは、一般的サイトには14px、学術系・専門家向けサイトでは12pxが良いと思われます。

英語版サイトの場合

英語版サイトの場合、文字はゴシック系(Arialなど)を用いることが多い。しかし、IEはデフォルトでセリフ系(Timesなど)表示になるため、フォントを指定しておくのがよい。それはCSSエディタから指定可能。

(例)font-family: Arial, Geneva, Verdana, sans-serif;

また合わせてエンコーディングも変えておくのがよい。iso-8859-1が、海外で多いらしい。