2024年12月9日月曜日

Grid Layout(display: grid)でのグリッドデザイン

さて、前回「タグの意味とデザインタグ」という記事を書きました。
webデザインを行う時にdivとspanこの二つが何のためのタグなのかと、ちゃんとしたデザインタグというものは存在せずタグとして使用用途として無色であるdivとspanが結果的にデザインのタグに使われている。

・・・という感じの内容でした。
今回は、divに新しく追加された・・・いや2011年ごろからの実装なので全然はるか前なのですがこれまでよりデザインに特化した方法について説明します。

実は家にあるDWはCS4なので対応してなかったからずっと放置していたんですが、ついに手を付け始めました。

概念としてはdivをtableの様に格子状に管理してデザインするというものです。
まぁ実際問題として、いにしえのtableデザインは扱いやすかったという事ですね。

floatで浮かして並べて、clear:both; で浮かすのをやめるみたいな構造は確かに分かりにくい。少なからずDWでtableの格子を繋げたり切ったりする方がデザイン的に直感的に見えてしまう。

display: gridはこの格子デザイン概念の良い所だけを得られます。
しかも、子要素のdivはグリッドの好きな位置へ移動でき、逆順にするなども容易。
レスポンシブなデザインとも親和性が高い。

gridの格子概念を理解する

基本構造は簡単です。親要素のdivを指定すると、中のdivを全てグリッドに並べてくれます。
親のdivはgridの列を指定すれば良いだけです。
行(row)の概念もありますが、まずは列がどのように処理されるか分かれば理解できると思います。

「display:grid;grid-template-columns: 20px 20px 20px;」

この様になります。
親divの幅指定が内部全てに反映されます。
また、幅指定を3つだけしたので4つめからは次の行となります。

今回はpxで指定しましたが今回は新たな単位を覚えましょう。
「fr」です。

今まで固定幅は「px」、割合を指定する時は「%」を使っていました。
今回新たに「%」に変わる割合指定方法です。
frはfraction(分数)の略で、等分したときの割合です。

水溶液とかと一緒です。一般的な例でいればカルピスと水の割合は「1:5」みたいな。
上記の例をpxからfrに置き換えてみます。

「display:grid;grid-template-columns: 1fr 1fr 1fr」

さてするとどうでしょうか幅指定は「１：１：１」等幅なのでこのようになります。
じゃあ今度は末端の幅を2frにしてみます。

①

②

③

④

この様になります。
「１：１：２」の割合となるので①と②は同じ幅、③は2倍となります。
今までは3分割するなら「33%」で、「1:1:2」の比率にするなら「25%・25%・50%」みたいな割合を自分で計算してパーセントにしていましたがfr指定の登場で分割割合だけ指定すれば良くなったという事です。