スタイルシート(CSS)でホームページの表示を統一

スタイルシート(CSS)でホームページ(HP)の表示を統一する方法の解説です。外部スタイルシート(CSS)でホームページのデザインや表示を変える方法などを記述しています。

ホームページのページ数が少ない間は、個々のページのデザインや表示をファイルの中で個別に指定してもよいでしょうが、ページ数が200~300以上にもなってくるとその管理が大変になってきます。

途中で気分が変わってちょっと表示を変えたいと思ったら、全ページを変更しなければなりません。また全ページの書き方が統一されていれば、TEXTSS等のソフトで置換により書き換えができますが、タグの使い方や書く順番等の書き方が統一されていないと全ページの一括変更は不可能に近くなります。

また、個々のホームページの内容にページのデザイン楽天や表示方法を個別に書くと、HTMLファイルの大きさは必然的に大きくなります。この為、ホームページの表示は遅くなります。

そのようなことを防止するには、早い時期からホームページのデザインや表示は外部スタイルシートCSS(Cascading Style Sheets カスケーディング・スタイルシート)で記述することをお勧めします。

外部スタイルシートによるページのデザインや表示

同じ内容のスタイルシートを各ページに書いてもページのデザインや表示を統一できますが、ページが多い場合は、外部スタイルシートに書く方が簡単で変更も楽になります。

METAタグでファイル中の style 属性で使用するスタイルシートの基準言語（CSS）を指定することができます。次のようにヘッドタグ<head></head>の中に記述します。

この指定は、そのページで使われているスタイルシート言語が、CSS（カスケーディングスタイルシート）であるということをブラウザに伝えるためのものです。

<meta http-equiv="Content-Style-Type" content="text/css">

省略しても問題はないようですが、スタイルシートを使ったページではできるだけ指定しておく方が間違いがないでしょう。外部スタイルシートだけのときは必要ありません。

外部スタイルシートの読み込み方法は次のようにヘッドタグ<head></head>の中に記述します。

<link rel="stylesheet" href="style.css" type="text/css">

この場合は style.css というスタイルシートのファイルがHTMLファイルと同じフォルダ(ディレクトリー)にあるときです。ファイル名は拡張子がCSSであれば別の物でもかまいません。

例えば私のホームページで使っているスタイルシートのごく一部を紹介すると次のようになります。

p {margin-top:5px;margin-bottom:5px;font-size:medium;text-align:left;}
.cent_txt {text-align:center;}
#main {max-width:810px;margin:0 10px 0 180px;}

上の P タグの例では、Pタグの前と後ろに5ピクセルの余白を取り、文字の大きさを中ぐらいにして、左寄せで書くということです。

次の行の「.cent_txt」「ドット+cent_txt」は class="cent_txt" で指定する場合の記述方法です。このclassというのは後述のidに比べて、そのページで何度でも使うことができます。

その次の行の「#main」は id="main" で指定する場合の記述方法です。このidというのは、前記のclassとよく似ていて、idはそのページで一度だけ使うものに指定します。この場合は、メインページの読み込み位置を指定していますので一度しか使いません。

またスタイルシート内にコメントを記述する場合は、 /* コメント */　のように、記述します。

スタイルシートの詳しい使い方は http://www.tohoho-web.com/ 「とほほのWWW入門」にあります。

普通はタグを使うだけで、そのタグに設定されているスタイルシートが自動的に適用されます。

特別に変更したい時は次のようにします。例えばPタグで書くと文字は左寄せされるようにCSSで指定されているとすると、特別に文字をセンタリングして使いたい時は

<p class="cent_txt">文字列</p>

のようにクラス指定してやります。

また、タグにクラス指定を複数個設定したい場合は、クラス名を半角スペースで区切って指定します。

別の例では、私のホームページのメイン部分の記述は次のようになっています。

<div id="main">メイン部分(右側の記事)</div>

一般的にはこのようにスタイルシートは<DIV>タグの中で指定することが多いと思います。

このようにして作ったページのデザインや表示方法を変更する場合は、スタイルシートのファイル style.css の変更だけで全ページに対して行なうことができます。とても便利です。

普通はひとつのタグにはクラス(class)でひとつのスタイルシートを適用しますが、ひとつのタグにクラスでふたつ以上のスタイルシートを適用したいことがあります。この時は次のように複数のスタイルを半角スペースで区切って記述します。

<div class="style1 style2 style3">

スタイルシート非対応のブラウザでどのように見えるのかも確認しておいた方がよいでしょう。

オペラ(Opera)バージョン11には、「表示」の「スタイル」の中に「ユーザーモード」というのがあります。ここのユーザーモードで全てのスタイルに何も適用しなければ、スタイルシートを無効にしたのと同じです。

このようにした時、そこそこ、うまく表示されていて、特に問題がなければ良しとしましょう。

ページの使い勝手はIEやFirefoxやChromeで確認するだけでなく、テキストブラウザ(Lynx)などでも確認しましょう。また、Javascriptを無効にしてもなんとかページが見られるか確認しましょう。インターネットユーザーは様々な方法でページを見に来ます。