画面の幅をコントロールする基本のワザ
ウェブサイトの内容（コンテンツ）が、画面の幅に合わせて適切に表示されるようにするための基本的なCSSのテクニックをいくつかご紹介します。
1. 「ここまでしか広がりません！」を設定する max-width
ウェブサイトのコンテンツが、どんなに大きな画面で見ても無限に横に広がってしまうと、間延びして見づらくなってしまいますよね。それを防ぐのがmax-widthです。
コンテンツを入れる箱（要素）に対してmax-widthを設定すると、「この箱は、指定した幅以上には広がりませんよ」という上限を決めることができます。
.container {
max-width: 1200px; /* 例えば、最大で1200ピクセルまでしか広がりません */
}
この設定があれば、画面が1200pxより広くなっても、.containerの幅は1200pxで止まります。
2. 「真ん中にきてね！」を設定する margin: 0 auto;
max-widthで上限を決めただけだと、広い画面の時にコンテンツが左に寄ったままになってしまいます。そこで使うのがmargin: 0 auto;です。
これをmax-widthとセットで使うと、max-widthで指定した幅で止まった後、残った左右の余白を自動で均等にして、コンテンツを画面の真ん中に表示してくれます。
.container {
max-width: 1200px;
margin: 0 auto; /* 上下は0、左右は自動で余白を作って真ん中寄せ */
}
この2つは、ウェブサイト全体のコンテンツの幅と配置を決める上での基本中の基本です。
画面が小さくなったら「内容を縮小」させるテクニック
ここからは、画面が小さくなったときに、コンテンツが自動でギュッと縮まって画面に収まるようにするための具体的な方法を見ていきましょう。
1. 内側にスペースを作る padding
paddingは、要素の「内側」に余白を作るプロパティです。コンテンツが箱の端にぴったりくっついていると窮屈に見えるので、少しスペースを作ってあげたいときに使います。
特に、%（パーセンテージ）を使ってpaddingを指定すると、画面の幅に合わせて余白のサイズも自動で伸縮してくれます。
.content-box {
/* 例えば、左右に画面幅の5%分の余白を作る */
padding: 0 5%;
}
これで、画面が小さくなればパディングも小さくなり、コンテンツが自然に画面に収まるようになります。
2. 画面のサイズに連動する単位 vw の利用
いつも使っているpx（ピクセル）は固定された大きさですが、vwという単位は画面の幅に合わせて大きさが変わります。
-
1vw= 画面の幅の1%
たとえば、文字の大きさにvwを使ってみましょう。
h1 {
font-size: 5vw; /* 見出しの文字サイズを画面幅の5%にする */
}
これだと、画面が大きくなれば文字も大きくなり、画面が小さくなれば文字も小さくなります。paddingやmarginなど、他の場所でもvwを使うことで、より動的にコンテンツを縮小・拡大させることができます。
3. 要素と要素の間のスペースを作る gap
複数の要素を横に並べたり、格子状に並べたりするときに使う「Flexbox」や「CSS Grid」という便利なレイアウト方法があります。これらの場合、要素と要素の間のスペースを作るのにgapプロパティがとても便利です。
gapは、要素の「外側」の余白ではなく、**要素同士の「隙間」**を作ります。
.flex-container {
display: flex; /* 横並びにする指定 */
gap: 20px; /* 子要素同士の間に20pxの隙間を作る */
/* または gap: 2vw; のようにvwを使うことも可能 */
}
gapを使うことで、要素間のスペースもレスポンシブに調整できるようになり、全体的なレイアウトの収まりがよくなります。
まとめると
レスポンシブデザインで画面をうまく調整するには、これらのテクニックを組み合わせて使うことがほとんどです。
-
全体の幅のコントロール:
max-widthとmargin: 0 auto;で、コンテンツが広がりすぎないようにし、中央に配置する。 -
内側や要素間の余白調整:
paddingやgapを%やvwなどの単位と組み合わせて使い、画面サイズに合わせてコンテンツが自然に収まるように調整する。