wiki-kouza1 @ ウィキ
HTML・CSSについて
最終更新:
wiki-kouza1
-
view
HTMLとCSSの基礎知識
WikiなどのCMSを含む「ホームページ」の実体はHTML文書です。元来はこのHTMLタグ付のテキスト文書を、そのままテキスト文書として読んでいましたが、近年は「視覚系ブラウザ」と呼ばれるタイプのWebブラウザで、「画面として表示する」ソフトでホームページを閲覧するのが大勢です。
そこで、「どのように表示させるのか」が問題となります。その経緯は割愛しますが、現在ではCSS(カスケイディング・スタイル・シート)が利用されるようになりました。
これは、HTML文書は、あくまでも文書の構造をHTMLタグで定義することをその役割とし、画面として表示するときには、CSSで定義したデザイン情報を適用させることで、「文書に書かれている内容を読み出しやすくする」ことと「デザイン情報を分離することで管理や開発をしやすくする」という目的があります。
そこで、このWikiが自動生成するHTMLに対して適用されているCSS情報を、一部書き換えることで、細かなデザイン変更が可能となるわけです。
HTML文書の要素
HTMLは、文書内にある情報を「HTMLタグ」と呼ばれるタグで囲むことで、その部分を「要素」という単位に定義します。逆に言うと、これら(構成)要素の集まりで、HTML文書は構成されている、とも言えます。
HTMLの要素は、次のような書式になっています。
<要素名 属性名="属性値">内容</要素名>
<div id="top">リンク</div>・・・(例文)
<em class="color_red">ここ注意!</em>・・・(例文)
<div id="top">リンク</div>・・・(例文)
<em class="color_red">ここ注意!</em>・・・(例文)
CSSの書式
CSSは、この要素単位で、デザイン情報の適用先を選別します。その際に利用される主な情報は、以下の3つです。
- 要素名
- class属性値
- id属性値
CSSでは、これらの情報を「セレクター」と呼び、セレクターに続く「{」と「}」に囲まれた間に、プロパティ(デザイン情報)を記述するという、書式を用います。
また、CSSにおいては、上記のHTML要素の持つ範囲を「ボックス」という概念で捕らえます。下図では、黄色い部分が要素の範囲(ボックス)ということになります。おおむね、以下のようなプロパティを設定できます。
プロパティ名 | 意味 |
---|---|
color | 文字色 |
background | 背景色 |
border | ボックスの境界線(外枠) |
margin | ボックスの外側の余白 |
width | 内容の横幅 |
height | 内容の縦幅 |
padding | ボックスの内側の余白 |
プロパティは、「プロパティ名 : プロパティ値 ;」で1セットになります。続けて複数のプロパティを記述することもできます。
セレクタ { プロパティ名 :(コロン) プロパティ値 ;(セミコロン) }
em { font-weight : bold;} ・・・(例文)
.color_red{ color : red ;} ・・・(例文)
#top { background : white; color : blue} ・・・(例文)
em { font-weight : bold;} ・・・(例文)
.color_red{ color : red ;} ・・・(例文)
#top { background : white; color : blue} ・・・(例文)
このように、要素名をセレクタにするならば、要素名をそのまま記述し、class属性値を使う場合は、「.(ドット) + class属性値」が、id属性値を使う場合には「#(シャープ) + id属性値」がセレクタになります。
なお、CSSを記述するときには、すべて「半角英数」で記述する必要がありますので、IMEを停止して記述するようにしたほうが、記述ミスを回避しやすくなります。
子孫セレクタと優先順位
セレクタ1 (半角スペース)セレクタ2{ プロパティ名 : プロパティ値 ; }
em .color_red{font-weight:bold;color:red;}・・・(例文)
em .color_red{font-weight:bold;color:red;}・・・(例文)
このように記述すると、em要素でかつ、class属性値がcolor_redである要素だけに、「太字・文字色赤」を適用できるわけです。
上記のように、CSSを適用させる対象はセレクタで指定するわけですが、これらのセレクタを複数組み合わせることで、より限定した対象を指定することができます。
もし同じ要素に対して、同じプロパティについて複数のCSS指定が行われている場合、基本的には後に記述したものが優先的に適用されます。ここではプロパティ「color」についてid名、要素名、class属性名で、それぞれ指定してみます。
[HTML側の記述]
<div id="left" class="color_red">左段組</div>
<div id="left" class="color_red">左段組</div>
[CSS側の記述]
#left{color:blue;}
div{color:yellow;}
.coloe_red{color:red;}
#left{color:blue;}
div{color:yellow;}
.coloe_red{color:red;}
では、このようなHTMLとCSSがあった場合、「左段組」というも文字は、何色になるでしょうか。
上記のとおり「後に記述したものが優先」ならば、class属性で指定した「赤色」になるはずですが、じつは違います。正解は「青」です。
実はセレクタの状態と種類によって、優先順位があるのです。単独のセレクタならば、一番優先順位の高いのがid属性名です。次がclass属性名、要素名となっています。
また、複数のセレクタを組み合わせるということで、優先順位を上げることができます。
[HTML側の記述]
<div id="right" class="color_red">右段組ー<span>ブロック1</span></div>
<div id="right" class="color_red">右段組ー<span>ブロック1</span></div>
[CSS側の記述]
#right span{color:yellow;}・・・例文1
#right{color:blue;}・・・例文2
#right span{color:yellow;}・・・例文1
#right{color:blue;}・・・例文2
[表示結果]
右段組ーブロック1
右段組ーブロック1
例文1のように、セレクタを半角スペースをはさんで複数記述することで、「id属性名rightがついた要素の中に入っている、span要素」という、より対象を絞ったセレクタにすることができます。この場合は、後から記述した例文2よりも優先されて、span要素内の「ブロック1」という文字は、黄色になります。
特にCSSを変更したい部分の要素に親要素があり、それにid属性がつけられている場合は、親要素のid属性名と組み合わせて指定する方が、細かなCSS指定が可能となります。