❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

使ったことありますか?display: grid; 画面レイアウトに使われるテクニックの比較

テクニック

Webサイトを作成する際、「画像の横にテキストを配置する」「画像を画面枠いっぱいに広げてその下にテキストを記載する」など、コンテンツを様々に配置して作成します。
各コンテンツを自在に配置できるようにする。それがWebデザインを行う方にとって最初の関門でしょう。

今回はよく使われる画面レイアウトテクニックと「display:grid;」を使ったレイアウトテクニックについて比較してみました。

当初は難しいと思っていても、一般的によく使われるコード文は決まっており一度覚えれば、その後Web制作をする上で特に困ることはなく作業ができるでしょう。そして、コーディングも含めてWeb制作に一通り慣れると、グラフィック作成ソフトの作業段階で大まかにどのようなコード文を書くか分かった上で作業ができるようになります。

この記事で伝えたいこと

Web制作は一度覚えると、覚えたやり方を踏襲すれば業務は卒なくこなせます。しかし、最新のプロパティがリリースされてもクライアントの閲覧環境では意図通りの挙動をしないなどの理由で、わざわざ新しい技術を取り入れるメリットがないケースも多くあります。

その結果、技術的に止まってしまうWeb制作者がいらっしゃいます。私自身も技術のアップデートが遅れていたと感じましたので、この記事を作成します。

画面のレイアウトテックニックについて

今回は画面をレイアウトする上でのテクニックを列挙しその考察をします。
例えば、図1のように多くのWebサイトで見受けられるこのような形をレイアウトする場合、

図1

レイアウトの方法として以下の方法がよく使われます。

■tableレイアウト

・HTML

などのようにタグを使って表を作り、各セルに画像やテキストを配置する方法でレイアウトします。私がWebの仕事を始めた当初はCSSが浸透した時期でしたが、まだ、tableレイアウトのWebサイトも見受けられました。

しかし、この方法は明らかに本来の用途と逸脱したタグの使用方法になり、当時から問題視されていました。現在では、このように用途を逸脱したhtmlを使用したWebサイトはSEOの評価も低く、検索順位が落ちる傾向にあります。

そのため、現在ではほぼ見かけることもなく、使う場面があるとしたら、SEOと関係ないメールマガジン制作時ぐらいに限定されます。

■CSS float プロパティ

・HTML

・CSS

などのように記述し、指定したコンテンツを画面の左右に寄せる方法で画面のレイアウトを行います。

この方法なら、CSSで画面のレイアウトを行うのでHTMLは本来の用途に即した使い方ができます。しかし、floatプロパティは指定した要素の隣にはテキストなど、下に記述された要素が表示されてしまい時には図2のように、意図しない回り込みが生じます。

図2

そのため、下の要素に回り込みを解除させるプロパティを指定する必要がありました。
現在はレイアウト用にはもっと最適なプロパティがリリースされたこともあり、回り込ませて表示させたいとき以外は使用しません。

また、

・HTML

・CSS

などのように、

shape-outside:circle();

プロパティを併用して円形に沿ってテキストが回りこむなどの使用もできます。
(図3参照)

図3

■フレックスボックス(フレキシブルボックス)

親要素に定義するだけで、その直下の要素が並列に並びます。
例えば

・HTML

・CSS

と記述するだけで、.content直下の要素が横並びになります。
更に、実装されているプロパティに、

  • 一行で表示、または折り返し表示をする設定。(flex-wrap)
  • 左揃え、右揃え、等間隔など、配置方法の設定。(justify-content)
  • 横並び、縦並び、また表示の順番は正順、逆順にする設定。(flex-direction)
  • 表示の順番をhtmlで記述した順番ではなく、指定した順番にする設定(order)

などがあり、従来のプロパティではできなかったことも指定できます。また、子要素のサイズや隙間を細かく指定しなくても自動で隙間を計算されて等間隔の配置ができたりします。

■グリッドレイアウト

フレックスボックスの後にリリースされたプロパティです。
親要素を縦横の2次元のグリッドで分割し、その中で各マスに合わせて子要素を配置してレイアウトします。

例えば、

・HTML

・CSS

などのように記載して、縦横のマス目を作成し、コンテンツを表示させるマス目を指定してレイアウトを行います。必要に応じて、隣のマスと結合させて大きくして使うなど、複雑な構成も作成できます。
考え方としては、tableレイアウトと似ていますが、CSSで設定するのでhtimlは本来の用途と逸脱した使い方をしなずに済みます。

また、フレックスボックスと同様に子要素の大きさや隙間を計算しなくても自動計算で等間隔の配置などできます。

近年のWebサイトはパソコンで見るだけでなく、スマホやタブレット端末など様々な環境で閲覧されるので、具体的な数値が入力することで、レイアウトが崩れてしまう事があります。そのため自動計算で細部の調整ができるレイアウト方法は
合理的であり現在のWebサイトはフレックスボックスか、グリッドレイアウトのどちらかで作られることが多いです。

フレックスボックス(フレキシブルボックス)とグリッドレイアウトの比較

例えば、図4のようなレイアウトを作る場合。両者のコードを比べてみました。

図4

●フレックスボックスの場合
・HTML

・CSS

●グリッドレイアウトの場合
・HTML

・CSS

など、このようになります。

どちらのコードも同じ物を表現できますが、細部を見ると。

フレックスボックスのレイアウトは基本的に横または縦方向の一方向に揃えます。

そのため

  • 1番3番を一つのdivで括り、この塊と2番で横方向に並べる。
  • 4番5番6番を同じdivで括り、折り返し表示の設定を行う。
  • 4番5番6番それぞれに幅の指定をする。

など、CSSで定義する要素も増えます。

また、レスポンシブデザインとして作り、スマホ版のレイアウトにする場合は、display:flexを解除して1カラムの構造にするケースが多くあります。しかし、このようなHTMLの記述では、1、3、2という並び順になってしまい、これを正すため、またCSSで別の定義をする手間が生じてしまいます。

一方、グリッドレイアウトはコンテンツをCSSだけで座標指定できるので、htmlに余計な記述をする必要がありません。また、同じくスマホ版のレイアウトをする際display:grildを解除するだけで1、2、3と自然に並びます。なのでスムーズな切り替えができます。更に、CSSで座標指定しているので、パソコン版、タブレット版、スマホ版など、様々な端末に合わせたレイアウトが作りやすいという利点もあります。

そのため、

レイアウトの骨組みはグリッドレイアウトで作成し、グリッドの中のアイテム内を横並びに配置するときにフレックスボックスを使う。

という構成にすると効率よくページが作れそうです。

まとめ

Webページを構成する際レイアウトは冒頭の図1のようなレイアウトが多いです。

このような単純な形であればフレックスボックスとグリッドレイアウトに大差はありません。また、近年のWebサイトはパソコン版よりスマホ版の方が重要視されるので、図4のような複雑にオブジェクトを配置するデザインを作る機会は少ないです。

そのため、フレックスボックスを覚えてしまえば特に業務上支障をきたさないことが多いでしょう。しかし、Web技術は日進月歩で進みますので技術の取りこぼしがないように新しいことを学ぶのは大切なことです。今後も定期的に新しい技術に触れるよう心がけたいと思います。

この記事を書いた人
kanazawaのアイコン

kanazawa

長年webデザイナーをしておりました。業務の幅を広めるため日々勉強しています。