フレキシブルレイアウト作り方！超初級編

2023年08月04日

html＆css

本日はフレキシブルレイアウト（マリオ君独自のなんちゃってフレキシブルです）の作り方をご紹介させていただきます。超初級編ということで、ポイントのみ解説させていただきます。

こちらの記事は弊社新人webデザイナーに伝えたことを記事にしたもので、内容がかなり「マリオ君」独自の偏見と考え方であることと、初心者様向けに書いておりますの、そちらはご了承ください。
細かいことは気にせずにまずは作れるようになろうぜ！って感じの記事です。
※一般的な考え方と異なる場合がございます。

フレキシブルレイアウト気になるね
ポイントだけ知りたい
記事は若干いい加減でもいい
少しでも為になれば

フレキシブルレイアウトって何？

ホームページは現在パソコンサイトだけでなくタブレットやスマホの対応が必須となっています。

1つのHTMLファイルでどの機器のブラウザ（パソコン・スマホ・タブレット）で見ても見やすくする方法でデザインすることをレスポンシブデザインと言います。

フレキシブルレイアウトはレスポンシブデザイン（どのブラウザでみても見やすいデザイン）の手法の一つとなります。最大の横幅をmax-widthで決めて、その最大幅の中で、中の要素を可変で100％で表示させます。

その他には、すべてのブラウザで横幅いっぱいで表示させるリキッドレイアウト（フレキシブルの最大の横幅を決めないレイアウト）やグリッドレイアウト（すいません作ったことないので詳しくありません）やブレイクポイントで切り替えるレスポンシブレイアウトなどがあります。

弊社の制作しているフレキシブルデザインは横幅の最大値（max-width)を決めて、ブレイクポイントでレイアウトの変更とフォントの変更をしております。フォントサイズは可変ではなくブレイクポイントでのみ変更しています。※レイアウト崩れ等が起こる場合は他にもブレイクポイントを作って対応

レスポンシブデザインのメリットはこちらをご覧ください

フォントサイズを可変にしたい場合は下記に詳しく書いていますのでこちらをご覧ください。

clamp使い方　cssフォントサイズで使ってみる

フレキシブルレイアウト制作時のポイント紹介

それではフレキシブルレイアウト作り方！超初級編ということで、ポイントのご紹介をさせていただきます。

viewport入れよ、とにかく入れとこ
CSSでimgは横幅100％で
一番外の横幅最大サイズきめよ
中の要素の横幅は基本%でね
ブレイクポイントきめよ
メディアクエリでCSSきりかえよ
画像サイズは最小780px以上を意識して
こまったらディスプレイnoneで消しちゃえ
自分でハードル上げないで

viewport入れよ、とにかく入れとこ

はい,viewportです。説明はもはや不要のレスポンシブデザインには欠かせないコードですね。とにかく何も考えずにいれておきましょう。弊社はデフォルトで入れております。

<head>～</head>の中に書きましょう。

<meta name="viewport" content="width=device-width,initial-scale=1">

詳しくは私も知りませんが、デバイスに合わせて表示領域（viewport)を設定してくれます。

ようするに色々な端末に合わせてうまく調整してくれるやつです。

レスポンシブデザインはviewportをとにかく入れる

CSSでimgは横幅100％で

CSSのimgは横幅100％を指定して伸縮可能な状態にしましょう。伸縮可能がポイントです。

img{
	
	width: 100%;
	height: auto;
}

画像の横幅に100％を入れていないと、写真そのままのサイズが表示されてしまい、見ている端末の横幅が写真より狭い場合は、はみ出てしまい横スクロールが出てしまいます。

横幅を100%で画像を入れると見ている端末の画面内でいっぱいにぴったり入ります。

写真を横並びにする際などは個別に囲っているタグなどにサイズを入れて調整してください。
下記は上記右端の画像の例です。

	<ul>
		<li><img src="img/himawari.jpg" alt="ひまわり"></li>
		<li><img src="img/himawari.jpg" alt="ひまわり"></li>
	</ul>

img{
	
	width: 100%;
	height: auto;
}
ul{
	//子要素を横並びに
	display: flex;
	justify-content: space-around;
	
	li{
		width: 40%;//囲っているタグで横幅を調整
	}
}

imgの横幅は100%が基本

一番外の横幅最大サイズきめよ

フレキシブルレイアウトは最大の横幅を決めます。

ここで使用するのがmax-widthです。
max-widthは上限を設定できてそれ以下は可変する感じです。
一番外に書いているdivタグなどにmax-widthでサイズを指定してください。
最大の横幅数はお好みでよいのですが、おすすめは1200px～1500pxぐらいです。

大きすぎると、リキッドレイアウトみたいになってレイアウトが大変になりますし、小さすぎると最近のパソコンは大きいのが多いので、物足りなさを感じてしまうので1200px～1500pxがおすすめです。
また％でもいいのですが、めちゃくそデカいモニターもありますので、pxがおすすめです。

※widthでpxで入れてしまうと、可変になりませんので、必ずmax-widthで書いてください。

.box{
	//一番外の要素
	max-width: 1300px;
	margin: 0 auto;//中央寄せ
	
}

一応中央寄せのマージンも入れてみました。

max-widthで横幅を入れる。

中の要素の横幅は基本%でね

一番外側の要素にいれる横幅の最大サイズはpxでいいのですが、中の要素はなるべく%(可変になる）で制作しましょう。

pxで制作しても大丈夫ですが、ブレイクポイントとの兼ね合いを考えながら記述しないといけないので、初めのうちは％がおすすめです。

小さいサイズはpxでも問題はありません。基本的に最小の横幅は320px（昔のiphoneの小さいやつ）を想定していますのでそれ以下だとpxでも横スクロールが出ないので大丈夫です。

あと、アイコンとかもpxでＯＫですね。

また、デザインカンプはpxで制作していて％に変換するの計算大変だと思うかもしれませんが、下記のサイト様の様に計算してくれるサイトもありますので、ぜひ使ってみてください。

pxから%に変換してくれるサイト様はこちら

中の要素は基本的には％で、小さいやつはpxでもOK

ブレイクポイントきめよ

ブレイクポイント（CSSを切り替えるポイント）ですが、これは1つで大丈夫です。

それは

768pxです。

ブレイクポイントは考え出したらきりがないので、初めのうちはブレイクポイントは768pxの1つで問題ないと思います。

正直マリオ君のメインのブレイクポイントは一つです。制作に慣れくれば、複数のブレイクポイントを作り様々なサイズできれいに見えるよう調整でいいと思います。

中の要素の横幅を％で作っておけばそれなりにきれいに見えますのでOKです。

クライアントの要望がある場合は、4つにわけて制作する場合もございますが、基本一つで対応しています。

ブレイクポイントは768px一つでも戦える

メディアクエリでCSSきりかえよ

上記でブレイクポイントを決めましたので、ブレイクポイントの数値でメディアクエリを使用してCSSで切り替えて調整します。
基本的にはまず全体を作って、次に768px以下でフォントサイズ（文字をスマホ用に小さくしたり）やレイアウト（フロートで横並びにしていたものを縦並びに）を変更したりします。

このときに、ブラウザの幅を大きくしたり、小さくしたりして、見ずらい部分がある場合は別途ブレイクポイントを作って、調整してみてください。

	@media screen and (max-width: 768px){
		//768px以下に適用させたいものは下記に
	
	}

max-widthは右の数字以下を意味しています。ちなみにmin-widthにすると右の数字以上という意味になります。

使用例はこんな感じ

<div class="box">
	<h1>サイトのたいとるがはいるぜ</h1>
	<ul>
		<li><img src="img/himawari.jpg" alt="ひまわり"></li>
		<li><img src="img/himawari.jpg" alt="ひまわり"></li>
	</ul>
</div>

img{
	
	width: 100%;
}

.box{
	//一番外の要素
	max-width: 1300px;
	margin: 0 auto;//中央寄せ
	
}
h1{
	
	font-size: 1.7rem;
	@media screen and (max-width: 768px){
		//768px以下はフォントサイズを1.5rem
		font-size: 1.5rem;
	}
}
ul{

	display: flex;
	justify-content: space-around;
	@media screen and (max-width: 768px){
		//768px以下はflexwを解除
		display: block;
	}
}
li{
	width: 40%;//囲っているタグで横幅を調整
	@media screen and (max-width: 768px){
		//768px以下は横幅を100％に
		width: 100%;
	}
}

ブレイクポイントの768以下で変わっているのはh1のフォントサイズが1.7から1.5remに小さくなっています。

次にulにdisplay:flex（子要素を横並びにする）をblockにして横並びを解除しています。

これは、ブレイクポイントでかなり使いますので、覚えておいてください。
※横幅が小さくなると、横並びにしている要素が小さくなりがちなので、横並びを解除する

他には4列並べていたもの横幅が小さくなったので2列にするなどもよく使います。

768pxのメディアクエリでスマホ対応のCSSを書く

画像サイズは最小780px以上を意識して

ホームぺージに使う画像サイズは780px以上を意識して作りましょう。（アイコンなどは除く）

本当は使用箇所に合わせて、srcretを使用したりして、画像を使用するサイズで適切に使用するべきですが、初めのうちは、780pxを最小値で制作して問題ないかと思います。

「せっかく端末に合わせてレイアウトを変えているのに画像がかすれていたらもったいないじゃん」
ていうのがマリオ君の考え方です。

このサイズは、よく使われるスマホのサイズが現在は390pxといわれていて、その画面できれいに映るサイズは倍の780pxなので780pxを最小としています。
※iphoneなどは解像度が高いため画像をきれいに表示させるには表示させたいサイズの倍の大きさの画像が必要になります。

始めは780px以上で作っておいて、制作になれてきたら、適材適所で、画像のサイズを計算して表示速度を意識した画像を使用するという流れでよいかと思います。

アイコンとかはパソコンサイトで使用する倍のサイズで制作しておけば問題ないです。
※パソコンサイトで15pxで使用する場合は30pxで画像を制作、またはSVGで書き出し

少々画像は大きくても問題ない

こまったらディスプレイnoneで消しちゃえ

スマホで見たら画像が小さすぎて読めなくなっている場合でPCとスマホの画像を切り替えたい時や、パソコンにはたくさんの情報を載せたいけど、スマホだと画面が小さいので一部を非表示にしたい時などそんな時はディスプレイnoneで消しちゃいましょう。

パソコンでの表示・非表示、スマホでの表示・非表示のCSSを作って、消したりつけたりすればOKです。

.pconly{
	
	@media screen and (max-width: 768px){
		
		display: none;

	}
}

.sponly{
	
	display: none;
	@media screen and (max-width: 768px){
		display: block;
	}
	
}

クラスpconlyは768px以下で非表示に、クラスsponlyは768以下で表示する様なCSSを作って、パソコンだけ表示されるCSSと、スマホだけで表示させるCSSを作って切り替えましょう。

まとめると、一つのHTMLファイルで作っているから、なんでも一つで終わらせようと無理をせず、困ったらPC用とスマホ用を２つ書いて表示・非表示で切り替えてOKです。多様するとレスポンシブデザインの意味がなくなってしますので、困った時だけの必殺技で使いましょう。

困ったら消していいし、切り替えていい

自分でハードル上げないで

最後は自分でハードルを上げないでってことです。

「レスポンシブデザインってなんか難しいと思っていて作ろうと思わない」
「やること多そう」
「ブレイクポイントどうしよ」
「画像のサイズどうしよ」
などと思っていませんか？

確かに細かくすると難しいですし大変ではありますが、初めからやることを増やしすぎず、上記で述べたように簡素化するとそんなにハードル高くないと思いませんか。

■ブレイクポイントはまず1つから、むしろ一つで戦える
■最大の横幅を決める
■中の要素は基本％
■メディアクエリでCSS切り替える
■画像サイズはとりあえず780px以上で、慣れてきたら最適化する
■こまったらディスプレイnoneで表示・非表示

これを頭に入れておくだけで、やることそんなにないじゃん。私でも行けそうじゃんってなりますよね。

作ってみたら、意外にいけるんです。

はい。以上がフレキシブルレイアウト（マリオ君独自のなんちゃってフレキシブルです）の作り方をご紹介させていただきました。

社内用の内容で、雑な内容で恐縮でしたが、まとめると、とにかく簡素化して作って、慣れてきたらもっとスムーズに作ろうぜって感じの内容でした。

また下記にてレスポンシブ用のテーブルレイアウトを紹介した記事を書いておりますので興味のある方はご覧ください。