tableタグでデザイン
古のHTMLタグでの記述方法として、tableタグでデザインをなんとかするというテクニックがありました。
デザインのためだけに使うのはあまり良くないとかという声もいくつかあります。
そんなこと言ったって、実害ないのでは？
そう言われると、ケースによっては無いですが、
良いものかというと、ちょっと疑問に思います。
なので、弊害になるようなコードを書いてみましょう。
良くないデザインのためのtableタグ例
| ■Xからの連絡 | ||
| No | 名前 | ああああああああ |
| 1 | りんご | ■Yからの連絡 |
| いいいいいいいいいいいいい |
あえて枠線を残しましたが、このように中央寄せにするために組んだtableタグ。
tableで書けばこのように中央寄せが簡単・・・
って思うかも知れませんが、これって実際のコードを読むとどうなるでしょうか
<table>
<tr>
<td></td>
<td></td>
<td>■Xからの連絡</td>
</tr>
<tr>
<td>No</td>
<td>名前</td>
<td>ああああああああ</td>
</tr>
<tr>
<td>1</td>
<td>りんご</td>
<td>■Yからの連絡</td>
</tr>
<tr>
<td></td>
<td></td>
<td>いいいいいいいいいいいいい</td>
</tr>
</table>
これメンテナンスする気わきますか・・・？
さらに、もしこれを音声認識や分析に食わせるとしたら、どのような順番で読み上げますか？
データの内容がtable構造になるときに使うのは良いです。
ただ、デザインのためだけにねじ曲がった使い方をすると、このようなコードが生まれたりします。
じゃあどうするのか。グリッドシステムとかある。
どうするか。色んな方法があります。
ただ、直感的にtableタグと近い考え方をするのであれば、
BootstrapやBulmaとかのCSSフレームワークで採用されている、グリッドシステムとかを使うと良いでしょう。
グリッドシステムでは、画面をテーブルのように区切って作ることが出来ます。
グリッドシステムに使われているクラスをご存知でしょうか。
col row、列と行ですね。colはcolumnです。
テーブルのように作れそうなのが伝わったでしょうか。
先程のを書き方変えると、以下のようになります。
<div class="row">
<div col="col-2">
<div>No</div>
<div>1</div>
</div>
<div col="col-2">
<div>名前</div>
<div>りんご</div>
</div>
<div col="col-6">
<div>■Xからの連絡</div>
<div>ああああああああ</div>
<div>■Yからの連絡</div>
<div>いいいいいいいいいいいいい</div>
</div>
</div>
このように、データと情報が紐付けれるようになりました。
メンテナンスもかなりやりやすくなりましたね。
このままだと上下中央寄せが出来ていないので、可能ならflexboxを使って中央寄せなどをやると良いでしょう。
今回はdivでくくりましたが、 <li>とかを使うことも選択肢に入ってきます。
極力正しい意味でHTMLでマークアップしましょうφ(･･
メンテナンスもしやすいですし、滅多にありませんが音声読み上げにも対応出来ます。
今回は小さい内容でしたけど、もっと大きくなったら・・・？メンテナンスは重要なので、小さなところから少しずつ意識していきましょう！
