2024年11月10日
これでOK！フレックスボックスとグリッドの使い分け
2025年12月5日 / WEBデザインTIPS
レスポンシブも楽になる！コーディングに大切な3つの考え方
※この記事は 2 分程度でお読みいただけます。
WEBサイトをコーディングしていると、思い通りの配置になってくれない、一か所を直したら他の箇所がおかしくなった、パソコンでは表示できるけどスマートフォンでは崩れてしまうなど、悩みはいろいろ絶えません。特にコーディングを学習しはじめのころは、頭をかかえることも多いのではないでしょうか。
今回は、コーディングをしていくうえで、とても大切な3つの考え方を解説していきます。特に最近は、パソコンやスマホ、タブレットなど、異なる大きさの画面でも表示が崩れないレスポンシブデザインでWEBサイトをコーディングしていくことが求められます。この3つの考え方を意識すれば、通常のWEBサイトだけでなく、レスポンシブのコーディングをする際も、今よりずっと楽になります。
目次
＜その1＞ 箱（入れ物）を意識して考える
まずはじめが、箱（入れ物）を意識して考えることです。コーディングには、HTMLとCSSというプログラミング言語を使いますが、HTMLが文字や要素を入れる箱（一部例外あり）、CSSが箱のスタイルやレイアウトを整える役割を持っています（詳しくはこちら）。
つまり、画面のなかに表示されているものは、基本的にはHTMLで何かしらの箱に収まっている、ということです。箱の種類はいくつかあって、それぞれで挙動が変わってきます（詳しくはこちら）。
ひとつひとつのパーツに注目してしまうと失敗する
例えば、下のデザインをコーディングしていく時には、どのように考えていくでしょうか。
まず、コーディングをはじめたばかりの方だと、それぞれのパーツ（赤枠）を見て、それらをどのように配置していこうか、と考えることが多いと思います。パーツひとつひとつを、別のものとしてとらえています。
それぞれのパーツに注目し、それをどうやって中央に持っていくか、どうやって左右に配置するか、どうすれば要素の上がそろうのか、と考えていく。決して間違いではないですが、この視点で考えてしまうと、配置がずれたり思い通りにならなかったり、うまくいかないことが多くでてきます。
まずは箱から考えよう
これを、少し視点を変えて、箱を基準に考えてみます（箱の階層が分かりやすいように色分けしていますが、要素の種類の違いを表したものではありません）。
いかがでしょうか？ だいぶコーディングがイメージしやすくなったのではないでしょうか。「h」「p」「div」などの多くのHTMLタグ（ブロック要素）は、何も指定しなければ、親要素の横幅いっぱいの箱として配置されます。HTMLは基本的に上から下に配置されていきますので、外枠になる箱だけをしっかりとつくってあげれば、そのなかの要素は、HTMLで順番に書いていくだけで、縦に積み重ねられていきます。
大きさの違う小物をたくさん買ってから棚を用意しても、なかなかきれいに収納できません。まずは大きな棚を用意して、ざっくりとした入れ物をつくってあげてください。さらに細かい収納が必要であれば、仕切った棚のなかに、小さい棚を置いてあげてください。棚に小物を収納するのは、それからです。
棚の形と大きささえ決まってしまえば、あとは小物をつめ込むだけです。すでに棚がしっかりある状態なので、収納したい場所に小物をてきとうにつめ込んでも、はみ出たりずれたりすることはありません。
このように、配置するパーツから考えはじめるのではなく、まず外側の箱から考えていきましょう。全体を囲むどういった箱が必要なのか、箱をどのように分割するのか、さらに小さい箱は必要か、箱の中身を左右中央どこに配置するのかなど、外から外から決めていってください。
HTMLでは、現実世界の重力とは反対に、箱は上に上に積まれていきます。どうやって箱を上からきれいに並べていくかを意識することで、コーディングへの理解はぐんと深まっていきます。この箱の構造がそのままHTMLの構造になります。「h（見出し）」「p（段落）」「div（それ以外の箱）」など、箱に入れる要素によって、HTMLタグの種類を変えながら、ページを組み立てていってください。
さらに慣れてくると、そもそも箱に収まりやすいデザインを考えられるようになっていきます。デザインの段階で箱が意識できるようになると、コーディングがもっともっと楽になっていきます。
＜その2＞ 横幅や縦幅はできる限り指定しない
現在、コーディングをする際には、スマホやタブレット、パソコンなど、異なった横幅のデバイスで表示することが考慮されます。いわゆる、レスポンシブデザインといわれるものです。
レスポンシブでコーディングをする時には、要素の幅がどのように変化していくのかを、しっかり理解することが必要になってきます。まず、要素（箱や中身）の横幅は、画面の横幅によって変わります。パソコンなど大きい画面で見れば写真の横幅は広くなりますし、スマホなどの小さい画面でみれば横幅は狭くなります。写真や画像だけでなく、段落や見出しの箱なども、画面サイズに応じて横幅が変化していきます。
縦幅も同様です。写真の横幅が狭くなれば、縦幅ももちろん狭くなります。段落の横幅が変われば文章の改行の位置が変わるので、縦幅も変化していきます。
このように、レスポンシブデザインにおいては、幅はかなり流動的に変わっていきます。Figmaなどのグラフィックツールでデザインをして、そこからコーディングをしようとすると、ツール上では横幅と縦幅の数値が表示されているので、どうしても数値で指定したくなってしまいます。
しかし、ここはぐっとこらえてください。特に縦幅は、ほとんどのケースで指定しなくても問題ありません。
箱の幅は「max-width」で指定
画面内に配置する要素の幅を、Figma上で指定されている数値（pxなど）で指定しながらコーディングをすると、レスポンシブで必ずといっていいほど問題が起こります。スマホで画像がはみ出てしまった、パソコンで余計な隙間ができてしまった、テキストが枠からはみ出てしまった。これらの多くの問題は、固定値で幅を指定したことが原因で起こります。
これらの不具合を防ぐひとつのやり方として、まず考えられるのは、表示される画面サイズごとにメディアクエリで横幅の指定を変更するやり方です。ですが、このやり方の場合は、ブレイクポイントごとにすべての幅を指定し直さなければならないです。また、デバイスのサイズ（画面が大きめのスマホなど、中間的なサイズ）によっては、想定していない挙動を見せることもあります。何よりソースコードが複雑になっていくので、このやり方を多用するのはあまりおすすめできません（状況によっては使えることもあります）。
では、幅を固定値で指定せずに、どのようにページ全体や要素の横幅を制御していけばよいのでしょうか。もっとも使うことが多いのが、CSSの「max-width」プロパティです。「max-width」は、要素の最大横幅が指定できます。例えば、class名「.name」と指定された要素に、
.name {
max-width: 1200px;
margin-left: auto;
nav-right: auto;
}と指定します（「margin-left」と「margin-right」は、要素を画面の中央に配置するために指定。詳しくはこちら）。すると、最大横幅を1200pxで指定しているので、
- パソコンなど横幅が広い画面では、1200pxで表示（それ以上には広がらず、左右中央に配置される）
- スマホやタブレットなど横幅が1200pxより狭い画面では、画面の横幅いっぱいで表示（ブロック要素の初期状態の「width:100%」で表示）
という挙動になります。要素の大きさを画面の横幅にあわせつつ、一定の横幅になったらそれ以上は広げないということができます。この指定であれば、画面サイズごとに横幅を指定し直す必要が一切なくなります。
横並びはグリッドの分割方法で解決
次に、横並びの要素です。横に要素を3つ並べたい、ページをサイドメニューエリアとコンテンツエリアに分割したいなど、横並びでレイアウトを行うことがあります。これらの指定はずばり、グリッドで行うと便利です（詳しくはこちら）。
例えば、Figma上で全体の横幅が1200pxの要素に、横幅が380pxの要素を横に3つ並べ、要素間に30pxのスペースをつけるとします（380px×3 + 30px×2 = 1200px）。これも、それぞれの横幅を固数値で指定してしまうと、たとえば横幅1000pxの画面サイズで見た時に、要素全体が画面サイズよりも大きくなり、画面からはみ出してしまいます。
この場合は、親要素（.name）に対して、
<!-- HTML -->
<div class="name">
<div class="item">3等分にしたい要素①</div>
<div class="item">3等分にしたい要素②</div>
<div class="item">3等分にしたい要素③</div>
</div>/* CSS */
.name {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}と、グリッドの分割方法を指定します。これで、子要素（.item）が全体を3等分して横並びで表示されます。グリッドは、子要素の幅を比率で指定することができるので、2等分や3等分のレイアウトはかんたんにできます。
さらに「gap」で要素間のスペースを指定できます。このようにすれば、子要素の横幅は自動で計算され、親要素の横幅が狭くなった場合でも、要素間のスペースは保ったまま、現在の親要素の横幅を3等分して表示してくれます。
サイドメニューを設置するケースは、次のようになります。
<!-- HTML -->
<div class="name">
<div class="side">サイドメニューのエリア</div>
<div class="contents">コンテンツのエリア</div>
</div>/* CSS */
.name {
display: grid;
grid-template-columns: 240px 1fr;
}この指定では、サイドメニュー側の子要素（.side）は240pxで固定し、それ以外がコンテンツエリア（.contents）となります。画面サイズが狭くなった場合は、サイドメニュー側の240pxは保ったまま、コンテンツエリアだけが自動で調整されて狭くなります。
これに「max-width」を組み合わせれば完成です。パソコン時の最大横幅を指定した、横に分割された箱のできあがりです。
親の箱にあわせて勝手に調整！「100%」や「auto」を上手に使おう
ここまでくれば、あとはかんたんです。外側の箱はできたので、あとは箱のなかに要素を入れていくだけです。ここでのポイントは、要素は箱の大きさにあわせて勝手に調整されるようにしておくということです。
「div」や「p」などのブロック要素は、基本的に親要素いっぱいの横幅になるので、指定は特に必要ありません。画像を箱に入れる場合、もし箱の横幅いっぱいに表示するなら、
<!-- HTML -->
<div>
<img src="photo.jpg" alt="" class="name">
</div>.name {
width: 100%;
height: auto;
}と、横幅に「100%」指定します。縦幅は画像の横幅にあわせて自動調整されればよいので「auto」を指定します。これだけで、箱の大きさにあわせて勝手にサイズが変わる画像のできあがりです。
少し補足になりますが、CSSのなかで
img {
max-width: 100%;
height: auto;
}という指定を、リセットCSSの一部として初期設定されている方がよくいらっしゃいます。自分自身もリセットCSSにこの指定を入れてありますが、この指定は、
- 画像の最大幅は親要素の100%（親要素より大きくしない。箱からはみ出させない）
- すべての「img」に「height: auto」（高さは自動調整）
というもので、この指定が効いていれば、画像ごとに横幅「100%」や縦幅「auto」などを毎回指定する必要もなくなります。
最後にさくっとレスポンシブ対応！
それでは、これらを踏まえたうえで、コーディングをどのように考えていけばよいか、先ほどのサンプルで解説していきましょう。
上はひとつの例ですが、このやり方なら、要素の横幅の指定が必要なのはロゴ画像の1か所のみ、縦幅を指定するのはキービジュアルの1か所だけです（場合によってはいらない）。それ以外は、すべて「max-width」と「grid」で指定ができます（メニューだけフレックスボックス）。
特に補足をしていない要素は、特別な指定が必要ない部分です。幅は箱の大きさにあわせて、自動で調整されていきます。
さらに、レスポンシブでスマホの表示に対応してみましょう。
パソコンからスマホの順番（PCファースト）でコーディングを進めた時、メディアクエリで変更が必要なのは、メニューの表示などを除くと箱の配置の仕方（グリッドの分割方法）だけです。それ以外の箱の構造や配置は変わりません。中身はすべて箱にあわせて自動で調整されるので、あとは文字のサイズや余白、スペースなどを微調整するだけです。これだけで、レスポンシブ対応は完了です。
＜その3＞ とにかくシンプルに考える！
最後にいちばん大切なのが、コーディングはとにかくシンプルに考えることです。
これまで解説してきたとおり、WEBページは、構造的にかなりシンプルなつくりになっています。箱をきれいに並べて、中に要素を入れていく。破綻しないように、整列しながら積んでいく。
これを、最初に書いたように、パーツから配置を考えはじめたり、あれこれこねくり回して考えすぎると、どんどんソースコードが複雑になって手が付けられなくなってしまいます。そもそもHTMLやCSSは、記述方法がとても簡潔なプログラム言語なので、わざわざ複雑にする必要はありません。
箱を外から考えていく、幅はできるだけ指定しない、この2つを意識してシンプルなコーディングを心がけてください。これだけで、驚くほどコーディングが上達していくと思います。
複雑になるくらいなら、いさぎよく箱を追加しよう
さらにWEBデザインを続けていくと、少し複雑なレイアウトをするケースがでてきます。この時も、シンプルに考えるという鉄則は忘れないようにしてください。
ひとつの箱で、あれこれしようとがんばらなくても大丈夫です。例えば、サイト全体を下のように分割したレイアウトにするとします。
これは、グリッドの教材などでよく見られるレイアウトです。グリッドはこのように、箱の縦横に仕切りをつくって複雑な構造にすることができます。しかし、このレイアウトを1つの箱で実現するには、箱を縦横に分割したり、一部の仕切りをはずして連結させたりと、いくつかの設定を組み合わせる必要があります（グリッドを使いこなせれば、できなくはないです）。
これは、ずっとシンプルにこのように考えてしまいます。
まず、ヘッダーとフッターの箱を切り離してしまいます。これで、ヘッダーとフッターは単純な箱として扱えます。そして、真ん中のエリアだけ、グリッドで横に分割します。サイドメニューとバナーエリアは縦並びなので、何も考えずに重ねてしまえばOKです。
この構造にすれば、真ん中の箱を横に分割するだけで、それ以外はすべて普通の箱として使えることになります。横並びのグリッドも、横方向の分割だけならかんたんにできます（詳しくはこちら）。HTMLのソースコードが若干増えますが、それほど大きい影響はでませんし、別の箱にしてしまったほうが、レスポンシブにする際の取り回しがしやすいこともあります。
次のケースを見てみましょう。コンテンツの横幅が決まっているデザインで、一部だけ背景色をつけたい、というケースです。
これはすごくかんたんです。コンセプトのエリア囲む大きな箱（紫色の箱）をつくってあげればいいだけです。
これもやはり、コンセプトの箱でどうこうしようではなく、いさぎよく大きな箱を追加しましょう。この箱に対して背景を指定すれば、画面の横いっぱいに広がる背景付きのブロックができあがります。
最後は、これまで解説してきたサンプル画面の指定を、もっとシンプルにする考え方です。構造の例では「お知らせ」「コンセプト」「メッセージ」の部分、それぞれに「max-width」を指定していました。ですが、もしページのコンテンツすべてが同じ横幅なのであれば、ひとつひとつではなく、全体を大きな箱に入れてあげて、そこに「max-width」を指定すれば、ページ全体の横幅をそろえることできます。
このように、すべてをひとつの箱で完結させようとせずに、ご自身が理解しやすくやりやすい箱の置き方で、ページを組み立てていってください。箱を分けたり、大きな箱を追加したり、シンプルにきれいに箱を配置していくことで、ページの構造も、ソースコードもぐっと分かりやすくなっていきます。
難しく考えすぎず、箱積みのパズルゲーム（ただし下から上に箱が落ちていく）をしている感覚で、シンプルな入れ物を組み合わせていきます。これで、コーディングが難しくてなかなかうまく進めなかった方でも、WEBデザインがもっと楽しくなっていくと思います！
いつでもご相談ください！
ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。
フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。
