htmlを書いたり、CSSでスタイルを設定していると、引っかかってくるところです。
HTML＆CSSを理解するうえで大切な基本概念。
わかったつもりで理解しきれていないので、整理しておきます。
htmlタグは２種類に分類できる
htmlファイルを作成するということは、<p></p>などこういうタグ < > をたくさん書いていくことです。
そして、bodyタグ内で使用されるタグ < >は、ブロックレベル要素とインライン要素という２種類に分類できます。
実は、HTML5からブロックレベル要素、インライン要素という概念は廃止され、代わりにコンテンツモデルやカテゴリーという概念が使われるようになりました。
しかし、CSSでレイアウト設定する際の考え方は同じなので、ブロックレベル要素とインライン要素の概念の理解は必要だと思います。
ブロックレベル要素とは
ブロックレベル要素は見出しや段落など、文章の骨組みとなる要素で、一つのかたまりとして扱われます。
かたまり（ブロック）として扱われる
body要素の直接の子要素として配置することができ、要素の前後には改行が入ります。
よく使うもの、イメージしやすいものだと、<p>や<div>が該当します。
スタイル指定のためにもよく利用されるdivは、とても使い勝手がいいブロックレベル要素です。
ブロックレベル要素一覧
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>
ブロックレベル要素は、その前後で改行され、その領域は横幅いっぱいに広がる。
インライン要素とは
文章の一部として扱われるインライン要素
インライン要素は、通常ブロックレベル要素の中に配置され、文章の一部となる要素です。
新しい行からではなく、前の要素と同じ行の続きから始まり、その必要な領域のみを確保します。
よく使われるインライン要素は、<span>、<b>、<a>などで、文章の中の一部を強調したい場合などに使われます。
インライン要素一覧
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
ブロックレベル要素は縦、インライン要素は横に並ぶ
ブロックレベル要素の前後には、改行が入り、インライン要素には改行は入らないので、
ブロックレベル要素は縦に、インライン要素は横に並んで表示されます。
この要素の並びは、インライン要素とブロックレベル要素を見分けるポイントにもなります。
書いてみて理解する
<!DOCTYPE html>
<html>
<head>
<style>
div,p {
border: solid 1px blue;
}
span {
background-color: pink;
}
</style>
</head>
<body>
<div>Hello <b>World</b>!</div>
<p>ブロックレベル要素と<span>インライン要素</span>の違いを理解します。</p>
</body>
</html>
このように、ブロックレベル要素とインライン要素を記述してみると、ブラウザでの表示は以下のようになります。
ブロックレベル要素のdivやpタグで囲われたものは、横いっぱいの領域に広がり、
bやspanタグのインライン要素は、それらが必要とする領域のみで、前後に改行が入らないことがわかります。
CSSで並びを変えられる
タグの要素レベルで、横に並ぶのか、縦に並ぶのかを理解できるようになったかと思います。
デフォルトの並びは、要素レベルによるのですが、CSSでこの並びを変更することができます。
以下にあるリストタグ<li>は、ブロックレベル要素なので、一つ一つのリストは改行されて表示されます。
<ul> <li>リンゴ</li> <li>バナナ</li> <li>みかん</li> </ul>
・リンゴ ・バナナ ・みかん
これを横並びにしたい場合は、CSSのdisplayプロパティを使います。
li {
display: inline;
}
リンゴ バナナ みかん
こうすれば、リストはインライン要素のように扱われ、横並びになります。
リストを横に並べるのはよく使うテクニックで、
メニューバーやアイコンを並べる際に利用されています。
注意したいこと
htmlはタグの中にタグを書いていくという、親要素から子要素、孫要素を作っていくのですが、いくつかルールがあります。
ブロック、インラインの入れ子に注意
タグの中にタグを書いていくことを入れ子といいます。
タグは大きな要素から小さな要素が入れ子になる（子要素となる）ように書くのが基本ルールです。
ブロックレベル要素とインライン要素では、ブロックレベル要素のほうが大きな要素です。そのため、ブロックレベル要素の子要素になるべきインライン要素の中に、ブロックレベル要素を入れることはできません。
以下はOKです。
- ブロックレベル要素の中にインライン要素
- ブロックレベル要素の中に、ブッロクレベル要素
- インライン要素の中にインライン要素
インライン要素の中にブロックレベル要素を入れることはできない。
例えば、以下のように書くことはできません。
ブロックレベル要素のpタグの中に、インライン要素のstrongタグが入ってしまっています。
<strong><p>文章</p></strong>
インライン要素にwidthやheightは指定できない
インライン要素は、あくまで文章の一部という役割なので、その領域の設定には制限があります。
一部例外はあるものの、インライン要素に幅（width）や高さ（height）は指定できません。
また、左右のmarginも指定できません（上下は可）。
インライン要素をブロックレベル要素のように、幅や高さを設定したいという場合には、上記で行ったように、CSSのdisplayプロパティを使います。
要素の表示方法を変更することで、ブロックレベル要素のようにスタイルを指定できるようになります。
コメント