みなさん、きちんとマークアップできていますか？divだけでマークアップしたりしてないですか？
style当てれば見た目一緒になるやん、よくわからんからdivで作っておけばいいでしょ、見た目一緒だから…などの理由でdivを多様するのは最悪ですね。
宗教上の理由でdivしか使えないなどの理由がある方は仕方がありません。
おざなりになりがちなマークアップですが、きちんとマークアップすることの重要性を知っておきましょう。
第1話 table編
table、それは太古の昔、ホームページを召喚する儀式の際に使われていた古代言語…。
といういいつたえもありますが、今でも現役の要素です。
ExcelやSpreadsheetなどの表形式のデータを作りたいときに適しています。そういうときにばしばし使いましょう。
表を組んでみた
[実際のものはこちら(Codepen)](https://codepen.io/dazi_gomi/pen/jRGQrV)
最高な表ですね。みなさんはどの子が好きですか？ぼくは4の子が好きです。
この最高な表を社内のみんなにも見てもらいたいので、Excelにコピペしてメールに添付して送りましょう。
この表をコピーしてExcelにペーストすれば…
…。
最高な表が崩れてしまい、最悪な表になってしまいました。完全に怪文書です。
こんな怪文書を送ったら、頭がヤバイと思われて解雇間違いなしなので、せっせと表を組み直…
さなくても、table要素にするだけでtableの書式が保持されちゃいます。
なのでdivをtableに置き換えてみましょう。
<table class="table">
<thead class="thead">
<tr class="tr">
<th class="th">First</th>
<th class="th">Last</th>
<th class="th cv">CV</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="tr">
<td class="td">中野</td>
<td class="td">一花</td>
<td class="td cv">花澤香菜</td>
</tr>
<tr class="tr">
<td class="td">中野</td>
<td class="td">二乃</td>
<td class="td cv">竹達彩奈</td>
</tr>
<tr class="tr">
<td class="td">中野</td>
<td class="td">三玖</td>
<td class="td cv">伊藤美来</td>
</tr>
<tr class="tr">
<td class="td">中野</td>
<td class="td">四葉</td>
<td class="td cv">佐倉綾音</td>
</tr>
<tr class="tr">
<td class="td">中野</td>
<td class="td">五月</td>
<td class="td cv">水瀬いのり</td>
</tr>
</tbody>
</table>
コピペすると…
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
誰が見てもわかる最高の表になりましたね。
あとはこれをzipにしてパスは教師…。
………
後日談
偉い人「キミ頭大丈夫？なんかヤバそうだから解雇ね。」
完
まとめ
- Webクローラーからすると、
divだけで構成されているページは謎の情報が置いてあるだけのページにしか見えない。 - 適切にマークアップされていることにより、クローラーにもページの構造が理解できるようになる。よってSEO的な面で有利。(になるかはわからないけど少なくともマイナスにはならない)
- コピペしやすかったり、ユーザビリティも爆上がりする。
- 綺麗に掛けてると育ちよく見える。
ちなみに画像のaltもコピペできたりします。
装飾で使っている画像のaltに装飾とか入れてインライン要素で配置すると、文章滅茶苦茶になるので気をつけましょう。
次回予告
次回は**『脱div、抑えておきたい要素一覧』**です。
追記
divで組んだものにcssを当てる前のものを追加しました。(見やすいようにサイズだったりドット線追加してますが)
divオンリーのものは「縦積みされている箱を無理矢理配置し直して表っぽく見せている」 ような感じです。
一方tableは、Headerを意味するthだったり、列を意味するtr、セルデータを意味するtdなどを用いて意味も記述してあるので機械が意味を汲み取ってくれていると思ってもらうのが良いかと思います。（たぶん）