第4章：スタイルシートで彩りをそえてみる

ホームページ・ビルダーの売りの一つに、「ワープロ感覚で作る」というのがありますが、誰しもが利用しやすいWebページを作成するためには、ワープロ感覚でというわけにはいかない部分もあるのです。

ワープロソフトで文書を作る場合、文字の大きさを変えたり、太字にしたり、文字に色を付けたりという作業はすべてツールバーからかんたんに行うことが出来ますね。

文字の大きさ、書体、色を変えたりするのはどうしてなのでしょうか？それは、変えたいと思う部分に何らかの意味づけをしたいからです。見出しであることを示したい、強調していることを示したいなどといったことをしたいからです。

ワープロ文書という紙に打ち出され、人の目だけで確認するのを前提とした文書であれば、文字が大きかったり、太字であれば、そこには何らかの意味づけがあると思うでしょう。

さて、ホームページ・ビルダーで、ワープロ文書を作成するのと同じようにツールバーを使って文字の大きさを変えたり、太字にしたり、カラーパレットで文字の色を変えたりしたとします。

ツールバーを使って文字の大きさ、書体を変更した文書

実は、この方法で吐き出されたHTML文書には、何の意味づけもされていません。物理的に太字にした、文字の大きさや色を変えたということだけしかわからないのです。文書構造は何も記されていないのと同然で、これでは、HTML文書の本来の役割とはほど遠い文書になってしまいます。

第１章でHTMLは文書構造をマークするアップするための言語だと言いました。ですので、HTMLで見映えまでを決めてしまうのはおかしな話です。見映えに関する部分はスタイルシートに任せましょう。

背景色と文字色の指定は、「カラーと背景」タブを使用します。

前景色とは文字色のことです。

色は16色およびユーザー定義の色が使用できます。ユーザー定義の色を使用するためには、ユーザー定義を選択すると、色の選択画面が出ます。その中に希望の色がなければ、その他ボタンをクリックして、色の設定画面を出します。

色の選択画面

色の設定画面（詳細）

例えば、文字色を黒(#000000)、背景色を白(#ffffff)にした場合は、
color : #000000; background-color : #ffffff;　となります。

前景色だけを指定した場合は、手打ちでbackground-color : transparent;　を入れたほうがベターです。これは、ユーザースタイルシートを使われた場合に、背景色とのかねあいで読みづらくなってしまうのを防ぐためです。

文字色や背景色を指定するのと同様、「カラーと背景」タブからです。背景画像の場合、背景画像にしたいファイルを選択します。

背景画像を指定した場合は、画像が読み込まれなかった場合に備えて、背景色を指定しておきましょう。このときの背景色は、なるべく背景画像で使われている色に近いものにします。

HTMLではbody要素に対してしか指定できない上、タイル状にしか敷き詰めることしかできませんが、CSSでは、すべての要素に対して指定できる上に敷き詰め方を変えることが可能です。

繰り返し

特に指定のない場合は、「繰り返し」として扱われます。

繰り返し

背景画像をタイル状に敷き詰めます。
CSSでの指定は、background-repeat : repeat;

繰り返す（水平方向）

背景画像を左右方向に繰り返します。
CSSでの指定は、background-repeat : repeat-x;

繰り返す（垂直方向）

背景画像を上下方向に繰り返します。
CSSでの指定は、background-repeat : repeat-y;

繰り返さない

背景画像を１つだけ表示します。
CSSでの指定は、background-repeat : no-repeat;

貼り込み方

特に指定がなければ、「スクロール」として扱われます。

スクロール

ページのスクロールにあわせて背景画像も移動します。
CSSでの指定は、background-attachment : scroll;

固定

ページがスクロールしても背景画像の表示位置は変化しません。
CSSでの指定は、background-attachement : fixed;

「水平方向」と「垂直方向」で指定します。予約語（キーワード）による指定と数値指定による指定が行えますが、両者を併用することは出来ません。

表示位置の起点はパディング領域の左上です。

背景の位置指定が出来る要素は、ブロックレベル要素と置き換え要素です。

水平方向の指定

予約語

左・中央・右が指定できます。値は順に、left、center、rightとなります。leftは0%、centerは50%、rightは100%と同じ意味になります。

数値＋単位

数値と単位を組み合わせます。単位にパーセント以外を使用するときは、負の値も指定可能です。単位選択→数値入力の順で指定して下さい。

垂直方向の指定

予約語

上・中央・下が指定できます。値は順に、top、center、bottomとなります。topは0%、centerは50%、bottomは100%となります。

数値＋単位

水平方向の指定と同様です。

CSSでの指定は、background-position : 水平方向の指定 垂直方向の指定　です。

例えば、水平方向を右、垂直方向を下と指定した場合は、background-position : right bottom;　となります。

文字の大きさを変更するのは、「フォント」タブから行います。

「サイズ」の部分で、予約語（キーワード）もしくは数値＋単位で指定を行います。数値＋単位の場合は、単位指定→数値入力の順で行って下さい。
CSSでの指定は、font-size : 指定した値　です。

予約語

極めて小さい、小さい、やや小さい、標準、やや大きい、大きい、極めて大きい、より大きい、より小さいが指定できます。
極めて小さい〜極めて大きい までの７段階で指定できます。約1.2倍ずつ大きくなっていきます。
より大きい と より小さい は親要素の大きさに対してそれぞれ１段階大きな文字、１段階小さな文字を指定します。

CSSで指定される値は以下の通りです。

極めて小さい

xx-small

小さい

x-small

やや小さい

small

標準

medium

やや大きい

large

大きい

x-large

極めて大きい

xx-large

より大きい

larger

より小さい

smaller

実は、ブラウザによるフォントサイズの違いが存在します。

Windowsの場合、Netscape4.xとそれ以外のブラウザではデフォルトのフォントサイズが異なります。Netscape4.xは9ptがデフォルトになっていますが、それ以外のブラウザでは12ptです。

また、キーワードによる指定を行う場合、Netscape4.x、InternetExplorer5.5以下および6,7の互換モード、Opera6.xではsmallがデフォルトに指定されています。Gecko系、Opera7.x以上、InternetExplorer6の標準モードはmediumがデフォルトに指定されています。
したがって、キーワードによる指定を行うと、ブラウザによる見映えの差が出てしまいます。

数値＋単位

数値には負の値は指定できません。

文章を読ませたい場合、フォントサイズに指定する単位にはパーセントや文字の高さ(em)を指定しましょう。pxやptなどで指定をしてしまうと、InternetExplorerの場合、ブラウザが持つ文字サイズ変更の機能が使えなくなってしまい、読みづらい原因になってしまいます。

また、メニュー部分などでpxやptによる指定を行う場合でも、極端に小さくするのはダメです。日本語は特に画数が多いので、文字がつぶれてしまう原因にもなります。どこに何があるのかわからないようなメニューは役立たずです。

文字の大きさを変更するときと同じく、「フォント」タブから行います。

「文字の属性」の「太さ」部分で指定します。CSSでは、font-weight : 指定した値 となります。

指定できる値は以下の通りです。ふつう(normal）、太い（bold）、より細い（lighter）、より太い（bolder）、100〜900です。数値で指定した場合、400=normal、700=bold となります。

一般的なフォントファミリーには、9種類も文字の太さが異なるフォントが用意されていないことがほとんどなので、異なる数値を指定しても、太さが変わらない場合があります。

「文字の属性」の「スタイル」部分で指定します。日本語フォントでは、italicとobliqueの区別はつきませんが、英字フォントでは区別されます。

ふつう

標準のフォントです。CSSでの指定は、font-style : normal;

斜体

イタリック体のフォントを指定します。イタリック体は、単なる斜体文字ではなく、文字がつながる感じになるになるなどのイタリック体専用のデザインが施された書体です。イタリック体のフォントがなければ、obliqueや標準書体を斜めにしたモノが利用されます。CSSでの指定は、font-sytle : italic;

斜体（OBLIQUE）

斜体のフォントを指定します。ここでいう斜体は、比較的シンプルに文字を傾けた感じにデザインされた書体のことです。この種類のフォントがなければ、標準書体を斜めにしたモノが利用されます。CSSでの指定は、font-style : oblique;

「文字飾り」の部分で指定します。適用させたい飾りにチェックを入れます。

なし

文字に線もなく点滅もしない状態にします。CSSでの指定は、text-decoration : none;

下線

文字に下線を引きます。CSSでの指定は、text-decoration : underline;

上線

文字に上線を引きます。CSSでの指定は、text-decoration : overline;

取消線

文字に取消線を引きます。CSSでの指定は、text-decoration : line-through;

点滅

文字を点滅させます。CSSでの指定は、text-decoration : blink;

「フォントの候補」から選択して、「使用するフォント」部分に追加します。「フォントの候補」で表示されるのは、、現在インストールされているフォントと、キーワードです。

複数指定も可能です。その場合、訪問者の環境で使用できる種類で、より先に指定されているモノが採用されます。

CSSでの指定は、font-family : 指定した値; となります。

使えるキーワードは以下の通りです。

serif

明朝系のフォントです。

sans-serif

ゴシック系のフォントです。

cursive

筆記体・草書体のフォントです。

fantasy

装飾的なフォントです。

monospace

等幅のフォントです。

訪問者の環境によって、インストールされているフォントは大きく異なります。Windowsで標準的にインストールされているＭＳ Ｐ明朝やＭＳ ＰゴシックなどのフォントはMacにはありません。

指定したフォントがなければ、ブラウザデフォルトのフォントで表示されてしまいます。ですので、個別のフォントを指定した場合は、キーワード指定もしておきましょう。

文字揃えを変更するのは、「文字のレイアウト」タブから行います。前章で行間を変更したときと同じタブです。

「水平方向の配置」で指定します。左から順に、指定なし、左揃え、中央揃え、右揃え、両端揃えです。

CSSでの指定は以下の通りになります。

指定なし

とくに指定しません。日本語版のブラウザの場合、左揃えとなります。

左揃え

text-align : left;

中央揃え

text-align : center;

右揃え

text-align : right;

中央揃え

text-align : justify;

「垂直方向の配置」で指定します。指定できる値は、予約語（キーワード）と数値＋パーセントです。

縦方向の位置を変更できる要素は、インライン要素とth,td要素だけです。th,td要素に対して指定した場合は、インライン要素に指定した場合と解釈が変わったり、無効になる場合があります。

予約語

ベースライン、下付き、上付き、上、テキストの上、中央、下、テキストの下が指定可能です。

インライン要素に指定した場合の解釈を先に示します。インライン要素に指定した場合は、その要素が表示される行の中での縦方向の表示位置を設定します。

ベースライン

指定された要素のボックスのベースラインと、親ボックスのベースラインを揃えます。指定された要素にベースラインが内場合は、ボックスの下の位置を揃えます。
CSSでの指定は、vertical-align : baseline;

下付き

指定されたボックスのベースラインと、親ボックスでの下付き文字として適切な位置を揃えます。ただし、文字サイズはそのままですので、文字サイズは適宜変更する必要があります。
CSSでの指定は、vertical-align : sub;

上付き

指定されたボックスのベースラインと、親ボックスでの上付き文字として適切な位置を揃えます。ただし、文字サイズはそのままですので、文字サイズは適宜変更する必要があります。
CSSでの指定は、vertical-align : super;

上

ボックスの上をそれが含まれる行全体の上に揃えます。
CSSでの指定は、vertical-align : top;

テキストの上

ボックスの上を親要素の内容であるテキストの上に揃えます。
CSSでの指定は、vertical-align : text-top;

中央

ボックスの縦の中心を親要素の内容であるテキストの中央に揃えます。
CSSでの指定は、vertical-align : middle;

下

ボックスの下をそれが含まれる行全体の下に揃えます。
CSSでの指定は、vertical-align : bottom;

テキストの下

ボックスの上を親要素の内容であるテキストの下に揃えます。
CSSでの指定は、vertical-align : text-bottom;

td,th要素に指定した場合の解釈は以下のようになります。

ベースライン

横列全体の各セルの最初の行のベースラインが揃えられます。

上

セルのボックスの上と横列全体での上を揃えます。

中央

セルのボックスの中心と横列全体での中心を揃えます。

下

セルのボックスの下と横列全体での下を揃えます。

数値＋パーセントで指定した場合は、親ボックスのベースラインがそろった状態を0として、そこからどれだけ移動させるかを、line-heightプロパティの値に対する割合で指定します。正の値は上方向、負の値は下方向への距離になります。

リンクに関しての設定変更は、「スタイルの設定」画面の「HTMLタグのスタイルの設定」で選択して行います。色を変更したり、背景色を設定したり、下線を消してみたりなどが可能となります。

設定する順序は以下の順番で行います。

未表示のリンク

A:LINK

表示したリンク

A:VISITED

マウスが上にあるリンク

A:HOVER

選択されてアクティブなリンク

A:ACTIVE

いろいろとスタイルを変更することが可能ですが、リンクがリンクとして認識してもらえないなんてことがないように気をつけて下さい。

枠を出すのは「レイアウトタブ」を使用します。「ボーダー」部分で指定します。前章で余白を指定したときと同じタブです。

幅の部分は、予約語（キーワード）か数値＋単位を指定します。キーワードとして指定できるのは、薄い(thin)、標準(medium)、厚い(thick)です。

スタイルは以下の９種類が使用可能です。

CSSの書き出しは、以下のようになります。ここでは、実線、線の太さ1px、色は黒(#000000)を指定しています。

border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-color : #000000 #000000 #000000 #000000;

ここでは、ボーダーの太さ、スタイル、色について、それぞれに一括指定しています。一括指定をするときは、指定した値の数によって、どの部分に適用されるかが変化します。値を複数指定する場合は、それぞれの値をスペースで区切ります。

CSSでは、ボーダー関連のスタイルをさらに一括指定（ショートハンドプロパティと言います）することが出来ます。この方法は、スタイルシートマネージャからは行えませんので、手打ちしてください。
border: 1px solid #000000;

ただし、上下左右バラバラの指定は出来ません。

border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #000000;

bottomの部分は、上方向の場合：top、左方向の場合：left、右方向の場合：right　となります。

CSSでは、１方向に対してボーダーの太さ・スタイル・色を一括指定することが出来ます。この方法は、スタイルシートマネージャからは行えませんので、手打ちしてください。
border-bottom : 1px solid #000000;

なお、１方向を指定するショートハンドプロパティは、太さを除き、Netscape4.xには対応していませんので気をつけて下さい。

パディングの指定は、マージンや枠の指定同様、「レイアウト」タブからです。「パディング」の部分に数値と単位を入れます。

CSSでの指定は、padding : 指定した値; です。値の指定方法は、余白と同じ方法になります。

「リスト」タブから指定を行います。

「リストマークのタイプ」で指定します。

１列目：左から順に、指定なし、黒丸、白丸、四角、数字

２列目：左から順に、ローマ数字（小文字）、ローマ数字（大文字）、アルファベット（小文字）、アルファベット（大文字）、なし

ul要素とその子要素であるli要素に対しては、黒丸、白丸、四角、なしを使います。ol要素とその子要素であるli要素に対しては、数字、ローマ数字、アルファベットを使用します。

CSSでの指定は以下の通りになります。指定なしはCSSでの指定は行いません。ul要素,ol要素のデフォルト状態での表示になります。

黒丸

list-style-type : disc;

白丸

list-style-type : circle;

四角

list-sytle-type : square;

数字

list-style-type : decimal;

ローマ数字（小文字）

list-style-type : lower-roman;

ローマ数字（大文字）

list-style-type : upper-roman;

アルファベット（小文字）

list-style-type : lower-alpha;

アルファベット（大文字）

list-style-type : upper-alpha;

なし

list-style-type : none;

ホームページ・ビルダーで指定できるのは、上であげた9種類ですが、手打ちをすれば、ギリシャ文字（小文字）、ひらがな、カタカナ、漢数字をリストマーカーとして使用することが出来ます（注：CSS2.0準拠の場合）。ただし、対応しているブラウザは限定されます。

「リストマークの画像」部分に使用する画像へのURLを入力します。
CSSでの指定は、list-style-image : 指定した値 です。

値として利用できるのは、URLとnoneです。noneを指定すると、リストマークの画像は表示しません。

「リストマークの位置」部分で指定します。左から順に、指定なし、アウトサイド、インサイドです。指定なしの場合は、アウトサイドと同じになります。

アウトサイド

リスト項目の外側にリストマークを表示させます。

インサイド

リスト項目のボックスの内側にリストマークを表示させます。

この章で学んだことを組み合わせて作成されたページを見てみる

今回は、style要素内に記述していますので、どのような指定をしたかはソースを見て確認してみて下さい。