はじめてのスタイルシート

はじめてホームページを作る時には、まず「見栄えをどうするか」から考えるかもしれません。印象的なページにするためにHTML タグを使ってあれこれ試すのは楽しいものです。しかし、複数のページを作り進めていくと、文字の色やサイズなどをその都度指定するのが面倒になってきます。

そこで「伝えたい内容がしっかりしていればデザイン的な要素は必要ない」と割り切って淡々と文章を書く、という解決方法もありますが、訪れた方に興味を持っていただけるようなデザインも大切な要素のひとつです。 ...では、どうするか。

はじめてのCSSデザイン

HTML は、もともと文書の文字色やサイズなどを指定するためにあるのではなく、文章をHTMLタグによって「見出し」とか「段落」とかに区分けすることで「文書の構造を明確にすること」が本来の役割です。この区分けをマークアップと呼び、そのためのルールがHTMLの記述方法です。

HTML によるマークアップとCSS

実際の作業は、日本語の文章を整理することから始めます。 まず、公開したい文を内容ごとにいくつかのブロックに分け、そのブロックごとに見出しをつけます。ここで各ブロックが通常の文章であればさらに段落ごとに区切り、リスト（箇条書き）として表したほうが良い部分は、項目ごとに改行しておくなどの日本語の文章の構造的な整理をします。

次に、どれが「見出し」で、どれが「段落」、あるいは、「リスト」なのかをHTMLタグを使って囲み、さらに必要に応じて画像を表示するためのタグを追加するなどの作業、つまりマークアップを行います。

文字の色や背景などの見た目（表現方法）に関わる要素は、 HTMLとは別に、各ページに共通の『表示の仕様書』のようなものを作成し、表示の仕方を指定します。 これがカスケーディング・スタイルシート(CSS)、あるいは単にスタイルシートと呼ばれるものです。このためHTMLでは文書の構造だけを簡潔に記述するだけで済む。これがスタイルシートを使っているページの基本的な考え方です。

TABLEタグからCSSによるレイアウトへ

たとえば... 下のようなページを作ろうとすれば、TABLEタグを使って内容を配置することもできます。 しかし本来TABLEタグは表を作るための物なので、文章をレイアウトするために使うのはなるべく避けるべきです。 文章の配置もCSSを使って行うようにすると、必ずしもTABLEによる配置を必要としません。

divタグでグループ化

CSSによるレイアウトの１つの方法として、「ページはヘッダ、コンテンツ、フッタからなると決めてしまい、さらにコンテンツはその内容よってにメインとサブに分ける」などのように、文章をその内容によってdivタグでブロック化し、それらを識別できるようにid属性で名前を付けます。これはdivタグで文章の構造を明確にするのが目的ですが、同時にCSSの適用を意識した作業です。

（この図はWeb Designingの記事中の物ではなく、こちらで説明用に作成したもの）

CSSではこの各idごとに配置やデザインを指定し、さらに各idに含まれるHTMLタグを狙い打ちするように（CSSの適用範囲を各id内のタグに限定）してCSSの指定をするとすれば、HTMLの記述は比較的単純にすることができます。一方、CSSファイルは結構複雑になってしまいますが、CSSの適用範囲を各id内に限定するような書き方にすると、その修正もそう難しくはありません。

HTMLの記述は、単純で規則性のある物に

HTMLタグを単純にすることでCSSも適用しやすくなります（逆に言うと複雑なHTMLが使われているページへのCSSの適用は難しい）。またHTMLの自動生成も容易になりますから、現在これに近い構造のXHTMLがBlogでも使われています。CSSがある程度わかればBlogの見栄えを変更することも、そう難しいことではありません。

CSSによるレイアウトはお勧めできない!？
現実には、CSSをどのように使ってレイアウトするのかが難しく、一筋縄ではいきません。複数のブラウザでチェックし各ブラウザの挙動を把握していないと、表示が大きくくずれるなどの問題が起きたりします。特にIE6以前ではCSSで多少小細工をしないと正しく表示されない部分ができたりします。自分がIE7以降を使っている場合でも、御覧になる方がIE6以前のブラウザを使っていればIE6での表示確認は必要であり、さらにFireFoxなど他のブラウザでの表示も確認しないと、どんなふうに表示されるかわかりません。Tableレイアウトなら多少の表示の差ですんでいたのに、CSSによるレイアウトにしたら、特定のブラウザで表示が大きく崩れることもよくあります。 このため現在Tableレイアウトで組んでいるページを一気にCSSによるレイアウトに置き換えるのはお勧めできません。

とりあえずはTableによる配置を最小限にするようなHTMLの構造の改良を行うだけにして、CSSでどんな表現ができるのかを試すこと、そしてスタイルシートに慣れてから、CSSによる配置が可能かどうかを試してみるほうが良いと思います。実は当方も「Tableによる文字などの配置を最小限にしてある」という段階で、いまだTableレイアウトのページとCSSによるレイアウトのページが混在しています。「最小限のTableによる配置」ならそれほど実害はありませんから、CSSによるレイアウトに急ぐ必要もありません。それでも...方向性としてはサイト全体をCSSによるレイアウトに置き替えていこうと考えています。

ナビゲーション・ブロックのサンプル

ここでCSSによる配置と問題点を説明できれば良いのですが、あまり自信がないのでやめておきます。しかしCSSのサンプルが全くないのでは説得力に欠けますから、以前ここのナビゲーション・バーで使っていたCSSをサンプル向けに書き直したものを紹介します。これからCSSがどんな働きをしているのかを感じ取ってください。

ナビゲーションによく使われるHTML は、このように各ページへのリンクを単純にリスト項目として並べたものです。

<ul>
<li><strong>Info</strong></li>
<li><a href="../info/index.html">Index</a></li>
<li><a href="../info/readme.html">ページの構成</a></li>
<li><a href="../info/history.html">更新履歴</a></li>
<li><a href="../info/domain.html">ドメイン取得</a></li>
<li><a href="../info/css_design1.html">Web製作</a></li>
</ul>

このHTMLをブラウザに表示させると以下のようになります。HTMLを初めて見た方でも、<li>と</li>がペアになって使われていて、その間にページのアドレスと文字がはいっている、aはリンクを示すみたい...くらいは想像できませんか？

• Info
• Index
• ページの構成
• 更新履歴
• ドメイン取得
• Web製作

このままでも「ナビゲーション」として成立しますが、さらにスタイルシートで指定を加えることで、たとえばこのような表示にも変えることができます。

ただし、このナビゲーションバーを表示させるには、HTML にCSSを適用しやすくするため、もう少しHTMLタグと属性の追加をします。

id属性、class属性の追加

まず、これらのナビゲーション用のリスト全体をdivタグで囲み、navbarというidを割り付けます。さらに特定の箇所の表示を変えるために少しclass属性を追加しています。ここではclass="tp"は「テーマ」、class="current"は「現在表示中」のページの示すために使いました。

HTMLパートサンプル1

<div id="navbar">
<ul>
<li class="tp"><strong>Info</strong></li>
<li><a href="../info/index.html">Index</a></li>
<li><a href="../info/readme.html">ページの構成</a></li>
<li><a href="../info/history.html">更新履歴</a></li>
<li><a href="../info/domain.html">ドメイン取得</a></li>
<li class="current"><a href="../info/css_design1.html">Web製作</a></li>
</ul>
</div>

この段階で、このHTMLをブラウザに読み込んでも、単純なリストとして表示されるだけです。 ナビゲーションバー風の表示にするには、さらにid="navbar" や class="current"などの属性を与えたHTMLタグで囲まれた部分をどう表示させるか、これをCSSを使って書きます。

CSSがはじめての方には、わかりにくいと思いますが、ベースとなるHTMLタグに意味を持たせるため赤い文字の部分（HTMLタグと属性） を追加し、その表現方法をスタイルシートに定義することで、ページのデザインを変えようとしている、ということがなんとなく分かるでしょうか？。 文字の色や配置などの情報をHTML に直接記述することを避け、その表現はスタイルシートにまかせるわけです。

いきなりidとかclassという言葉を使いましたが、これは特定のHTMLタグの識別に使われるものです。 classは「要素の分類に使われる識別子」です。同一ページ内に同じclass名がいくつあってもかまいません。 それに対しidは「固有の識別子」として使われるため『1つのページ中に同じid名が複数あってはいけない』ことになっています。また、スタイルシートにより表現が重複する指定がある場合はclassより固有の識別子であるidによる指定が優先されます。

....？何のことかわからないかもしれませんが、これでわからなくても普通です。idは多用しすぎるとclass指定の反映がされにくくなることもあります。使い分けがよくわからいないうちは「基本的にclass指定だけ」にしておいたほうが混乱しないでしょう。また、ここではnavbarというキーワードを使いましたが、これは自分で定義する部分です。navとかnaviあるいはgo-an-naiなど、制限はありますが任意のキーワードです。

CSSサンプル

このナビゲーションバーに使ったスタイルシートを以下に示します。説明を/*　*/内に入れてありますから、じっくり見てください。尚、このCSSをそのまま、あるいは改造してあなたのページで使っていただいてもかまいません。

CSSパート

  <style type="text/css">
<!--
/*  #navbarのCSSサンプル  */

/* ナビゲーションバーの表示指定 */
#navbar{
  width:auto; /* ←このような記号で囲まれているこの部分はすべて注釈→ */
  height:20px;
  background-color:#AFAFAF; /* 背景色 */
  border-color:#FFFFFF #565656 #6E6E6E #D5D5D5; /* 枠の色、順番は「上、右、下、左」 */
  border-width:1px 1px 2px; /* 枠の太さ、指定が3つの時の順番は「上、左右、下」 */
  border-style:solid; /* 枠の種類、solidは単色 */
  font-size:9pt;
  color:#CCC; /* 文字色、この色指定は「#CCCCCC」と同じ意味 */
  white-space:nowrap;
  }

/* 番号なしリスト UL の表示指定 */
#navbar ul{
  margin:0 0 0 10px; /* 0の場合の単位は省略可 、指定が4つの時の順番は同様に「上、右、下、左」 */
  padding:2px 0 0; /* 指定が3つなら「上、左右、下」、もし2つなら「上下、左右」*/
  list-style:none; /* リストマークを非表示に */
  font-size:100%;
  }

/* リスト項目 LI の表示指定 */
#navbar li{
  float:left; /* 左にフロートさせて1行に納める */
  width:90px; /* フロートの幅を指定 */
  margin:0; /* マージン指定 値が1つなので「上下左右のマージンが0」*/
  padding:0; /* パディング指定 */
  border-top:solid 1px #333; /* 枠の種類、太さ、色をこのように一括で指定しても良い */
  border-right:solid 1px #999;
  border-left:solid 1px #444444;
  border-bottom:solid 1px #666;
  background-color:#888888; /* リスト項目背景色 */
  background-image:none; /* 背景画像なし */
  line-height:15px; /* 行間隔 */
  text-align: center; /* 文字中揃え */
  text-indent:0;
  color:#FFF;
  }

 /* tp 背景、ボーダーを透明に */
#navbar li.tp{
  background-color: transparent;
  border-width: 0px ;
  padding:0 5px 0 15px;
  text-align: right; /* 文字右揃え */
  }

  /* strong 文字を強調 */
#navbar strong{font-weight:bold;}  /* 改行しないでこのようにも書ける */

 /* リンクされている文字の色指定 */
#navbar a{
  padding:0 12px;
  background-color: transparent;
  font-weight:bold;
  text-decoration:none;  /* 下線表示などの装飾なし */
  }
#navbar a:link{color:#FFF;}  /* リンク部分：表示前 */
#navbar a:visited{color:#FFF;}  /* リンク部分：表示済み */
#navbar a:hover{color:#AAAAFF;}  /* リンク部分：オンマウス */
#navbar a:active{color:#333;}  /* リンク部分：オンクリック */

 /* current 表示中のページの文字、背景、ボーダーの色を変更 */
#navbar li.current{
  background-color: #8888BB;
  border-right-color: #888888;
  color:#FFF; 
  }
#navbar li.current a:link, /* カンマで区切って、次と同じ指定に */
#navbar li.current a:visited{ color:#ECFFFF;}  /* リスト中のリンク部分の指定 */
#navbar li.current a:hover{ color:#D0DFDF;}
-->
  </style>

指定を並べているだけですが、リストが長過ぎて読む気がしませんか？。このナビゲーションは少々複雑なCSSになってしまいましたが、色とかサイズなどの表現方法を指定するだけなら、ほんの数行ですから簡単です。 また、marginとpaddingの違いはなにとか、疑問点を調べ始めるとなくわかるようになるかもしれません。
この『CSSパートサンプル』をそのままコピーして適当なhtmlファイルの<head>と</head>の中に貼り、『HTMLパートサンプル』を<base>以下に貼ってブラウザに読み込ませれば、だいたいこのページのように表示されるはずです。お試しください。ただしIE6,Firefox,Safariなど新しいブラウザでは問題ないと思いますが、Win IE5.xでは、表示が乱れるかもしれません。

class="navbar"の場合

ここではナビゲーションはバーを固有の識別子を使って<div id="navbar">としましたが、要素はナビゲーションに分類されるだけと考えるとclass="navbar"のほうが自然かもしれません。そこで<div class="navbar">に置き換えたのが以下のHTMLサンプル。

HTMLパートサンプル2

<div class="navbar">
<ul>
<li class="tp"><strong>Info</strong></li>
<li><a href="../info/index.html">Index</a></li>
<li><a href="../info/readme.html">ページの構成</a></li>
<li><a href="../info/history.html">更新履歴</a></li>
<li><a href="../info/domain.html">ドメイン取得</a></li>
<li class="current"><a href="../info/css_design1.html">Web製作</a></li>
</ul>
</div>

ただし、この場合スタイルシートもclass="navbar"で表示できるように書き換える必要があります。このclass="navbar"で使っているスタイルシートは先に使用したCSSパートの「#navbar」を「.navbar」に置換しただけなので掲載は省略します。必要であればこのページのソースの先頭にありますからどうぞ。

最後に、 CSSデザイン関連の書籍の紹介

1ページでHTMLの役割から、CSSの使われ方まで一気に加速して書いていますから、そもそも無理なことをやっているわけで、なんのことかわからないかもしれませんね....まあ、HTMLとCSSの関係を雰囲気だけでも理解していただければ良いのではないかと思います。

Web製作関連リンク

CSSの検証 CSS Validation Service
HTMLの検証The W3C Markup Validation Service
HTML5 における HTML4 からの変更点

• 追加 2008/04/04
• 改訂2008/03/22
• 改訂2006/02/06
• 改訂2006/01/25
• 改訂2006/01/08
• 公開：2005/11/10

- adsense -

下のような広告はgoogleとの提携で表示しています。
あなたのホームページで広告を表示したい場合、ここからに申し込むこともできます。