wrapperを使いこなそう！コンテンツ幅とレスポンシブデザインの基本

みなさん、こんにちは！

書いたコードがデザインカンプ通りにピッタリハマると嬉しいですよね。

でも、デザインと全く同じを目指すばかりに、コンテンツの横幅を1200pxなどと指定していませんか？

そのような指定の仕方をしてしまうとウインドウ幅が変化した時に崩れの原因になってしまいます。

「ウィンドウ幅が変わったとき、どうなるんだろう？」と考えるのは、次のステップに進む大事なポイントです。

今回は、「wrapper」を使ったコンテンツ幅のコントロール方法、特にwidthとmax-widthを組み合わせるテクニックを紹介します。

wrapperって何？

「wrapper = ラッパー」は、ページのコンテンツを「包む」ためのコンテナです。

通常、<div class=”wrapper”>のようにHTMLで定義し、CSSで幅や配置を調整します。

これを使うと、コンテンツの最大幅を決めたり、画面サイズが変わってもレイアウトを整えたりできます。

たとえば、デザインカンプに「メインコンテンツの幅は最大1200px」と指定があった場合、wrapperを使えばその通りに再現しつつ、ウィンドウ幅の変化にも対応できます。

練習用の簡単なサイトでは必要性を感じることは少ないですが、wrapperは必ず作るものと認識していいと思います。

ボタンや見出しなどもそうですが、同じものはなるべく共通化しておかないと後で調整が必要になった際に大変な思いをすることになりますからね！

widthとmax-widthで柔軟なwrapperを作る

基本のwrapper

私がよく使う方法を例に、基本のwrapperを見てみましょう。

<div class="wrapper">
 <h1>こんにちは！</h1>
 <p>ここに本文が入ります。</p>
</div>

.wrapper {
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
}

width: 90%

画面幅の90%を基準にすることで、ウィンドウサイズに応じてコンテンツ幅が柔軟に変化します。

たとえば、1000pxのウィンドウなら900pxになり、余白が自然にできます。

90%の数字の部分は当然任意に変更してOKです。

SPデザインでは多くの場合、横幅は同じになりますので、私はSPデザインの横幅を%にして入れることが多いです。

max-width: 1200px

幅が指定の大きさを超えないよう制限します。

大きな画面でもコンテンツが広がりすぎず、デザインカンプ通りの見た目を保てます。

ノートPCで作業しているとウインドウ幅を大きくした時のことを見落としがちです。

カンプよりもウインドウ幅が大きくなった場合にコンテンツ幅を制限することは大事です。

margin: 0 auto

wrapperを中央に配置し、左右に均等な余白を作ります。

ポイント

widthを%で指定することでウインドウ幅に対して一定の余白をつけることができます。

今回の例で言うとコンテンツ幅は90%なので、余白は左右に5%ずつですね！

ウインドウ幅が小さくなった場合、上でもありましたがウインドウ幅が1000pxとなった時には1000px×90%なので900pxのコンテンツ幅となります。

余白は左右に50pxずつですね。

逆に大きくなった場合はどうでしょうか。

1500pxになった場合、1500px×90%=1350pxとなります。

ここでmax-widthを設定していると1200pxに制限されるのでコンテンツ幅を制御できます。

widthとmax-widthではさみ撃ちにする！

ウインドウ幅が小さい時にはwidthの数値で、大きくなった時にはmax-widthの数値ではさみ撃ちにしましょう！

この方法なら、PCでもスマホでも「画面幅に対して適切な余白」を確保しつつ、最大幅を守れます。

気をつけたいポイント

初心者がやりがちな落とし穴も見ておきましょう！

• widthに固定値を指定する：width: 1200pxのように固定値にすると、狭い画面で横スクロールが出てしまいます。%で指定してmax-widthとの組み合わせが大事！
• テストが大事：PCで見ると完璧でも、スマホやタブレットでどう見えるか確認を忘れずに。ブラウザのデベロッパーツールで幅を動かしてチェック！特にウインドウ幅が大きくなった時のことを見落としがちです！

まとめ：widthとmax-widthでステップアップ

width: 90%とmax-width: 1200pxを組み合わせたwrapperは、シンプルかつ強力です。

デザインカンプ通りに作るだけでなく、ウィンドウ幅が変わっても崩れないレイアウトを目指せます。

まずは簡単なページで試して、ウィンドウをリサイズしながら「どう見えるか」を楽しんでみてください。

ちなみにこの組み合わせはボタンやヘッダーナビなどいろんなところで応用できますよ〜！