インライン要素とブロック要素

>>ホームページの作り方TOP　>>インライン要素とブロック要素

■インライン要素とブロック要素

先ほど作ったサンプルのスタイルを変更するに当たって、上から2段目の、idで言えばa2の部分のテキストがつながっていて独立していないのは邪魔なので、つながっている要素（インライン要素）を独立した要素（ブロックレベル要素）に変える操作をして見ましょう。

文字を独立させた要素に変えなければ、個々の文字(HOME　SAMPLE1・・・)に対してbackgroundやwidth、height等を指定することができません。

それは、これらがインライン要素であるためです。

例えば"a（アンカー）"はインライン要素ですので、aタグを連続して記述すると、自動的に改行されて下に連続するのではなく、文字のように右側にタイプされます。

これをdisplay:blockにて、ブロックレベル要素へと変えますと、自動的に改行されるようになると共に、幅や高さも指定できるようになります。

例で言えば、link1とlink2は独立して動くことが可能になります。

スタイルシートでid:a2のアンカー(a) に対してスタイルを新たに追加します。

displayでボックスの要素を指定できます。

#a2 a　{
　　　　display:block;
　　　　}

blockはブロック要素、inlineはインライン要素、noneは非表示です。

IDが指定されている要素に対してスタイルを指定するときは、クラスのとき、”ドット（.)＋クラス名”であったのに対して、”シャープ(＃)＋ID名”を使います。