CSS Grid Layoutで広がるWebデザインの可能性について

この記事はCSS Advent Calendar 2017の25日目の記事です。

TL;DR

CSS Grid Layoutの登場により、見た目とマークアップがある程度分離できるようになりました。これにより、要素を自由に配置しつつも、読みやすいコードを書くことが可能になりました。2017年末時点で実際に利用する上ではIE11対応はかなり必要なものの、デザイン段階でCSSでの実装が可能かどうかを気にする箇所は減ったと思うので、デザイナーさんはどんどん良いデザインを生み出して欲しいです!

コンテキスト

どういう文脈で書いているか

見た目とマークアップの分離

Float / Flexbox
CSS Grid Layoutが登場するまでは、FloatやFlexbox、Tableを使ってレイアウトを実装して来ました。こういった実装の中で頻発するのが、レイアウトするためだけに必要な要素がある、ということです。

例えば、Floatではclearfixするための要素が外側に必要ですし、Flexboxでもjustify-contentのためにdiv要素で囲んだりします。記事一覧をFloat、Flexboxを使ってそれぞれマークアップしてみました。「画像を左側に、タイトルと更新日を横並びにして、その下に抜粋を表示して、、、」という感じでマークアップすると、こんな感じになってしまいました。

もちろんどちらの場合でも、同じデザインを作ることは可能ですが、.clearfixや.leftが適用されている要素が多くなったり、ネストが深くなったりと、単純にコードが見づらくなるという問題があります。また、div要素は一切特別な意味を持たない要素であり、文書構造としては必要ないけれど、デザインを整えるために必要な要素が大量に出てきてしまいます。

Grid Layout
一方CSS Grid Layoutを使うと、必要のない要素を全て排除しても、上記のFloat/Flexboxと全く同じ見た目を実装できます。CSSのために必要な要素は無くなり、非常にシンプルで良い感じです。

さらに言えば<article>や<time>も利用することで<div>を全てなくすこともできそうですね。Grid Layoutを取り入れると、div要素はかなり少なくなってくるんじゃないでしょうか。

要素の配置を自由に変更できる

Float / Flexbox
ボックスモデルでは要素が左上から配置されていくため、基本的にはデザイン上で左上に現れる要素からHTMLに書いていく必要がありました。Flexboxのorderプロパティを使えばある程度順番をコントロールすることができますが、限界はあります。

例えば、上記のFloat/Flexboxで、タイトル=>更新日=>オーナー=>抜粋、という順番を、タイトル=>抜粋=>更新日=>オーナーに変更する場合、HTMLそのものを組み替える必要があります(そのままでもpositionなどでゴリ押しは可能ですが。。。)。

Grid Layout
Grid Layoutではエリアを使用することで、HTMLの変更なしに表示順を変えることができます。表示順を変えたい要素同士は同じ階層にある必要がありますし、Gridをきちんと定義しないといけないですが、それができれば表示順は自由に変更することができます。

これができると何が嬉しいのかというと、レスポンシブデザインでの柔軟性が上がります。デスクトップで見ている場合にはサイドバーに存在する要素を、モバイルではメインコンテンツの途中に挟むこともできます。

具体的には、デスクトップではサイドバーに表示していたカテゴリー一覧を、モバイルでは3記事表示した後に表示する、といったことが可能になります。このデザインが正しいのかについてはここでは注目しておらず、あくまで表現の幅が広がる、という点に注目しています。

CSSを意識しないレイアウトが可能になる

ここからは主観的な表現が多くなりますので、話半分ぐらいに聞いてください。

Webデザインは、最終的にはHTML/CSSを使って実装されることになります。そのため、実現可能な範囲で最適なデザインを目指す必要があると思っています。

これまでは、Float / Flexboxで実装できる範囲でレイアウトを組む必要があったため、それに合わせた情報設計を行ってきました。おそらく無意識的に実装の限界から逆算して、デザインを決めている場合もあると思います。(モバイルはとりあえずデスクトップのカラム落ちさせた感じで、という案件ありませんでしたか?私はありました。)

Grid Layoutでは、基本的に要素の順番を気にせずにデザインすることが可能なので、レイアウトについては自由になったと言っても良いでしょう。IE11対応は引き続きあるものの、いずれは必要なくなります。2025年になってから、Gridで可能になったデザインを行っていくというスタンスでは、ユーザーに今現在な最適なデザインを届けられないのではないでしょうか。

私はフロントエンドの実装を行う側なので、IE11対応なども行っています。IE11はGrid Area未対応かつAutoprefixerでも対応できないので、Areaを伴う部分については全て手動でベンダープレフィックスを付与しています。正直に言ってかなり時間がかかりますし、辛い作業になりがちです。

ですが、ユーザーにとって必要なことでありビジネス上でも重要なことであれば、最新技術を取り入れて表現の幅を広げていくことはかなり重要なことだと思っています。

フロントエンドはなんとかするので、デザイナーさんは最適なデザインを生み出し続けてください!

おまけ
なぜnoteで書いたのかについて。
Increments買収というのをネット上で見かけ、Qiitaが消えるとは思えませんが一応別のプラットフォームを探そうということで、noteを使ってみました。

Carbonでコードを画像化して載せていますが、割と大変なので具体的なコードについて言及したい時は他サービスの方が良いかもしれません。文章を書きたい時はnote結構良いんじゃないかと思います。箇条書きしづらいのだけは改善して欲しいです。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

いつも読んでくださってありがとうございます。いただいたサポートは学習に使っています。

スキありがとうございます!励みになります!
9

Matsuda Yuichiro

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。