最近陥りました。なんでリンク反応しないの!?って思ったら【インライン要素の中にブロックレベル要素を書いちゃダメ】でした。なので見直しがてら勉強し直し。
インライン要素とブロックレベル要素
そもそもhtmlは大きくわけてインライン要素をブロックレベル要素に分けれます。ちょっとしたおさらい。
ブロックレベル要素
見出しタグ(h1 ~ h6)や、blockquote、div、form、ol、p、pre、table、ulなどがブロックレベル要素です。
ブロックレベル要素のスタイル
margin | 上下左右指定可能 |
---|---|
padding | 上下左右指定可能 |
width | 効く |
height | 効く |
インライン要素
aタグやemタグ、spanタグなどがインライン要素です。footerなどに使われるsmallタグもインライン要素です。
インライン要素のスタイル
margin | 左右のみ指定可能 |
---|---|
padding | 上下左右指定可能 ※1 |
width | 効かない |
height | 効かない |
※1
上下については指定しても要素の高さに影響しないため、上下にあるコンテンツが重なることがある。
これはスタイルも効く特別なインライン要素
imgやinput、select、textareaなどは
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タグを書くことができます。
ソースをみるとtrがaで囲まれていますが、要素の検証をした場合にはtableの外にaが出されておりリンクとして効きませんでした....。
tableの中に書いていいもの
tr | テーブルの1行 |
---|---|
th | テーブルの1セル(見出し) |
td | テーブルの1セル |
caption | テーブルの見出し |
thead | tableの中で1つのみ。 |
tbody | 複数可能。 |
tfoot | tableの中で1つのみ。 |
colgroup | 表の縦列をグループ化し、属性をまとめて指定できる。 |
この記事を読んだ方におすすめ