プログラミング入門講座の第4回です。CSSの基礎知識をつけたい方は、まずプログラミング入門講座③「CSSとは〜HTMLとCSSを紐づける方法〜」をご覧ください。
さて、あなたはHTMLとCSSを紐付けられるようになりました。いざCSS作成！ ・・・といきたいところですが、先に覚えておくべき情報があります。
<div>タグと<span>タグ
プログラミング入門講座①「HTMLとは〜概要と基本構造〜」では、マークアップとは文章に意味づけをするものだとお伝えしました。しかしCSSを組み合わせてサイトの見栄えも調整しようとすると、どうしても意味づけとは関係なく、単純に要素をひとくくりにまとめる必要があるシーンに出くわします。そういった場合に使用する、意味を持たないタグが<div>（ディブ）と<span>（スパン）です。
<div>タグ
たとえば、サイトのヘッダー、サイドバー、本体、フッターをそれぞれ分けて纏めたいとき。HTML4、XHTMLではそれらに該当する意味を持ったタグはありません。そこで代わりに使われるのが<div>です。
<記述例>
<div id=”header”> <h1>サイトタイトル</h1> </div> <div id=”contents”> <h2>見出し</h2> <p>文章文章文章文章</p> </div> <div id=”side”> <ul> <li>リスト1</li> <li>リスト1</li> </ul> <ul> <li>リスト2</li> <li>リスト2</li> </ul> </div> <div id=”footer”> <p>著作権表記</p> </div>
このように、主にCSSと紐づけるためのくくりとして使用します。
<span>タグ
こちらはdivよりもより小さなくくりで使用されます。たとえば文中の特定のワードにだけ色を付けたい場合などです。
<記述例>
<p>テキストを<span class=”red”>赤色</span>にするよ！</p>
<div>と<span>の違い
どちらも意味を持たない<div>と<span>ですが、両者には明確な違いがあります。<div>はブロックレベル要素、<span>はインライン要素という分類にそれぞれ含まれています。両要素については後で詳しく説明しますが、インライン要素はブロック要素を外からくくることができません。※一部例外を除く（ブロックレベル要素・インライン要素とは）
<span>は<div>よりも内側をくくることになります。また、div、spanに限らず、body内で使うHTMLタグはインライン要素かブロック要素に分類されます。
※一部両方の性質をもったタグや分類に含まないタグも存在します。
タグの入れ子（ネスト）
ここまで、説明なく進んできましたが、HTMLは、あるタグでくくった要素の中に、別のタグでくくった要素を含めることができます。これをタグの入れ子（ネスト）と呼びます。
<記述例>
<html> <body> <p>htmlとbodyとpタグが入れ子構造になっています。</p> </body> </html>
タグの種類によって内側に入れ子にできる要素は決まっています。（内包可能要素）特殊な例として、前述のdivとspanはdivの中にdivを、spanの中にspanを入れ子にすることができます。
<記述例>
<div>
<div>
<div>
<p>divが
<span>
<span>3段</span>入れ子
</span>になっています。
</p>
</div>
</div>
</div>
上記の例のタグの列にもありますが、HTMLでは入れ子にしたタグをインデントすることは必須ではありません。よって次のように書くことも可能です。
<記述例>
<div><div><div><p>divが<span><span>3段</span>入れ子</span>になっています。</p></div></div></div>
これでは目で見て読みづらいため、多くの場合インデントをしています。タグの入れ子は、構造が崩れるとブラウザに混乱を招き、表示の崩れやにつながりますので、深い入れ子構造では注意が必要です。
<悪い例①>（締めタグの数が足りない）
<div>
<div>
<div>
<p>divが
<span>
<span>3段</span>入れ子
</span>になっています。
/p>
</div>
</div>
また、タグの入れ子は必ず、内側同士、外側同士で開始タグと終了タグが対になる必要があります。
<悪い例②>（<span>と<a>が互い違いになってしまっている。）
<p><a href=”#1″><span>締めタグの順が逆だよ！</a></span></p>
<良い例>
<p>< a href=”#1″><span>直ってます</span></a></p>
ブロックレベル要素とインライン要素
前述のとおり内で使われるHTMLタグはすべて下記の2種類に分類されます。
- ブロックレベル要素（又はブロック要素）
- インライン要素
※一部両方の性質をもった要素あり。
ブロックレベル要素は主としてページのレイアウトにかかわる性質をもったタグが含まれ、インライン要素は主に文章の内部部分、その名の通りインライン（=横書き）で行中に横並びに表示される要素が含まれます。大雑把な理解として、下記をおさえておきましょう。
- ブロックレベル要素は縦並びになるもの
- インライン用は横並びになるもの
ただし、CSSを使用する上では縦並び横並び以外にも大きな差がありますので、注意が必要です。
ブロックレベル要素
ブロックレベル要素は高さ(height)と幅(width)を持つ要素で、その名からイメージできるようにブラウザの表示上、区画・塊になります。
ブロックレベル要素は、内包する要素一杯の幅と高さをもつ矩形だとイメージできます。widthが未設定の場合、幅は親要素の幅と同一（親要素がない場合の幅ブラウザ一杯）、heightが未設定の場合高さは内包する要素の高さに自動で調整されます。
※ブロックレベル要素に含まれる頻出タグ
div、h1-h6、p、ul、ol、dl、table、form
（参照：ブロックレベル要素 – TAG index Webサイト ）
※すべてのタグは上記サイトから確認してください。
インライン要素
インライン要素は高さと幅を持たない要素で、その名の通りインライン（=横書き）で行中に横並びに表示される要素が含まれます。インライン要素は、横幅が親要素（一つ上の要素）の幅に達すると、途中で改行され、すぐ下の行に続く性質があります。
※インライン要素に含まれる頻出タグ
a、strong、span 、b、em、label、sub、 sup、c ite、 code
（参照：インライン要素 – TAG index Webサイト）
※すべてのタグは上記サイトから確認してください。
ブロックレベル要素とインライン要素の表示の差
具体例として、pタグ（ブロックレベル要素）とspanタグ（インライン要素）を使って表示の差を比較してみます。（サンプルコード：css_example2）
※わかりやすくするため色分け・枠つけします。
<記述例①>ブロックレベル要素の場合
<p>テキスト1テキスト1テキスト1テキスト1</p> <p>テキスト2テキスト2テキスト2テキスト2</p> <p>テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3</p>
<記述例②>ブロックレベル要素の場合
<span>テキスト1テキスト1テキスト1テキスト1</span> <span>テキスト2テキスト2テキスト2テキスト2</span> <span>テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3</span>
<記述例③>ブロックレベル要素とインライン要素が隣り合った場合
<p>ブロック1ブロック1ブロック1</p> <span>インライン1インライン1インライン1インライン1</span> <p>ブロック2ブロック2ブロック2</p>
<記述例④>ブロックレベル要素の中にインライン要素が内包された場合
<p>ブロック1ブロック1ブロック1 <span>インライン1インライン1インライン1インライン1</span>ブロック1ブロック1ブロック1 </p> <p>ブロック2ブロック2ブロック2 <span>インライン2インライン2インライン2インライン2</span>ブロック2ブロック2ブロック2 </p>
これらの例は幅400pxのdivの中にそれぞれの事例を詰め込んだものです。ブロックレベル要素が矩形、インライン要素が行というイメージがなんとなくつかめたかと思います。
置換インライン要素（インラインブロック要素）
ここに該当する要素は大分類としてはインライン要素ですが、幅（width）と高さ（height）を持つ特殊なものです。
※インライン要素に含まれる頻出タグ
img、input、button、iframe、input、select、textarea
これらはインライン要素同様横並びに配置されますが、width、heightを属性・CSSで指定することができます。ブロックレベル要素、インライン要素についてより詳しい情報は下記サイトを参照してください。
（参照：適用要素｜前提知識｜CSS2.1）
内包可能要素
HTMLのタグごとに内側に入れ子にできるタグの種類が決まっています。
以下の三つが基本のルールです。※一部例外あり
- ブロックレベル要素は、中にブロックレベル要素とインライン要素どちらも入れられるものと、インライン要素だけが入れられるものがある
- インライン要素の中にはインライン要素だけが入れられる
- リスト系のタグは直下の子要素に使えるタグが決まっている
ブロックレベル要素の種類
ブロックレベル要素は大きく見て、中にブロックレベル要素とインライン要素どちらも入れられるものと、インライン要素だけが入れられるものに分かれます。※一部例外あり
ブロックレベル要素・インライン要素をどちらも内包できるもの
div、fieldset等
インライン要素を内包できるもの
h1～h6、p、pre等
これらは内側に直接テキストを入れても、インライン要素を入れても大丈夫です。ブロックレベル要素・インライン要素をどちらも内包できるものでは、ブロックレベル要素同士の入れ子も問題ありません。
※ただし、リストに関するタグ（下記）は制約があります。
ul、ol、dl、table
インライン要素の中にはインライン要素だけが入れられる
インライン要素の中にはブロック要素を入れられません。※一部例外あり
中にはインライン要素又はテキストが入ります。インライン要素同士の入れ子は許可されています。
リスト系のタグは直下の子要素に使えるタグが決まっている
リストに関するタグはリスト全体をくくるタグ（例：ul）の直下に使える子要素が決まっています。
- ul、olの場合・・・直下は必ずli
- dlの場合・・・直下は必ずdtかdd
- tableの場合・・・tbodyの直下は必ずtr、trの直下は必ずthかtd（tbodyは省略可能なため、table直下にtrは許される）
- 子要素li、dd、th、td・・・ブロックレベル要素・インライン要素を内包可能
- 子要素th・・・インライン要素を内包可能
<良い例>
<ul> <li>内包要素</li> <li><img src=”a.jpg” /></li> </ul>
<悪い例>
<ul> 内包要素 <img src=”a.jpg” /> </ul>
リストを複数入れ子にする場合はこのようになります。
<記述例>
<ul> <li> <ul> <li>リストアイテム</li> <li>リストアイテム</li> </ul> </li> <li> <ul> <li>リストアイテム</li> <li>リストアイテム</li> </ul> </li> </ul>
※liの中であればブロックレベル要素を入れられるため、ulを設置できています。
（参照：ブロックレベル要素一覧表、インライン要素一覧表、ブロックレベル要素の内包できる？できない？）
HTMLタグからCSSへの移行
CSSはHTMLを読みやすく・管理しやすくするために、枝分かれして生まれたものです。ですから、もともとはHTMLタグにもウェブページの見栄えを調整するためのタグがありました。ここでは文字のスタイルを例としてCSSに至る過渡期の記述を紹介します。
- HTMLタグでの書き方
- style属性での書き方
- style要素にまとめた書き方
- CSSでの書き方
ブラウザで下記の表示になるように、それぞれの書き方でコードを書いてみます。どの表示結果も同じになります。
HTMLタグでの書き方
<記述例>
<p><font size=”5″ color=”#FF0000″><b>文字のスタイルを調整！</b></font></p>
HTMLではかつて、見た目を調整する専用のタグが使用されていました。
- <font>・・・フォントタグ。フォントの種類、大きさ、色を調整するタグで、ここではsize属性で大きさを、color属性で色を設定しています
- <b>・・・ボールドタグ。文字を太字にする専用タグ
これらは見栄えを変更するだけで、文章の意味には関与しないものでした。HTML全体にこういったタグが設置されると、コードが読みづらくなるばかりでした。ですからXHTMLではこの書き方は非推奨となっています。
style属性での書き方
<記述例>
<p style=”font-size:150%;font-weight:bold;color:#FF0000;”>文字のスタイルを調整！</p>
見栄えを整えるタグを廃止するため、その代替としてstyle属性によって見た目を変更できるようになりました。この例では<b>タグ<font>タグがなく、<p>タグだけになりマークアップが単純になります。style属性の中身は、CSSでの宣言を一列にまとめたもので、同様の動作をします。
style要素にまとめた書き方
<記述例>
<style type=”text/css”>
<!–
.text1{
font-size:150%;
font-weight:bold;
color:#FF0000;
}
–>
</style>
<記述例>
<p class=”text1″>文字のスタイルを調整！</p>
さらに、内容と見た目を分離できるようになりました。 <style>タグは、中にスタイルを記述する専用タグで、HTMLの中にCSSと同一の書式でスタイルを用意できます。HTMLは上から順に描画されるため、スタイルを使用する箇所よりも前に、<style>タグでスタイルをまとめて用意し、セレクタで紐づけて使用します。スタイル要素の中にある<!– –>はコメントアウトと呼び、HTMLの中に、ブラウザには表示させない注釈文を差し込む書式です。ここでは、<style>タグに対応していないブラウザに、内容を表示させないために書かれています。
CSSでの書き方
これで完全にコンテンツと見た目の分離が完了しました。CSSファイル内では<!– àを使用する必要はありません。
<HTML>
<p class=”text2″>文字のスタイルを調整！</p>
<CSS>
.text2{
font-size:150%;
font-weight:bold;
color:#FF0000;
}
これで完全にコンテンツと見た目の分離が完了しました。CSSファイル内では<!– →を使用する必要はありません。
次回の記事はこちらです→プログラミング入門講座⑤「CSS〜セレクタの使い方〜」
【オススメ記事】
➡︎ 書籍とWebサイトを使ってCSSを独学で身につけた話
➡︎ コーダー志望者必見！CSSのスクールBEST17
➡︎ マークアップエンジニアがオススメするCSS学習サイト
➡︎ CSSの本・参考書の評判
