どうも、前職のシステム開発で、いにしえのテーブルレイアウトを一部使ってしまっていた@tomiiii3zです。
↑ 氷河期の氷の中から発見された@tomiiii3z（ヒト科 タグ・テーブレウス/tag tableus）
現職で最近のモバイル開発等ではFlexboxでのレイアウトを知っておくと便利だよと教えていただいたので、
現在のレイアウト方法について調べてみました。
tableタグを使うのは本当に表を出力したい場合だけにしよう
表要素の出力にはもちろんtableタグを用いてよいのですが
レイアウトに使っていると私のように生きている時代を間違えた人になってしまいます。
今はもう便利な世の中になっています。
FlexboxやGrid Layoutのように便利なものが存在しています。
↑ tableタグで強引に配置されたレイアウト
Flexboxとは
柔軟にボックスレイアウトを行うことができるCSSのレイアウトモードです。(インラインではなくボックス)
よくある横並びのレイアウトなんかを非常に手軽に組むことができるようになります。
React NativeではFlexboxがレイアウト方法として採用されているようです。
.container {
display: flex;
max-width: 750px;
margin: 0 auto;
}
.dogeza-item {
width: 100px;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
↑Flexboxによって綺麗に横並びに揃えられた土下座
Grid Layoutとは
ページを列と行で分割するような、まさにグリッドのようなレイアウトモードです。
ページ全体の配置を決めるような場合に適しています。
<div class="wrapper">
<div class="header"></div>
<div class="sidebar1"></div>
<div class="content"></div>
<div class="sidebar2"></div>
<div class="footer"></div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(5, 100px);
grid-gap: 0px;
grid-template-rows: repeat(6, 100px);
}
.header {
grid-column: 1 / 6;
grid-row: 1;
}
.sidebar1 {
grid-column: 1;
grid-row: 2 / 6;
}
.sidebar2 {
grid-column: 5;
grid-row: 2 / 6;
}
.content {
grid-column: 2 / 5;
grid-row: 2 / 6;
}
.footer {
grid-column: 1 / 6;
grid-row: 6;
}
一般的なサイトレイアウトの形も忌まわしきtableを使わずとも、Grid Layoutで配置が可能です。
これで私も原始人から卒業です！！
これからはtableタグで二度とレイアウトしません！！
もし約束を破ったら、360度カメラで撮影した土下座画像を元に作成したVR画像をアップします。
※どちらも詳しい解説をされているサイトがあります。詳しくはそちらを参考になさってください。
今覚えたい！エンジニアのための CSS の基礎講座 〜Flexbox レイアウト編〜
https://nulab-inc.com/ja/blog/nulab/css-basics-for-engineer-flexbox/
これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法
https://ics.media/entry/15921
<画像素材>
Icon-rainbow 様 (http://icon-rainbow.com/)
ピクト缶 様 (http://pictkan.com/)
シルエットデザイン 様 (http://kage-design.com/wp/)