1. HOME
  2. フロントエンド
  3. インライン要素の中にブロックレベル要素を書いちゃダメな話

インライン要素の中にブロックレベル要素を書いちゃダメな話

フロントエンド

最近陥りました。なんでリンク反応しないの!?って思ったら【インライン要素の中にブロックレベル要素を書いちゃダメ】でした。なので見直しがてら勉強し直し。

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

そもそもhtmlは大きくわけてインライン要素をブロックレベル要素に分けれます。ちょっとしたおさらい。

ブロックレベル要素

見出しタグ(h1 ~ h6)や、blockquotedivformolppretableulなどがブロックレベル要素です。

その他のブロックレベル要素はこちら

ブロックレベル要素のスタイル

margin上下左右指定可能
padding上下左右指定可能
width効く
height効く

インライン要素

aタグemタグspanタグなどがインライン要素です。footerなどに使われるsmallタグもインライン要素です。

その他のインライン要素はこちら

インライン要素のスタイル

margin左右のみ指定可能
padding上下左右指定可能 ※1
width効かない
height効かない

※1
上下については指定しても要素の高さに影響しないため、上下にあるコンテンツが重なることがある。

これはスタイルも効く特別なインライン要素

imginputselecttextareaなどは

margin上下左右指定可能
padding上下左右指定可能
width効く
height効く

ブロックレベル要素と同じくスタイルが効きます。

インライン要素の中にブロックレベル要素を書いてはいけない

インライン要素の中にブロックレベル要素を書くことは禁止されています。

OK : <a href="#"><p>これはNGです....。</p></a>
NG : <p><a href="#">これはOKです!!</a></p>

冒頭に書いた、最近陥ったこと

<table>
  <a href="#">
    <tr>
        <th>タイトルタイトルタイトル</th>
        <td>日付日付日付</td>
    </tr>
  </a>
  <tr>
        <th>タイトルタイトルタイトル</th>
        <td>日付日付日付</td>
    </tr>
</table>
タイトルタイトルタイトル 日付日付日付
タイトルタイトルタイトル 日付日付日付

ブロックレベル要素と定義されているのはtableだけですが、tableの中にかけるものは限られているのでtrなどを囲むのはNGみたいです。

リンクをつけたい場合はth内やtd内にaタグを書くことができます。

ソースをみるとtraで囲まれていますが、要素の検証をした場合にはtableの外にaが出されておりリンクとして効きませんでした....。

tableの中に書いていいもの

trテーブルの1行
thテーブルの1セル(見出し)
tdテーブルの1セル
captionテーブルの見出し
theadtableの中で1つのみ。
tbody複数可能。
tfoottableの中で1つのみ。
colgroup表の縦列をグループ化し、属性をまとめて指定できる。

html

この記事を読んだ方におすすめ