スタイルシート(CSS)でホームページの表示を統一
ホームページのページ数が少ない間は、個々のページのデザインや表示をファイルの中で個別に指定してもよいでしょうが、ページ数が200〜300以上にもなってくるとその管理が大変になってきます。
途中で気分が変わってちょっと表示を変えたいと思ったら、全ページを変更しなければなりません。また全ページの書き方が統一されていれば、TEXTSS等のソフトで置換により書き換えができますが、タグの使い方や書く順番等の書き方が統一されていないと全ページの一括変更は不可能に近くなります。
また、個々のホームページの内容にページのデザインや表示方法を個別に書くと、HTMLファイルの大きさは必然的に大きくなります。この為、ホームページの表示は遅くなります。
そのようなことを防止するには、早い時期からホームページのデザインや表示は外部スタイルシートCSS(Cascading Style Sheets カスケーディング・スタイルシート)で記述することをお勧めします。
2008年7月
スポンサード リンク
外部スタイルシートによるページのデザインや表示
同じ内容のスタイルシートを各ページに書いてもページのデザインや表示を統一できますが、ページが多い場合は、外部スタイルシートに書く方が簡単で変更も楽になります。
基準スタイルシート言語の指定
METAタグでファイル中の style 属性で使用するスタイルシートの基準言語（CSS）を指定することができます。次のようにヘッドタグ<HEAD></HEAD>の中に記述します。
この指定は、そのページで使われているスタイルシート言語が、CSS（カスケーディングスタイルシート）であるということをブラウザに伝えるためのものです。
<META http-equiv="Content-Style-Type" content="text/css">
省略しても問題はないようですが、スタイルシートを使ったページではできるだけ指定しておく方が間違いがないでしょう。外部スタイルシートだけのときは必要ありません。
外部スタイルシート(CSS)の読み込み方
外部スタイルシートの読み込み方法は次のようにヘッドタグ<HEAD></HEAD>の中に記述します。
<LINK rel="stylesheet" href="style.css" type="text/css">
この場合は style.css というスタイルシートのファイルがHTMLファイルと同じフォルダ(ディレクトリー)にあるときです。ファイル名は拡張子がCSSであれば別の物でもかまいません。
外部スタイルシート(CSS)の内容
例えば私のホームページで使っているスタイルシートのごく一部を紹介すると次のようになります。
P {margin-top: 0.3em; margin-bottom: 0.3em; font-size: medium; text-align: left; line-height: 130%;}
.center {text-align: center;}
#main {margin-top: 5px; margin-left: 170px; margin-right: 20px;}
外部スタイルシート(CSS)の簡単な説明
上の P タグの例では、Pタグの前と後ろに文字の高さの0.3倍の余白を取り、文字の大きさを中ぐらいにして、左寄せで書き、行間を130%にするということです。
次の行の「.center」「ドット+center」は class="center" で指定する場合の記述方法です。このclassというのは後述のidに比べて、そのページで何度でも使うことができます。
その次の行の「#main」は id="main" で指定する場合の記述方法です。このidというのは、前記のclassとよく似ていて、idはそのページで一度だけ使うものに指定します。この場合は、メインページの読み込み位置を指定していますので一度しか使いません。
またスタイルシート内にコメントを記述する場合は、 /* コメント */ のように、記述します。
スタイルシートの詳しい使い方は http://www.tohoho-web.com/ 「とほほのWWW入門」にあります。
スポンサード リンク
HTMLファイルでの外部スタイルシートの使い方
普通はタグを使うだけで、そのタグに設定されているスタイルシートが自動的に適用されます。
特別に変更したい時は次のようにします。例えばPタグで書くと文字は左寄せされるようにCSSで指定されているとすると、特別に文字をセンタリングして使いたい時は
<P class="center">文字列</P>
のようにクラス指定してやります。
また別の例では、私のホームページのメイン部分の記述は次のようになっています。
<DIV id="main">メイン部分(右側の記事)</DIV>
一般的にはこのようにスタイルシートは<DIV>タグの中で指定することが多いと思います。
このようにして作ったページのデザインや表示方法を変更する場合は、スタイルシートのファイル style.css の変更だけで全ページに対して行なうことができます。とても便利です。
スタイルシート非対応のブラウザでの確認
スタイルシート非対応のブラウザでどのように見えるのかも確認しておいた方がよいでしょう。
オペラ(Opera)バージョン11には、「表示」の「スタイル」の中に「ユーザーモード」というのがあります。ここのユーザーモードで全てのスタイルに何も適用しなければ、スタイルシートを無効にしたのと同じです。
このようにした時、そこそこ、うまく表示されていて、特に問題がなければ良しとしましょう。
