楽しいホームページ入門
４．スタイルシートを使いましょう

●　スタイルシートを使いましょう

スタイルシートと言うのは、HTML文書に対してページのレイアウトや書式を定義してやり、Web画面の見栄えをコントロールするものです。言い換えれば、文字の色や写真の縁取りなどの書式や、ページのレイアウトが「スタイル」と呼ばれ、その「スタイル」を定義するのが「スタイルシート」と呼ばれるものです。スタイルシートを適用するには次の４つの方法があります。

  1. CSS(Cascading Style Sheet)形式で記述された外部スタイルシートを利用
    • Link要素で利用
  2. CSS(Cascading Style Sheet)形式で記述された外部スタイルシートを利用
    • @importで利用
  3. HTML文書のHeadセクションにページのスタイルを記述
  4. HTML文書中で、style属性を記述

ここでは、最も一般的な１番の方法を採ります。

例えば、今回、ここまで敢えて定義しなかった「見出し」h1について、文字の大きさを48ポイント、文字の色を赤にしたいと思います。

まず、スタイルシートを作る為に新たにメモ帳を開き、そこに、

@charset ”shift jis”
h1 { font-size: 48pt; color:red; }

と記述し、このメモ帳を「stylesample1.css」と名前を付けて、HTML文書「sample1」と同じフォルダに保存します。ここで、１行目に記述した「@charset・・・」は、この文書がSHIFI-JIS文字コードである事を示し、これは必ずスタイルシートの１行目に入れます。

次にHTML文書を開き、そのHead部（<head>と</head>の間）に、

<link rel=”stylesheet” href=”stylesample1.css”type=”text/css” />

と記述し、保存します。その結果Web画面は下の様に変更されました。

画面

作成したスタイルシートをもう一度見て用語説明をしますと、

h1：「セレクタ」
と言う

font-size、color：「プロパティ」
と言う

48pt、red：「数値」
と言う

すなわち、スタイルシートの基本的な記述方法は

セレクタ｛ プロパティ：数値；｝

となり、１つのセレクタに２つ以上のプロパティ指定したい場合は

セレクタ｛ プロパティ１：数値１ ； プロパティ２： 数値２ ；・・・ ｝

となります。

なお、HTML文書中のコメント記述方法は、「　<!--コメント-->　」でしたが、CSS文書中のコメントは、「　　/*コメント*/　」と記述します。

ところで、CSS文書の変更後保存は、「上書き保存」でOKです。

●　文字列へのスタイルシート適用

文字のプロパティの種類は、大きさ、色、フォントの種類、装飾、行間隔、文字間隔、背景色があり、スタイルシートを使う事によってこれらを簡単に操る事ができます。又、これらは、文字列単独以外に、ページ全体にも適用できますが、この場合はセレクタはbodyになります。

文字の大きさ、色、フォントの種類、装飾について、記述方法は、

セレクタ { font-size:数値1; color: 数値2; font-family: 数値3;

　　text -decoration: 数値4; font-weight: 数値5; font-style: 数値6; }

となります。ここで、

数値1：ここではpt単位の大きさ表示をしますが、%での大きさ表示や、

　　small・large等の表示もあります。

数値２：ここでは#色コード６桁で表示しますが色名での表示も可です。

数値３： ”フォント名 ”,キーワード　で表示します。

　　キーワードを指定しておくことにより、指定したフォントがPCにイン

　　ストールされていない場合に、キーワードに該当するフォントが代替

　　えとして使用されます。

数値４：none,underline,overline,line-through

数値５：bold、normal　あるいは100～900（標準は400）

数値６：normal又はitalic（斜体）

です。実例としてにサンプルCSS文書に次の様に書き加えます。

h2 { font-size: 12pt; color: #008000; font-family: ”Times New Roman ”,Times; text -decoration:underline; font-weight: normal; font-style: normal; }
　 　　h3 { font-size: 24pt; color: #ff0000; text -decoration:overline; font-weight:bold; font-style: italic; }
　 　　h4 { font-size: 10.5pt; color: #000000; text -decoration: line-through; font-weight: normal; font-style: italic; }
h5{ font-size: 16pt; color: #0000ff;text-decoration: underline overline; font-weight: bold; font-style: normal; }

この結果、Web画面は、下の様になります。

画面

　

●　文字列特定部分のみへのスタイルシートの適用

同じタグ<p>～</p>が複数個使われていて、その内特定の<p>～</p>にだけ, あるスタイルを適用させたい状況はしょっちゅう発生します。この場合は、class属性と言うものを利用します。今、HTML文書中の特定の<p>～</p>の文字列にのみＡと言うスタイルを適用したい場合は、このＡのスタイルをＣＳＳ文書中で定義してやります。例えば、このスタイルにＡと言うクラス名を付けるとすれば、

HTML文書中・・・該当する　<p>～文字列～</p>　を

　　　　　　　　<p　class=”A”>～文字列～</p>　と変更する

CSS文書中・・・・「．Ａ {プロパティ1: 数値1 ; プロパティ2: 数値2 ; ・・ }

と記述を加えます。

又、一つの<p>～</p>の文字列内の一部分の文字列のみにスタイルを適用したい場合はどうかと言うと、span要素と言うものを利用します。今、HTML文書中の特定の文字列にのみＢと言うスタイルを適用したい場合は、

HTML文書中・・・スタイルを適用したい文字列を

　　　　　　　　<span　class=”B”>文字列</span>　と変更する

CSS文書中・・・・「span．B {プロパティ1: 数値１ ; プロパティ2: 数値2 ;・・ }

と記述を加えます。

以上の文字の行間隔、文字間隔、背景色とclass属性、span要素を合わせて確かめてみます。

HTML文書に、

<p>あいうえおかきくけこ</p>
<p>さしすせそたちつてと</p>
<p>なにぬねのはひふへほ</p>
<p>I am a gentleman.</p>

と記述してみます。まだ、CSS文書には何も追加記述しません。この場合は、Web文書は下の様になります(説明の為、画面幅を狭めています。）


画面

次にCSS文書に、

p {line-height: 200%; text-indent: 12pt; }
.background { background-color:#ff9999; }
.word { word-spacing: 15pt; }
span.loose { letter-spacing: 20pt; }

と記述し、HTML文書は次の様に変更します。

<p>あいうえおかきくけこ</p>
<p>さしす< span class=”loose”>せそたち</span>つてと</p>
<p class=” background”>なにぬねのはひふへほ</p>
<p class=”word”>I am a gentleman.</p>

と記述します。なお、「background」 、「loose」や「word」と言ったクラス名は極めて適当に付けています。これらの変更の結果、Web画面は下の様になります。「background」で背景色を指定し、「loose」で文字間隔を広げ、「word」で単語間隔を広げています。

画面

ここで、見出しや段落の位置を指定するプロパティ　text-align　の働きを確認します。いわゆる左ぞろえ（初期値）、右ぞろえ、中央ぞろえの事ですが、それぞれ数値としては、left、right、centerを使います。例えば、CSS文書中のpセレクタについて記述を下の様に変更します。

p {line-height: 200%; text-align: center; }

その結果、Web画面は下の様に変わります。中央ぞろえになりました。

画面

さて、最後の文字へのスタイルシートの適用になりますが、１文字目、１行目にのみスタイルを適用する方法があります。
これは「疑似セレクタ」と呼ばれる方法で、記述方法は、

セレクタ：疑似セレクタ {プロパティ: 数値; }

となります。文字関連の主な疑似セレクタは以下の様なものがあります。

first-letter・・・最初の１文字のみにプロパティを適用

first-line・・・・最初の１行のみにプロパティを適用

first-child・・・ある要素の中で最初に出て来る子要素のみにプロパティを適用

例えば、CSS文書に

p:first-letter { font-size: 24pt; }
p:first-line { color: red; }

と記述すれば、Web画面は下の様になります。

画面

　

●　画像へのスタイルシート適用

すでに画像を画面に表示していますが、この画像に枠を付けたり、周囲の文字列との関係を指定したりするのに、スタイルシートを使い、いずれも　CSS文書中にimgセレクタを記述します。その記述方法は、次の通りです。

img {プロパティ: 数値; }

まず、画像枠について、整理すると、

機能　　　　　　－　プロパティ　　－　数値

枠スタイル設定　－　border-style　－　none、solid、double、dotted等

枠幅設定　　　　－　border-width　－　px（ピクセル）で表示

枠の色設定　　　－　border-color　－　色番号または色名

これらを、画像上、下、左、右の枠個別に指定する事は可能で、この場合は、枠スタイルを例にとると、border-top-style、border-bottom-style、border-left-style、border-right-styleで、それぞれ指定します。

次に、画像と文字列の縦の位置関係は、プロパティが「vertical-align」、数値としては文字列の縦位置指示（top、middle、bottom）で記述します。

サンプル画面で、ここまでの記述方法を確認してみます。まず、CSS文書に次の記述を追加します。

img { border-top-style: solid; border-bottom-style: dotted;
border-left-style: double; border-right-style:groove;
border-width:10px; border-color: green; vertical-align: top; }

この結果のWeb画面は下の様になりました。

画面

　

●　画像と文字列の関係

ここでは画像と文字列との関係をスタイルシートで設定しますが、その前に、説明用にサンプルを改作します。ここまで画面に表示していた３つ画像の内一番大きい画像１つだけ残して、同時に「さ」行の文字列を長くします。具体的には、HTML文書中で、「<img src=”../pics/100428rome1.jpg” width=”50” alt=”準備中” >」と「<img src=”../pics/100429rome1.jpg” alt=”準備中”>」を削除し、「<p>さしす<span class=”loose”>せそたち</span>つてと</p>」の</p>の前に「まみむめもやいゆえよらりるれろん」を追記します。この結果、HTML文書の該当箇所は次の様になります。

<img src=”../pics/100428rome1.jpg” alt=”準備中” >
<p>H<sub>2</sub>Oは<em>水</em>です。</h2>
<p>あいうえおかきくけこ</p>
<p>さしす<span class=”loose”>せそたち</span>つてとまみむめもやいゆえよらりるれろん</p>
<p class=”background”>なにぬねのはひふへほ</p>
<p class=”word”>I am a gentleman.</p>
<h2 id=”link1”>次のセッション</h2>

次に、本文を中央揃えから右揃えに戻す為に、CSS文書中の「p {line-height: 200%; text-align: center; }」から「text-align: center;」を削除して、

p {line-height: 200%; }

と記述します。

ここまでの準備を終えて、この状態で画像の横位置関係を設定します。

画像の横位置設定は、プロパティが「float」、数値が「位置（left、right）」です。画像を左側に表示したい場合はleftを使い、右側に表示したい場合はrightを使います。今回のサンプルは、CSS文書に、

img { float: right; }

の記述を追加し、Web画面は下の様になりました。

画面

ここで、文字列を左側に回り込みさせましたが、この回り込みを解除して画像の下に持って来ます。同時に、画像の周囲の余白を設定したいと思います。

回り込み解除したい場合は、CSS文書中で、解除したい要素をセレクタに指定して、その位置にclearプロパティを、

セレクタ　{　clear: 数値; }

と記述します。ここで、「数値」は回り込んでいる位置の指定になり、例えばleftやrightになりますが、通常はbothで良いと思います。

又、画像周辺の余白はimg要素を使い、CSS文書中で、

img { margin: 数値; }

と記述します。ここで、数値は「画像回りの余白」になり、ピクセル（px）で表示します。又、特定の方向のみ余白を設定したい場合はプロパティmarginを、例えば右ならmargin-rightと記述し直し、他にもmargin-left、margin-top、margin-bottomとします。

今回は「なにぬねの」の文字列の前で回り込みを解除したいので、既に定義しているクラス名「.background 」を使い、CSS文書中で「.background { background-color:#ff9999; }」と記述されているものに「clear: both; 」と加えて、

.background { background-color:#ff9999; clear: both; }

と変更します。又、、画像周囲に20pxの余白が欲しいので、CSS文書中のimg要素の記述に、「margin: 20px; 」を追加し、

img { margin: 20px; border-top-style: solid; border-bottom-style: dotted; border-left-style: double; border-right-style:groove; border-width:10px; border-color: green; vertical-align: top; }

とします。これらの結果、Web画面は下の様になります。

画面

　

●　画面の背景に画像を使う

画面の背景に画像を貼る方法ですが、CSS文書中でbackground-imageプロパティを利用します。記述方法は、

セレクタ { background-image: url(ファイル名); background-repeat: 数値１;

　　　background-position: 数値２; }

となります。数値１は、repeat、non-repeat、repeat-x、repeat-yと言った繰り返し指定となり、数値２はtop、bottom、left、right　あるいは%、pxと言った位置指定となります。いくつか組み合わせサンプルを作って見ましょう。

CSS文書内記述とWeb画面を並べて説明します。

Web全画面に背景

body { background-image: url( ../pics/kabegami1.jpg); }

画面

　

見出しh1のみに背景

h1 { background-image: url( ../pics/kabegami1.jpg); }

画面

　

本文に縦並びに繰り返して背景

p { background-image: url( ../pics/kabegami1.jpg); background-repeat: repeat-y; }

画面

　

本文の上部にのみに背景

p { background-image: url( ../pics/kabegami1.jpg); background-repeat: no-repeat; background-position: top; }

画面

　

ちなみに、今回背景として使った水玉模様は、ウインドウズで準備されている「ペイント」で淡い色を適当に組み合わせて作ったもので、数分で出来ます。

●　リンクへのスタイルシート適用

リンクを行う為には、前に述べた様に、a要素のhref属性を利用します（→「リンクの設定」はこちらです）。この時に、画面デザイン上、リンクを示す文字列を修飾したり変更したい場合があります。このやり方として、CSS文書中でaセレクタに疑似セレクタを入力します。疑似セレクタの記述方法は「スタイルシートを使いましょう・文字列特定部分のみへのスタイルシートの適用」（→こちらです）で既に述べた様に、

セレクタ：疑似セレクタ　｛プロパティ：　数値；　｝

と書きます。今回使うリンクの為の疑似セレクタは、

リンク先に未訪問の場合に文字列の色をAにしたい時：a:link { color: A; }

リンク先に訪問済みの場合に文字列の色をBにしたい時：a:visited{ color: B; }

リンク先に訪問済みで開いている場合に文字列の色をCにしたい時：

　　　　　　　　　　　　　　　　　　　a:active{ color: C; }

リンクを示す文字列にマウスポインタを置いた時の色をDにしたい時：

　　　　　　　　　　　　　　　　　　　a:hover{ color: D; }

リンク先を示す文字列がキーボドから操作可能である事を示す時の色を

　　　　　　　　　　　　　　　　　　　Eにしたい時：a:visited { color: E; }

と記述します。colorだけではなく、background-color、text-decorationなどのプロパティも使用できます。

例として、サンプルで、マウスポインタを置いた時に「背景が紺色で文字が白抜きになり、アンダーラインが表示されない」様にします。CSS文書中に、

a:hover { color: white; background-color: navy; text-decoration: none; }

と記述した結果、マウスポインタを置いたWeb画面は下の様になりました。ちなみに旧の画面は右の図です。

画面

ところで、出来あがったホームページのできばえとして色の確認など、リンクの動作確認をしますが、この時に、既読／未読の履歴が残っていて邪魔になる時があります。この場合は、IE7では、コマンドバーから「セーフティ」→「閲覧履歴の削除」をクリックして下のダイアログを出し、「削除」をクリックすると、履歴が無い状態に戻ります。

画面

ページトップへ

前ページ←

→次ページ

コーナー