CSSの紹介(導入)

トップページプログラミング技術等

HTMLには例えば、font要素(文字のフォントを作る要素)等のデザインを指定する要素も存在する。
しかし、現在では要素はあくまでコンテンツの種類を表すものと捉え、デザインは各要素のstyle属性等により記述する事が推奨されている。
コンテンツ(内容)とそのデザインは切り分けて考えた方が整理しやすく、デザインを一新する事も簡単になる。
デザイン記述のための言語がCSS(カスケード・スタイルシート)である。

セレクタ・属性・値

CSSでは、或る「要素」(セレクタ)の或る「属性」を或る「値」にする指定を書くことになる。例えば、div要素の横幅を親要素(ここではbody要素)の20%にする場合、セレクタはdiv、属性は横幅(width)、値は20%になる。一つの要素(セレクタ)に対し、複数の属性-値の組を割当てる事も出来る。

<html><head><style type="text/css">
div {
  width:20%;height:15%;border:solid blue;text-align:center;
}
</style></head><body><div>あいうえお</div></body></html>

セレクタの後の{ }内に、属性と値の組を記述する。属性と値の間に:を入れ、一つの組の後に;を入れ、何組でも続けられる。heightは縦幅、borderは枠線で値を二つ取っている(solidは実線、blueは青を示す値)。text-alignは含まれる文字列の横位置を示す属性で、値centerは真ん中を示す。

このサンプルコードの画面

上記コードのwidthの20%を30%、heightの15%を10%、borderの色をred、text-alignをrightとすると以下のようになる。

上記修正後のコードの画面

上記の様にdivのスタイルを設定すると、このhtmlに含まれる全てのdiv要素に同じスタイルが適用される。或るdivと別のdivを違うスタイルにしたい場合は、class属性又はid属性を使用する。

CSSの3種類の書き方

上記の例では、head要素の中にstyle要素を置き(type属性でtext/cssを指定する)、その中でCSSコードを記述しているが、要素の中にstyle属性で書く方法、別ファイルに纏める方法等もある。
以下はdiv要素の中にstyle属性を置き、CSSを指定した例となる。このdiv要素だけに特に指定したいスタイル等を書く。

<html><head></head><body>
<div style="width:20%;height:15%;border:solid blue;text-align:center;">
あいうえお
</div></body></html>

このサンプルコードの画面

別ファイルにCSSを書く場合は、そのファイル名(任意の名前)の拡張子は、.cssとなる。
スタイルが適用されるhtml側では、head要素内にlink要素を置き、href属性で.cssのファイル名を指定する。
rel属性はスタイルシートを読み込む事、type属性はそれがCSSである事(CSS以外のスタイルシートもある)を示す。
別ファイルに設定されたスタイルは、head要素で指定した場合と同じく、html内の同一の要素全てに適用される。
複数のhtmlで同じ.cssを読み込めば、デザインの統一が出来る。
これら3種類のスタイル指定が食い違う場合はsytle属性(最優先)、head要素、外部ファイルの優先順位で適用される。

<html><head>
<link rel="stylesheet" href="div_style.css" type="text/css">
</head><body><div>あいうえお</div></body></html>

(div_style.css)
div {width:20%;height:15%;border:solid blue;text-align:center;}

このサンプルコード(div_style.cssではない方)の画面

class属性とid属性

或るグループに共通するスタイルをclassとして、固有のスタイルをidとして定義出来る。
書き方は、セレクタの定義と同様で、セレクタの位置にclass名、id名を記述する(ここではclassname、idnameとしたが、半角英数の任意の名前でよい)。
クラス名の前に.(ピリオド)、id名の前に#を付けなければならない。
共通するスタイルはclassで纏めた方が、いちいち書かなくて済むので簡単になる。
classとidの違いは、classは同一html内で何度も使えるが、idは一回しか使えない。
div要素にスタイルが指定されていて、さらにdiv要素でclass属性、id属性等で其々のクラスやidの名前を指定すると、そこで定義されたスタイルも追加される。
ここではclassname、idnameで指定された横幅は、divのスタイルとは食い違っている。食い違う場合は、class属性、id属性の定義の方が優先される。

<html><head>
<style type="text/css">
body {margin:0}
div {width:300px;height:30px;}
#idname {width:100px;height:60px;float:left;}
.classname1 {width:200px;height:60px;float:left;}
.classname2 {width:200px;height:30px;}
.classname3 {clear:left}
</style>
</head><body>
<div style="border:solid blue;">あいうえお</div>
<div style="border:solid red;">かきくけこ</div>
<div style="border:solid green;" id="idname">さしすせそ</div>
<div style="border:0" class="classname1">
<div style="border:solid yellow;" class="classname2">たちつてと</div>
<div style="border:solid pink;" class="classname2">なにぬねの</div>
</div>
<div style="border:solid black;" class="classname3">はひふへほ</div>
</body></html>

このサンプルコードの画面

HTML要素の階層とスタイルの承継

HTMLの各要素は箱の中に箱を入れるような入れ子構造を取るが、外側の箱を親要素、その一つ内側の箱を子要素と呼ぶ場合もある。子要素がさらに子要素を持つ場合も多い。
head要素とbody要素は謂わば兄弟姉妹で、同じ親要素であるhtmlの一つ内側に並ぶ形で配置される。
図は主要な要素の親子関係を階層的に表示したもので、赤枠はブロックレベル要素、それ以外はインライン要素である。
meta要素は画面外のhead要素の子要素で、要約、キーワード等のページに関する説明情報を記述する(主に検索ロボットに読ませる目的)。
div要素とspan要素は汎用要素とも呼ばれ、それ自体が何かを表示するというより、要素のグループを作る等の働きをする。
親要素に指定されたデザイン(スタイル)は原則、子要素に承継される(同じデザインが子要素にも適用される。承継されない種類のスタイルもある)。
スタイルが長さであれば、絶対指定(ピクセル値等)はそのままの値が継承される。相対指定(親要素に対する%指定等)は絶対指定の値に換算した後、承継される。

HTML主要要素の親子関係

ブロックレベル要素とインラインレベル要素

全ての要素は、ブロックレベル要素とインラインレベル要素に大別される。
ブロックレベル要素は、その後にデフォルトで改行が入る。従って、ブロックレベル要素を続けて記述すると、縦に並ぶ。
インラインレベル要素はその後に、改行が入らない。続けて書くと、横に並ぶ。
ブロックレベル要素に対し、display属性にinlineという値を設定すると、デフォルトの改行が解除される。
インラインレベル要素に対し、display属性にblockという値を設定すると、改行が入るようになる。
この例では、縦に並ぶはずのp要素が横に並び、横に並ぶはずのa要素は改行されている。

<html><body><p style="display:inline;">あいうえお。</p>
<p style="display:inline;">かきくけこ。</p>
<a href="css_7.html" style="display:block;">さしすせそ。</a>
<a href="css_8.html" style="display:block;">たちつてと。</a></body></html>

このサンプルコードの画面

要素同士の可能な親子関係

下図の矢印は、XHTML(HTMLの現バージョン)の仕様で認められている主要な親子関係である。
これに反する、例えば<p>あいうえお<p>かきくけこ</p></p>というp要素(段落)同士の親子関係を作るとどうなるか?
ブラウザは間違った指定として、例えば<p>あいうえお</p><p>かきくけこ</p>のように、入れ子(親子)構造を解除して併置として表示する。
XHTMLの親子関係の定義は数種類あり、以下はTransitionalという定義に基づくものである。
br要素、img要素などは、子要素を持つ事はない。
箇条書きのdl要素はdd、dt要素(下図では省略)のみを子に取り、ddやdtは下図の要素も含む多数の要素を子に取り得る。つまり、リンク(a)や画像(img)を箇条書きで表示出来る。
table要素も同様にtr、td要素等を子とし、tr、tdは多数の要素を子として表に組み込む事が出来る。

要素同士の階層関係の解説図

CSSのボックス構造

CSSでは全ての要素は、4層の長方形であるボックスという構造に収まると考える(線も太さがあり長さが有限なので長方形となる)。
content domainは要素自体の領域、paddingは要素を囲む枠(border)と要素領域の間隔、marginは枠とボックスの端との間隔となる。
borderは枠なので細いが幅を持つので、4層の長方形になる。
其々、marginやpaddingの幅(上下左右の)、borderの太さ等を指定する事が出来る。
例えばp要素(段落)で文字列を囲むと、content domainにはその文字列が入る。文字列を枠で囲みたい場合等に、borderに幅を付ける(border幅を0にすれば、borderが無いように見える)。
文字列とborderをぴったり付けたくない場合は、padding幅を付ける。
margin領域は、borderと隣の要素をくっつけたくない場合に必要となってくる。

CSSのボックス構造の解説図

CSSでの位置と大きさの指定

ボックス全体をボックス領域と呼ぶ。ブラウザの画面全体は、body要素のボックス領域となる。各要素に対する背景(色等)の設定は、要素領域とpadding幅の範囲、及びborderのみに掛かる。従って、marginは常に透明となる。margin、paddingの上下左右幅、要素領域の縦横、borderの幅は其々別に指定出来る。指定は%等の相対指定と、常に一定の画面上の大きさを保つcm等の絶対指定がある。
marginとpaddingの%指定は、親要素のボックス領域の縦横の幅に対する割合となる。要素領域の%指定(width(横幅)とheight(縦幅)属性)は、親要素の要素領域の縦横の幅に対する割合となる。ここで親要素とは、入れ子構造の一つ外側にある要素で、<要素1><要素2>とある場合の、要素2(子)から見た要素1(親)になる。親のボックスの中に子のボックスが出来る事になる。
子要素の位置は、親要素のボックス領域の例えば、左上隅からの距離で指定出来る。topは親要素ボックス上端からの縦の長さ、leftは同左端からの横の長さである。これも絶対指定と相対指定が出来、位置の%指定は、親要素のボックス領域の縦横の幅に対する割合である。画面全体はbody要素のボックスなので、bodyの一つ下の子要素の位置は、画面全体に対する割合で位置指定する事になる。

CSSの位置と大きさの指定の解説図