田村仁研究室　日本工業大学創造システム工学科

メニュー

それに対して、見栄えに関わる記述だけをCSS(カスケードスタイルシート)として記述し、分離しておくことができる。CSSは別ファイルとして保存することもでき、同じCSSファイルを参照するページを作成すれば、見た目の統一が簡単にはかれる。

ただし、ブラウザによってはcssの対応にはバグも多く、正常に表示できないものもあるため，必ず各ブラウザで実際にどう表示されるか確認しておく必要がある．

外部スタイルシートの作成

まずスタイル名.cssという拡張子のファイルを新たに別に用意し，次のような内容を書き込んでおく．スタイル名は，例えばブログ用にblog.cssや，趣味のページ用にhobby.cssなど目的別に用意したり，サイト名にちなんだ名前にしたり，目的に応じてスタイルを選択しやすくできるように適当に付けておく．ただし，HTMLファイルと同様に，日本語のファイル名は使用できない．ファイル名をURLに含めても全世界からアクセスできるようにしておくためである．

body{
   background-image: url("back.jpg");
   background-repeat: repeat;
   color: #000080;
   text-align: left;
   margin-top: 0.5cm;
   font-size: 12pt;
}
H1{
   margin-left: 0.5cm;
   font-size: 24pt;
   background-color: #000080;
   color: #0088ff;
   text-align: center;
   font-weight: bold;
}

外部スタイルシートの基本的な設定方法

上の例のように次の形式で，タグ名ごとに必要な書式をひとつひとつ設定していく．

タグ名{
  設定項目名: 設定値;
  設定項目名: 設定値;
　...
  設定項目名: 設定値;
}

ここでは各設定項目の詳細は示さない．各自CSS関係の書籍やWebサイトを探して確認すること．

外部スタイルシートファイルをWebページへ読み込んで適用する方法

このスタイルシートファイルに設定しておいた書式は，自分で作成したすべてのWebページに適用することができる．その方法は，Webページ(HTMLファイル)の中の<head>部分にスタイルシートのファイル名を記述すればよい．次の例はstyleディレクトリの中にスタイルシートファイルが保存されている例である．もしもhtmlファイルと同じ場所にスタイルシートファイルが保存されている場合には単純に"スタイル名.css"と指定すること

<head>
  <title>●●のページ</title>
  <link rel="stylesheet" type="text/css" href="スタイルファイルの名前またはスタイルファイルのURL" media="screen">
</head>

外部スタイルシートをヘッダ内で指定する以外には特別になにか記述する必要はない．後は自動的に文字の色や大きさなどスタイルシートに書いておいた書式が有効になる．むしろHTMLファイルには，文字の大きさや色などは一切指定しない方がすっきりする．

Webページの中で複数スタイルを切り替える方法(クラスの利用)

あるひとつのタグに対して、場面の違いにより複数の書式を用意したいときには、「.クラス名」をつけてクラスを設定する．例えば，英語ページ用の書式と日本語ページ用の書式を別々に設定したい場合には，次のように設定する．

H1.western { font-family: "Arial Black" }
H1.cjk { font-family: "Ms Gothic" }

この例ではwesternやcjkがクラス名である．同じ<H1>に対して，westernというクラスとcjkというクラスの二つの設定を用意していることになる．それぞれ次のようにHTML中から利用する．

<h1 class=western>Introduction</h1>

または

<h1 class=cjk>紹介</h1>

また，タグ名を省略すると，すべてのタグで共通のクラス名を設定することができる．外部CSSファイルの中で次のように書く．

.red { color: red }

これによりHTMLファイルの方では，次のように色々なタグ中で指定することができる．

<h1 class=red>
<p class=red>

特定箇所だけの特別なスタイルを設定する(IDの利用)

クラスとは逆に，HTMLの方を先に考えて，ページ内の特定の1箇所に名前(ID)を付けて，他と区別した書式を設定することもできる．例えばpタグで指定される段落はページ中にたくさん存在しているが，その中のひとつに名前を付けることができる．次の例では"first"と名前を付けている．

<p id="first">

このような特定箇所だけの書式を外部CSSファイル中に作成することもできる．

p#first { color: blue }

結果的に，クラスを使用するとほとんど同様の設定方法となっており，HTMLファイル内では「class=」の代わりに「id=」を使用し，外部CSSファイルの中では「.クラス名」の代わりに，「#ID名」を使用する．ただし考え方は異なり，クラス名はあくまで書式設定のひとつのグループを表しているため，HTMLファイル中で何度も別の場所で同じクラス名が指定されることがありうる．しかし，ID名はHTMLファイル中でただ一ヶ所でしか同じID名のものが存在しないようする必要がある．(同じID名が2箇所以上で使われると，本来はエラーとなるべき．)

スタイルシート専用のHTMLタグ

スタイルシート専用のタグとして，<div>と<span>が用意されている．このタグは，HTMLとしてはまったくの無意味なタグであり，何も効果がない．しかし，次のようにHTML中である範囲を指定するためだけに用いられる．

何かの文章，<span>何かのキーワード</span>が書かれている内容の文章

divも同様にある範囲を<div>と</div>で囲って指定する．spanとdivの違いは，指定範囲が改行を含まない場合にspan，改行を含む範囲を指定する場合にdivを用いるように説明されている．

HTML上では効果のないタグだが，指定範囲に対してスタイルファイルに書かれている特定のクラスを指定することが可能である．例えばスタイルファイルに次のようにかかれており

span.red {
  font-color: red;
}
span.green {
  font-color: green;
}

そしてHTMLファイルの方に次のように書かれていると

なにか<span class="red">キーワード<span>を含む<span class="green">適当</span>な文章です．

なにかキーワードを含む適当な文章です．

このように表示される．これは，「span.クラス名」のスタイルを定義して，他のタグのときと同様に，spanのクラスを指定してスタイルを適用している．

参考になるサイト

詳細は様々なWebページで解説されている。例えばとほほのスタイルシート入門など。googleでスタイルシートについて検索して探して見よ。

色などを指定するだけで，自動的にcss記述を生成してくれるサイトもある．何もないページ。[CSSの自動作成と解説]

インターネット利用技術演習

2009年度