第5章 CSSの復習と纏め
5-1.CSSの歴史的経緯とCSSを使うメリット
CSSとは Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、論理構造を記述することを本来の目的とするHTMLに対して、要素の見栄えや配置など（即ちスタイル） を指示するシートのことを指します。このCSSにより文章の構造と表示に役割が分離されることになりました。
CSSの歴史的経緯：
HTML言語は、1989年にCERN(欧州原子核研究機構)のTimBerners-Leeによって、どんなコンピューターからでも情報をアクセス出来る記述言語として提案されました。
所が、その後ブラウザーのシェア競争によって、ブラウザー独自の見栄えを良くする機能が広がり、その原点であるPlatform Independence性が失われて来ていました。
そこで、この記述言語の更なる標準化の動きが高まり、1997年末HTML4.0がリリースされ、HTMLは本来の論理構造を表すための機能に限定し、 視覚的デザインを指定する機能はスタイル・シートに分離しようという原則が策定されました。
2003年にはXMLの標準化と相まって、XTML1.0のSecond Editionのりりースされ、CSSの一層の強化と、iPhoneなどの新しい出力デバイスにも対応するようになりました。
2008年にはHTML５の草案がリリースされ、 InternetExplorer、Firefox、GoogleChrome、Safari、Opera等の各ブラウザーが相次いで、それらのルールに準拠したしたバージョンを準備するようになりました。
新標準に移行する過渡期である現在は、XHTML 1.0 Transitionalというバージョンが最も広く利用されていて、XTML1.0のルールを採用しながらも、旧来のバージョンをも受け入れるというものです。
然しながら、HTML５が完全に導入された暁には、旧来からあったHTMLタグの中のfont属性や一部のブラウザーでしか使えなかったframeタグなどは使えなくなり、 見栄えや配置などの属性はすべてCSSで規定しなければならなくなります。
CSSを使うメリットと注意点：
- 保守性の向上、容易なデザイン変更
外部ファイルによるCSSの記述では、サイト内の全てのページから外部CSSファイルに対しリンクを張る形になりますが、この外部ファイルでの記述を修正することで、各ページで使われている同じID名やクラス名の部分を一括して変更することができます。
head内に記述するCSSでも、共通のスタイルはCSSの一カ所で変更できます。 - ソースの軽さ
CSSでレイアウトしたホームページは、TABLEタグでレイアウトしたものにくらべHTMLソース（ファイル）が軽くなります。CSSによるレイアウトでは、通常DIVタグに「id」もしくは「class」といったセレクタを記載し、CSS記述部分を参照させてるのでBody部分はコードが少なく、軽くなります。 - 表示の速さ
HTMLファイルの容量が小さくなることでページを開くまでの時間が短縮できるばかりでなく、DIVタグを用いたCSSによるレイアウトの場合、TABLEタグでレイアウトした場合よりページ全体の読み込みが完了し、その結果サイトが表示されのが早くなります。
- SEC対策に効果的
一般に、検索エンジンのロボットはHTMLファイルに書かれた上位200語程度を強く認識すると言われています。その中で、CSSを使わずにHTMLの中でで装飾をしたり、 TABLEタグを配置すると、より強調したいキーワードが検索エンジンのロボットにうまく認識されなくなってきます。 - CSSレイアウト使用上の注意 － ブラウザによる表示の違い
CSSレイアウト一番のウィークポイントはブラウザによる表示のされ方の違いです。一般に8～9割の方が使用していると言われているInternet Exploreｒと、FirefoxなどではCSSの認識のされ方が異なります。そこで重要になってくるのが複数のブラウザによる確認です。
5-2.CSSの設定方法
CSSの記述場所 ：
CSSを記述場所には次の３通りがあります。
（１） HTMLタグに直接記述する
HTMLタグの「style」属性を指定し、そこでCSSの記述を行います。
例えば <p style: "color:#ff0000">サンプル テキスト</p>
この方法はCSSの論理構造からの分離という趣旨からいって余り推奨されません。
（２） HTMLファイルのヘッダーの中に記述する
<head>と</head>との間のの間に記述する。
例えば： <head>
<style type="text/css">
.chr_color { color: "#ff0000"; }
</style>
</head>
<body>
・
・
<p class="chr_color"> サンプル テキスト</p>
・
・
</body>
（３） 外部ファイルに記載する
CSSの良さを最も効果的に出してくれる記述方法が、外部CSSファイルによる記述方法です。
HTMLファイルとは別に拡張子を「css」としたファイルを作り、そこに記述していきます。
HTMLのHEAD部分にLINKタグを使ってCSSファイルにリンクを張ます。
例えば: <link rel=stylesheet type="text/css"href="style-sheet.css"/>
この場合外部CSSファイルは、このページと同じレベルにある style-sheet.css です。
CSSの指定の仕方 ：
CSSの指定の仕方、即ちセレクターの種類は次の４通りがあります。
（A） HTMLのタグ名を指定する
例えばbodyの中では： <h1> サンプルの表題</h1>
に対してheadの中では： h1{ size:"36px"; color:"green";}
HTMLのタグ名を指定する場合は、<h1>のようにそのページ内に一回しか使用されていない
タグなら良いが、<p>タグのように頻繁に使われているものには、タグ名そのものを指定する
と、特定のスタイルがそのページ内のすべてのタグに適用されてしまうので注意を要します。
（B) HTMLタグに ID名を付って、そのID名を指定する
例えばbodyの中では： <div id="container> ・・・ </div>
に対してheadの中では： #container{ width:"700px"; margin: 0 auto"border";}
ID名を指定する場合は、そのページに一回しか出て来ないBOXしか指定できない。
例えば、そのページの大枠のDIVタグのようなもの。
（C) HTMLタグに Class名を付って、そのClass名を指定する
例えばbodyの中では： <p class="photo_txt> これは創造の杜公園の写真です </p>
に対してheadの中では： .photo_txt { size: 18px, color: brown; width:"200px"; ;}
Class名を指定する方法は、<p>タグのようにそのページ内に何回も出てくるタグに対して、
別々のスタイル・ルールを適用したい場合に向いています。その場合、同じHTMLタグに対し
て別々のClass名を付して、その各々に別のスタイル・ルールを規定すればよいのです。
（D) HTMLタグの階層パスで指定する
残念ながら、ホームページ・ビルダーV15にはこのパスを指定する手立ては用意されていませ
んが、当面はスタイル・シートのソース上で、手入力すれば指定することは可能です。
例えば、contentDIVの中のleft_sideDIVの中の、main_txtのClass名を付した<p>タグを指定して
フォント・サイズ14px、太字のルールを設定する場合は；
#content #left_side p.main_txt { font-size: 14px; font-weight: bold; }
と入力する。 これは非常にフレクシブルな指定方法です。
ホームページ・ビルダーによるスタイルの規定 ：
ホームページ・ビルダーによるスタイル・ルールの設定には「スタイルシート・マネジャー」を使います。
メニュー「表示」 → 「スタイルシート・マネジャー」 → 「スタイルシート・マネジャー」ダイアログ →
<ルール情報欄の下端にある「追加」ボタンをクリック> → 「スタイル設定」ダイアログを表示
上の図は「スタイル設定」ダイアログで、HTMLタグの<h1>をセレクターに指定して、スタイル・ルールを設定しようとした時のものです。
左上隅にはセレクターを指定する窓があり、
①HTMLタグをセレクターに指定
HTMLタグそのものにセレクター指定して、スタイル・ルールを設定する。
②クラス・セレクター指定
HTMLタグにクラス名を付し、それにスタイル・ルールを設定する。
クラス名はページに何カ所でも付すことが出来ます。
また、タグのパスをセレクターにするのは、この指定で可能なことが経験的に判っています。
③IDセレクター指定
HTMLタグにID名を付し、それにスタイル・ルールを設定する。
但し、同じID名はページに１ヶ所しか付すことは出来ない。
の３通りのセレクター指定ができるようになっています。
「スタイル設定」ダイアログ・ボックスは上図のように１０個のタブから構成されていますが、現実的にはルールのカテゴリーを６つのタブに分類してルールを規定し易いようにされています。最後の４個は無視しても結構です。
| カテゴリー名 | 主なルール | 注目すべきルール |
|---|---|---|
| フォント | 文字のサイズ、カラー、フォントの種類等を設定する | 文字サイズはページの見栄にとって重要 |
| 色と背景 | 背景のカラー、背景画像、ボックスの背景等を設定する | 背景のカラはページの見栄にとって重要 |
| 文字のレイアウト | テキストの行間、行揃え、文章に関する設定をする | 行高、水平方向の配置はページの見栄にとって重要 |
| レイアウト | ボックスや内容物の配置、罫線の色、太さ、種類等を設定する | マージンはBox自身の位置、パディング はBox内の内容の位置にとって重要 |
| リスト | リスト・タグの表示方法などを設定する | リスト・マークの有無、位置にとって重要 |
| 位置 | ボックスの横・縦のサイズやレイアウトの配置の方法などを設定する | 回り込み(フロート）、解除（クリア）、 表示（inline)、はみ出し（auto)は乱れに関係して重要 |
5-3.CSSによるページ・レイアウト
DIVによる典型的なページ・レイアウト ：
ページ内の内容物の配置を決めるレイアウトには従来tableタグが多く使われていましたが、最近ではdivタグが多く使われるようになったことは既に説明した通りです。
divタグを使った典型的なページ・レイアウトはSample02か或いはSample03のようなものです。
Sample02はnａｖｉ_menuの領域を画面左側に配置し、manuを縦並びにした方式に対し、Sample03は navi_menuの領域をＨｅａｄｅｒの直ぐ下に配置し、menuを横並びにした方式です。
何れにしても、<div>タグによって画面全体をcontainerという領域で囲み、その中に入る内容を一纏めにして締まりあるものにしています。container領域は {margin: 0 auto;} のスタイル・ルールで中央揃えにするのが一般的です。
次に、Ｈｅａｄｅｒ領域にはそのページの見出しや、ページを象徴するような画像を収めるようにしています。
Sample02では、nａｖｉ_menuの領域を画面左側に配置しますので、nａｖｉ_menuの領域とmain領域とは入れ子状態で横並びにさせます。この横並びにするためには、「スタイルシート・マネジャー」の「スタイル設定」ダイアログで「位置」タブ → 「回り込み」 → 「左」規定することのよって、この両領域のスタイル・ルールに {float: left;} のスタイルを規定しなければなりません。勿論、入れ子になる両領域の横幅の合計はその親領域の横幅と同じかそれ以下でなければなりません。
Ｓａｍｐｌｅ03では、left_side領域とmain領域が入れ子状態で横並びになりますので、「スタイルシート・マネジャー」の「スタイル設定」ダイアログで「位置」タブ → 「回り込み」 → 「左」規定することのよって、この両領域のスタイル・ルールに {float: left;} のスタイルを規定しなければなりません。同様に、入れ子になる両領域の横幅の合計はその親領域の横幅と同じかそれ以下でなければなりません。
footer領域は、通常このサイトのＣｏｐｙＲｉｇｈｔや出版主体などの情報を記載します。この領域は通常入れ子になることはありませんので、回り込みの解除の規定をしておく必要があります。 その為には、「スタイルシート・マネジャー」の「スタイル設定」ダイアログで「位置」タブ → 「回り込み解除」 → 「両方」を規定することによって、スタイル・ルールに {clear: both;} が規定されなければなりません。
5-4.CSSの幾つかの使い方のコツ
Li要素を横に並べる方法：
前節で紹介しましたSample03の例では、ナビゲーション・メニューが横並びにされますが、このためには特殊なスタイル・ルールを適用する必要があります。
通常、ナビゲーション・メニューには番号なしのリスト<ul><li>メニュー項目</li></ul>を使って入力しますが、このままですと各メニュー項目は縦並びになってしまいます。この<li>の項目をを横並びにするには、 スタイルシート・マネジャー」の「スタイル設定」ダイアログで「位置」タブ → 「回り込み」 → 「左」と規定すると同時に、「スタイル設定」ダイアログで「位置」タブ → 「表示」 → 「inline」と 規定する事が必要になってきます。その結果、liのスタイル・ルールには li { float : left;display : inline;} がコーディングされていなければなりません。
一連のメニュー項目の全体の水平方向の配置は<ul>の左マージンで調整します。それには「スタイルシート・マネジャー」の「スタイル設定」ダイアログで
「レイアウト」タブ → 「左方向・マージン＝100px」のように規定することのよって、ulのスタイル・ルールを例えば ul {margin-left: 100px;} ののように規定すれば良いのです。
ボックス内に余白を作る方法：
ある領域内、或いは枠内の内容物の配置の見栄えを良くするには、枠の周囲と内容物の間の余白を一律に綺麗に設定することの掛かっています。
例えば、このの頁３節上に「スタイル設定」に関する表を掲載してありますが、その表の内容物は大変綺麗に配置されています。その理由は枠線と中に納まる文字列との間の余白が綺麗に揃っているからです。それを実現するには、外枠この場合は<td>の上端、下端、及び左端のpaddingをそれぞれ2px、2px、2pxと設定してあるからです。
この場合、外枠のpaddingで指定する代わりに、内容物この場合文字列のmarginで指定することも可能ですが、その方法はメンテナンス上手間が掛かり問題がありますのでお勧めできません。
レイアウトの崩れを直す方法：
<div>タグによるページ・レイアウトを作成中、特に<div>領域が入れ子状態にある場合にしばしば所謂レイアウトの崩れと称する現象が起き、期待してレイアウトと異なる結果が現れて悩まされることがよく起こります。その様な場合は以下の原因はたは複合原因を取り除けば良いのです。
この原因の主なものは次のような場合です。
☆ 入れ子の枠に { float: left;} の設定がなされていない。
☆ 入れ子の枠の横幅の合計が親枠の横幅を上回っている。
☆ 入れ子の枠の横幅の設定がなされとおらず、内容物の入力とともに親枠の横幅を上回っている。
☆ 入れ子の枠に枠線の幅、パッディング、マージン、の設定が加わり、横幅関連の変化が起こった。
☆ 入れ子の最後の枠の次の枠に {clear: both;} の規定がなされていない。
☆ すべての入れ子枠に{ float: left;} が規定されている場合の親枠に{overfow: auto;}の規定がない。
5-5.スタイルシート・マネジャーで設定できない便利なルール
Ｗ３Ｃ委員会では現在新しいＣＳＳルールであるＣＳＳ３を策定中ですが、まだその最終案が出来上がっていません。然し、InternetExplorer、Firefox、GoogleChrome、Safari、Opera等の主要ブラウザーは既に新しいルールを予測して、着々とそれらの新しいルールに対応するような動きを示しています。
残念ながら、ホームページ・ビルダーやＤｒｅａｍｗｅａｖｅｒはそれらの新しいルールを生成する機能を追加していませんが、ＳｔｙｌｅＳｈｅｅｔに手作業でＣＳＳ３の新しいルールを入力すれば作動する便利なものが筆者のテストで確かめらています。以下にそれらの幾つかを紹介します。
☆ div枠の中央揃え
#container { margin : 0 auto;}
☆ 初期設定のマージンとパッディングのリセット
* { margin : 0 padding: 0;} * はユニバーサル・セレクターですべてのタグを指す。
☆ Tableの二重罫線を単線に直す
table { border-collapse : collapse;} tableとｔｄに枠線を指定すると現れる二重罫線を単線に直す。
☆ 外枠の角を丸くする
.box { border-radius:7px;;} 4隅の角に7pxの丸みを付ける。
☆ Box枠に陰を付ける
.box { box-shadow: 10px 10px brown;} 縦横に10pxの茶色の陰を付ける
☆ 背景画のｻｲｽﾞを指定する
.box { background-size: 200px 50px ;} 指定した背景画像を200pxX50pxの大きさにする。
☆ 背景色をグラデーションにする
.box { background：-moz-linear-gradient(left top, white, yellow) ;}
残念ながら現時点ではFireFoxでのみ作動する。
これらのCSS3のルールを適用した例はSmpple04のようなものです。