読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

リキッドレイアウトにおすすめ「グリッドレイアウト」の作成方法

grid2 - リキッドレイアウトにおすすめ「グリッドレイアウト」の作成方法

webデザインの業界で最近はデザイン手法にもトレンドがあります。その時々によって、全体構想が変わったり、アニメーションを加えたりなどの流行があります。

今回は、今のWebデザインの流行である。カードなどのブロック要素を用いたデザイン手法を紹介していきます。

グリッドレイアウトとは

知らない方のために、簡単に説明をしておきます。

グリッドレイアウトとは、サイトの幅と高さから、デザインの大枠を「四角形(格子)」に分解して構成したレイアウト手法です。

Googleの提唱しているマテリアルデザインで使われている「カード」の概念とも、非常に相性がいいと言えます。

リキッドレイアウトの簡単な説明

リキッドレイアウトとは、画面の表示幅に応じて相対的に指定したり、レイアウトの配置を変えたりするレイアウト手法です。

とはいえ、これでは覚えにくいので、他のレイアウト手法とは「幅をパーセントで指定する」という点が違うと考えてください。

グリッドレイアウトの例

イメージを掴んでもらうために、グリッドレイアウトの例を紹介していきます。これを見ると、なんとなく見たことがあるなという感じになると思います。

RECRUIT

recruit - リキッドレイアウトにおすすめ「グリッドレイアウト」の作成方法

URL:https://r.recruit-jinji.jp/

ここでは、余白が無いグリッドレイアウトが使われていますね。

カントリーマアム

gridrayout2 - リキッドレイアウトにおすすめ「グリッドレイアウト」の作成方法

URL:https://www.fujiya-peko.co.jp/countrymaam/

このサイトでは、グリッドレイアウトの中にスライドショーが埋め込まれています。

劇団四季

gridrayout3 - リキッドレイアウトにおすすめ「グリッドレイアウト」の作成方法

URL:https://www.shiki.jp/

このサイトでは、グリッドレイアウトの中に横幅いっぱいの使い方を取り入れています。

ちなみに、この記事を書いた時点での、このサイトのトップページのデザインもグリッドレイアウトを導入しています。

メリットとデメリット

グリッドレイアウトの細かい作成方法に入る前に、これを使うメリットとデメリットを知っておきましょう。

メリット

  • 同じようなコンテンツを配置しやすい
  • レスポンシブ対応が非常に楽
  • 画像メインなのでアニメーションとの相性が良い
  • マテリアルデザインが導入しやすい

とにかく、四角形が使いやすいのが特徴でしょう。

レスポンシブ対応しやすかったり、アニメーションとの相性が良いというメリットがあります。

デメリット

  • 画像が重要になる
  • 上手くテキストが入れられないと、何のコンテンツか分からない

とにかく、画像がメインになるので、いい画像が準備できないと全体的にダサく見えます。

あとは、最初からテキストが記載されていたりしないと、そのコンテンツが何を意図したものなのかが伝わりにくいです。

グリッドレイアウトの作成方法

それでは、実際のグリッドレイアウトの作成方法です。

最後のCSSで各部分は省略してしまってますが、現在はdisplay:gridを使った方法などもいろんな方が紹介されています。

1.縦横をグリッド(格子)で区切る

まずは、縦幅と横幅をグリッド(格子)で区切りましょう。「縦幅」「横幅」「縦の格子数」「横の格子数」を決めると自然と決まってきます。

grid - リキッドレイアウトにおすすめ「グリッドレイアウト」の作成方法

2.グリッドを使いたいサイズで結合する

次は、グリッドを結合していきます。人によっては、ひとつも結合しないで使いたいという場合もあるかと思いますので、その場合は次に進んでください。

grid2 - リキッドレイアウトにおすすめ「グリッドレイアウト」の作成方法

3.余白を揃える

次は、余白を揃えましょう。もちろん、くっつけて表現したい場合は、余白を0pxに指定していくといいです。

この時、横幅は%指定がしやすいので楽なのですが、縦幅は%指定がしにくいので大変です。

僕のオススメとしては、余白だけはpx指定をしてしまう方がいいかなと思っています。

  • width:%指定
  • height:px指定
  • margin:px指定

こんな感じでしょうか。もっと良い方法があったら紹介してください。

4.CSSで実装する

最後に、ここまで決まったらCSSで実装をしていきます。

ここは、この記事では省略してしまうので、以下の方々の素晴らしい記事を参考にしてください。

僕はdisplay:gridが上手く使いこなせない時があるので、半ば無理矢理CSSで組むことがあります。

まとめ

いかがでしたか?今回は、リキッドレイアウトの中で、最近のトレンドを抑えたレイアウト手法の「グリッドレイアウト」を紹介しました。

このレイアウトはすぐに実装できるようになると、どんな場面でも使いやすいし、レスポンシブ対応もスムーズにできるものなので、慣れてしまうといいかと思います。

マテリアルデザインとの相性もいいです。このサイトでも取り入れているので、参考にしてみてくださいね。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら