サイト内検索 　

第3章：スタイルシートで文章を読みやすくする

第2章、第3章とホームページ・ビルダー12を使いながら、基本的なHTML文書のマークアップも学んできましたが、素のままのHTML文書はどうしても読みづらいと感じませんか？

それは、行間が狭くて、左右の余白がないからです。そこで、スタイルシートの１つであるCSSを使用して、文章を読みやすくする方法を学びましょう。

CSSを使用するにあたっての基本的なルールも学ぶことになります。HTMLの基本がわかっているならば、そう難しくはないので、気合いを入れて学習して下さいね。

CSSのごく簡単な記述ルール

セレクタ {プロパティ:値;｝　という形で記述します。

セレクタというのは、スタイルを適用させる対象のことです。要素であったり、idであったり、classであったりします。

一つのセレクタに対して、複数のプロパティを適用する場合は、「プロパティ:値」を ; で区切ります。例えば、p要素に２文字分の行間と10%の左右の余白を設定する場合は、
p {line-height:2em; margin-left:10%; margin-right:10%;}
と設定します。

逆に複数のセレクタに対して、同じスタイルを適用したい場合は、セレクタを , で区切ります。
h1,h2{color : #ff0000; background-color:#ffffff;}
と設定します。

セレクタ同士を組み合わせることも可能です。あるセレクタの子孫となるセレクタに対して指定するということも可能です。この場合は、セレクタ間を半角スペースで区切ります。例えば、ul要素に含まれるmenuというクラスを持つli要素に対して、フォントサイズを85%にしたい場合は、
ul li.menu{font-size : 85%;}
と設定します。

HTMLへの組み込み方

CSSをHTMLに組み込む場合は、
<meta http-equiv="Content-Style-Type" content="text/css">
の記述が必要になります。

この記述、第1章で出てきましたね。ここで改めて説明をすると、HTMLに組み込めるスタイルシート言語はCSSだけではありません。そこで、使用するスタイルシート言語を特定する必要があるので、CSSを使うためにこのような記述が必要になります。

で、実際の組み込み方は、

  1. link要素で外部スタイルシートを組み込む
  2. style要素の中にスタイルシートを組み込む
  3. style属性の中にスタイルシートを組み込む

という方法があります。ホームページ・ビルダーの場合、いずれの方法も対応しています。今回の説明では２番の方法を中心に進めていきます。

link要素で外部スタイルシートを組み込むメリットは、１つのCSSファイルを複数の文書で共有できることにより、サイトのスタイルが統一しやすくなり、スタイルの変更も簡単に行えるからです。

一般的な考えとして、サイト全体のスタイルはlink要素で外部スタイルシートを組み込んだモノを使用し、ページ独自のスタイルはstyle要素で組み込みます。sytle属性の指定はワンポイント的に組み込む場合に行います。

スタイルシート適用の優先順位

スタイルシートが競合する場合

スタイルシートはWebページの制作者だけが設定できるモノではありません。閲覧者が設定することも出来ます（これをユーザースタイルシートといいます）し、ブラウザはデフォルトのスタイルシートを持っています。

これらのスタイルシートは当然、競合する可能性があります。そうなった場合の優先順位は以下のようになります。

  1. !important ありのユーザースタイルシート
  2. 制作者のスタイルシート
  3. !important なしのユーザースタイルシート
  4. ブラウザがもつデフォルトのスタイルシート

同じセレクタへの指定が重なった場合

以下の順番で、スタイル指定が優先されます。

  1. style属性で指定したスタイル
  2. style要素で指定したスタイル
  3. 外部スタイルシートで指定したスタイル

同一順位内では、より後で指定されたスタイルが有効になります。

また、より細かい指定をしているスタイルが優先されます。優先度は、以下の順番になります。

  1. idに対して指定してあるスタイル
  2. classに対して指定してあるスタイル
  3. 要素だけに指定してあるスタイル

これをもう少し説明すると、

という換算で、セレクタに対する優先度を調べることができます。点数の大きい方が優先されます。これは、セレクタ同士を組み合わせたときには非常に重要になりますので覚えておくといいでしょう。

例えば、div#headerとdiv.headerだと、前者は1+100=101点、後者は1+10=11点です。

#mainmenu ul li.menu とdiv#.mainmenu ul li.menuとli.menuだと、最初は100+1+1+10=112点、後者は1+100+1+1+10=113点となり、後者の指定が優先されます。

ボックスの概念

CSSでは各要素がボックスと呼ばれる四角い領域を生成されます。この領域は、以下の４つの部分から成り立っています。
ボックスの概念図

内容領域
要素の内容が表示される領域です。この領域の幅と高さは、widthプロパティとheightプロパティで指定します。
マージン
ボーダーの外側の余白です。要素に指定された背景はこの部分には表示されず、常に透明になります。marginプロパティで指定します。
ボーダー
要素の周りに表示させることの出来る枠の部分です。borderプロパティ（border- プロパティ含む）で指定します。
パディング
ボーダーの内側の余白です。要素に指定された背景はこの部分に表示されます。

CSSで使用できる単位

CSSで使用できる単位には絶対単位と相対単位があります。

絶対単位
物理サイズを直接示す単位です。pt、in、cm、mm、pcが該当します。
相対単位
基準となる大きさとの比率で示す単位です。px、em、ex、%が該当します。
px
１ピクセルを１とする単位。コンピュータのディスプレイを対象とする単位で、実際に表示される大きさは、解像度によって異なります。
pt
ポイントのこと。1pt=1/72inch。
in
インチのこと。1inchは約2.54cm。
cm
センチメートル。
mm
ミリメートル。
pc
パイカのこと。1pc=12pt。
em
フォントサイズそのものを１とする単位。
ex
アルファベットの小文字の「ｘ」の高さに相当する部分の高さを１とする単位。
%
パーセント。他の要素に対する割合で示します。
ホームページ・ビルダーでの指定と実際に指定される単位
ホームページ・ビルダーでの指定 指定される単位
ピクセル px
ポイント pt
インチ in
cm cm
mm mm
パイカ pc
文字の高さ em
"x"の高さ ex
パーセント %
ポイント

pxは相対単位ですが、画面解像度を基準にしますので、閲覧者の環境に依存します。Windowsの場合、デフォルトの解像度は96dpiですので、12pt=16pxです。Macの場合、古いブラウザでは72dpiですが、新しいブラウザでは96dpiです。

画面解像度が大きければ文字は相対的に小さくなりますし、画面サイズが小さければ文字は相対的に大きくなります。

行間を広げる

お待たせしました。いよいよ、実際にスタイルシートを作る作業に入ります。

では、第1章で作成した、text1.htmを使用して、実際に行間を広げる作業をしてみましょう。この部分の作業はページ編集画面上で行ってみるとします。

行間を広げるためのプロパティはline-heightです。

p要素の行間を広げる

任意のp要素を選択して、属性の変更画面を出します。

p要素の属性画面を出すと以下のような画面になります。


図1：p要素の属性画面

スタイルボタンをクリックします。すると、図2のような画面が出てきます。

ここでは、p要素に対してスタイルを設定したいので、HTMLタグにスタイルを設定の部分の編集ボタンをクリックします。図2のような画面が出てきます。


図2：スタイルの設定画面

この画面では、現在選択されているp要素に対するスタイルを指定します。この画面で直接指定すると、p要素のstyle属性として、スタイルが書き出されます。

図2の画面で、「スタイルシートマネージャーで編集」ボタンをクリックします。


図3：スタイルシートマネージャー起動直後の画面

HTMLファイルが選択されている状態で、「追加」ボタンをクリックします。


図4：スタイルシートマネージャーでのスタイル設定画面

「文字のレイアウト」タブをクリックします。そこで、行間の部分に値を入力することになります。


図5：スタイルの設定画面（文字のレイアウト）

入力するのは、左側に数字、右側に単位です。ここでは、1.5倍の行間がほしいので、右側は「倍」を選択し、左側に「1.5」を入力します。先に単位を選択してから数値を入れる必要があります。
入力できたら、OKボタンをクリックして、スタイルの編集を確定します。

HTMLソースではどうなったかと言うと、head要素の子要素として、style要素が記述されています。head要素の内容を示します。

<head>
（中略）
<style type="text/css">
<!--
P{
line-height : 1.5;
}
-->
</style>
</head>
<style type="text/css">
スタイルシートを使用することを宣言してます。閉じタグは</style>ですね。
<!--　　　-->
HTMLでのコメントアウトです。この間に書かれた文字列は表示されません。style要素内で使用するのは、CSSを理解しないブラウザで、style要素の内容がそのまま表示されることを防ぐためです。
P{ line-height : 1.5; }
ソースでは３行に分けて書かれていますが、別に１行で記述してもかまいません。ここでは、p要素に対して、行間を1.5倍にすると指定しています。
ポイント

図2の編集画面は、すべての要素に対して出てきますよ。

クラスやIDに対して指定すると、現在選択されているタグにクラスやIDで設定されたスタイルを指定することが出来ます。現在のタグにのみ指定すると、指定した部分のみにスタイルが指定されます。この場合は、style属性でスタイルシートを使用することになります。

それと、ホームページ・ビルダーの場合、HTMLソースを小文字にする指定をしていても、スタイルシートにおける要素セレクタの記述が大文字になってしまいます。気になるのなら書き換えて下さい。

関連事項

左右に余白をつけてみる

同じく、p要素に余白をつけてみましょう。行間を広げるときと同様、p要素の属性画面を出して、スタイルの編集画面を出します。スタイルの設定画面で、今度は、「レイアウト」タブをクリックします。


図6：スタイルの設定画面（レイアウト）

まず、どの方向に対して設定するかを選択します。選べるのは、「４方向とも同じ値」「上方向」「下方向」「左方向」「右方向」となります。

ここでは、左右に10%ずつの余白を取りたいのですが、方向選択には左右同時に設定するオプションはありません。ですので、左方向、右方向別々に設定をします。

左方向を選択したら、マージンの部分に値と単位を入力します。入力方法は行間を選択するときと同じ方法です。単位を選択→数値を入力です。

左方向への余白を設定すると、スタイルシートの記述が以下のように変わります。

P{
line-height : 1.5;
margin-left : 10%;
}

右方向も同じように設定すると、

P{ 
line-height : 1.5; 
margin-left : 10%; 
margin-right : 10%; 
}

となります。

ポイント

マージンで指定できるのは、数値＋単位以外にも、自動(auto)という値が指定できます。マージンをautoにする場合は、内容領域の幅や高さを指定します。

内容領域の幅や高さの指定は、「位置」タブの「幅」と「高さ」で指定します。幅も高さも数値＋単位で指定します。

CSSでの指定は、幅が width : 指定した値、高さが height : 指定した値 となります。

ここまでの状態を見てみる

ブロック化してみよう

ｐ要素にだけスタイルシートを適用しているので、見映え的にはややアンバランスになっています。リスト部分が元の位置のままにありますから、p要素との位置関係を考えるとバランスが悪いです。

この状態を解消するために、li要素にスタイルシートを適用するという考えもありますが、今後、見出し以下の文章を本文として扱うのであれば、まとめてしまったほうが良いでしょう。

そこで、登場するのが汎用ブロック要素であるdiv要素です。div要素自体は見映えに何らかの影響を及ぼすことはありません。クラスやID付けをして、CSSと組み合わせることで、意味を持ったまとまりとして見映えに影響を及ぼすことが可能となります。

この作業は、レイアウト画面で行うよりもHTMLソース編集画面で行った方が手っ取り早くできます。
見出し以下の文章をhonbunというクラスで一括してまとめてしまいましょう。body要素の内容だけソースを示します。

<body> 
<h1>斬・Webオーサリングソフト</h1> 
<div class="honbun">
<p>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。 
私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでも 
ないモノが多いということで、使用すること自体がまずいとか言われてきたものです。</p> 
<p>しかし、性能も向上したことですし、<em>インストール後のデフォルト状態でどれだけ 
まともなソースを吐き出すかを検証</em>してみましょう。</p> 
</div>
<h2>検証対象となったソフト</h2> 
<div class="honbun">
<p>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。 
Windows環境で動作する無料ソフトです。</p> 
<ul> 
<li>FrontPageExpress 
<li>Netscape Composer(Netscape4.78付属) 
<li>Netscape Composer(Netscape7.01付属） 
</ul> 
</div>
<address>文責：お名前(メールアドレス)</address> 
</body>

body要素を基点とした各要素の親子関係は以下のように変化します。

body要素の子要素であったh1,h2,p,ul,address要素がdiv要素の子要素に変わった。body要素の子要素はdiv要素となった。

ポイント

ページ編集画面でdiv要素を挿入するためには、挿入したい部分をドラッグで選択し、その後、メニュー→挿入→その他→レイアウト コンテナ（DIV）を選択します。ドラッグしたときに、ソース編集画面で先頭部分のタグや最終部分のタグが含まれていることを確認して下さい。

div要素のhonbunクラスでまとめた部分に対して、スタイルシートを適用することにします。HTMLソース編集画面でp要素に対する指定を消して下さい。

そして、スタイルシートマネージャーを起動します。起動するためには、スタイルシートマネージャー起動ボタンをクリックします。


図7：スタイルシートマネージャーを起動した直後の画面

これは、p要素の属性の変更画面から「スタイル」→「スタイルシートマネージャーで編集」としたときと同じ画面です。

追加ボタンをクリックすると、以下のような画面が出てきます。


図8：スタイルシートマネージャーでのスタイル追加画面

HTMLタグ名のところは、タグ、クラス、IDを入力することが可能です。要素については、HTMLタグの候補の部分でプルダウンで選択することも可能です。

この画面では、指定する対象を選択後、それぞれのスタイルを編集する形になります。

  1. HTMLタグ名にdiv.honbunと入力します。
  2. 「文字のレイアウト」タブで、行間を指定します。
  3. 「レイアウト」タブで、左右の余白を指定します。
  4. 「OK」ボタンをクリックします。

後の指定は、これまでと同様の指定になります。

CSS部分のソースは、

.honbun{
  line-height : 1.5; 
  margin-left : 10%; 
  margin-right : 10%; 
}

となります。honbunというクラス名が付いている要素に対して適用されるスタイルです。このままですと、p要素にhonbunというクラスを適用しても同じことになります。

これを、div要素でhonbunというクラス名が付いている部分だけに適用するには、
要素名．クラス名の形でセレクタを指定します。これは、ソース編集画面で行って下さい。

div.honbun{
line-height : 1.5; 
margin-left : 10%; 
margin-right : 10%; 
}

ポイント

汎用ブロック要素があるならば、汎用インライン要素も存在します。

それは、span要素です。HTMLで定義されている他のインライン要素では適切にマークアップできない場合、class属性やid属性と併用して、文書構造を示します。

メニューの書式→文字装飾→フォントスタイルの設定（SPAN）で行います。

ポイント

IDに対してCSSでスタイルを指定するには、#ID名という書式になります。

特定のID名を持つ要素に適用する場合は、要素名#ID名とします。

link要素で外部スタイルシートを読み込む

スタイルシートマネージャーを起動後、「外部スタイルシートの追加」ボタンをクリックします。

外部スタイルシートの新規作成画面が出てきますので、参照ボタンで外部スタイルシートを置きたいフォルダを選択後、外部スタイルシート名を入力します（例：style.css）。
挿入のタイプはリンクのままでいいです。
OKボタンをクリックすると、図７の画面が出てきますので、style要素を使うときと同じように指定します。
なお、すでにサイトを作成しており、サイトを開いている場合は、サイト設定のスタイルシートで指定されているフォルダに作成されます。

外部スタイルシート名の拡張子は.cssです。他の拡張子では動作しませんので気をつけて下さい。

外部スタイルシートを追加すると、HTMLソースが以下のように変化します。head要素の内容だけ示します。

<head>
（中略）
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
<!--
div.honbun{
line-height : 1.5; 
margin-left : 10%; 
margin-right : 10%; 
}
-->
</style>
</head>

link要素が追加されましたね。今回は、style要素と同じ内容を指定していますので、style要素を消してください。

では、link要素の各属性について説明をします。

rel属性
リンクタイプを指定します。ここでは、スタイルシートを指定したいので、rel属性の値にstylesheetが入ります。
href属性
関連する別文書のURLを指定します。ここでは、スタイルシートのファイルを指定します。URLは相対指定でも絶対指定でもかまいません。例の場合、文書が存在するフォルダと同じフォルダに存在するstyle.cssを指定しています。
type属性
ここでは、スタイルシートのMINEタイプを指定します。CSSの場合は、text/cssです。

しかし、実際にスタイルシートを活用するためには、これだけでは役不足です。出力の対象として想定しているメディアを示してません。
身近なところでいえば、PCのディスプレイ、プリンターでの印刷、携帯電話の液晶画面。それぞれに適した表示というのがあるはずです。
したがって、出力の対象として想定しているメディアを示す必要があります。

それでは、手打ちで出力の対象として想定しているメディアを示してみましょう。ここでは、出力の対象として想定するメディアは、パソコンのディスプレイとします。示し方は、media="想定メディア"です。

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

HTML4.01では、以下のようなメディアが出力の対象として想定されています。

all
すべてのメディア
screen
一般のコンピュータの画面
tty
文字幅が固定の機器
tv
テレビ
projection
プロジェクタ。Operaのフルスクリーンモードも該当します。
handheld
携帯用端末（携帯電話、PDAなど）
print
プリンター
braille
点字で出力を行うモノ
aural
音声による出力

１つのHTML文書に複数の外部スタイルシートを適用することも可能です。ディスプレイ表示用にstyle.cssを、プリンターでの印刷用にprint.cssを適用する場合は以下のようになります。

<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

なお、media属性はstyle要素に対しても指定することが可能です。

関連事項

この章で作成したHTML文書は以下の通りになります。今回は、外部スタイルシート使用の有無別に示します。

外部スタイルシートを使っていない文書

外部スタイルシートを用いた文書

第2章　リンクを貼る　に戻るホームへ戻る第4章：スタイルシートで彩りをそえる　へ進む

©Copyright 2003-2008 FUMING　fuming@neko.chan.ne.jp

リンクに関してはご自由にどうぞ。