知識を取り込み、そして発信する
レスポンシブデザインとは、画面サイズが変わってもレイアウトや表示が破綻せず、自然に変化する状態のことです。
画面が狭くなれば要素が縮み、横に並んでいた要素が縦に並び、文字が大きくなりすぎたり小さくなりすぎたりしない。
このような挙動がCSSの可変性によって自然に成立している状態がレスポンシブです。
そのため、レスポンシブはメディアクエリそのものを指す言葉ではありません。
最初に考えるべきなのは、どの幅で切り替えるかではなく、CSSの性質をどう活かすかという点になります。
ビューポートとは、ブラウザがCSSの計算基準として使っている表示領域を指します。
HTML要素の大きさや中身の高さではなく、あくまでブラウザが現在表示している領域そのものが基準になります。
ウィンドウサイズを変更すると、このビューポートの幅や高さも再計算されます。
ビューポートを基準にした単位を使うことで、画面サイズに応じて要素の大きさを可変させることができます。
セレクタ{
width:値vw;
height:値vh;
}vwとvhはそれぞれ、ビューポートの横幅・縦幅の100分の1を単位とします。
コード例
<div>
<p>
vwを50％で指定
vhを25％で指定
</p>
</div>p {
width: 50vw;
height: 25vh;
}出力・動作例
出力例はサイト内では表示崩れが起こるため、パソコンの方はデモページで確認してください。
vwとvhは互いに独立した単位です。
幅を変更してvwが変わっても、vhはビューポート高さが変わらない限り変化しません。
ただし、幅を変えてレイアウトが変化し、スクロールバーの有無で表示領域が変わると、vhの計算も更新されます。
vhはHTML要素の高さではなく、ブラウザの表示領域を基準に計算されます。幅を変えても高さは基本的に変わりません。
また、パーセントは親要素に対する割合でサイズが決まる単位です。
新しい概念ではなく、従来から使われてきた指定方法ですが、レスポンシブでは画面幅に追従させる目的で使われます。
代表的な指定がwidthを100%にする方法で、コンテンツを親要素いっぱいに広げたい場合に使われます。
画面サイズが変わってもデザインを柔軟に保つには、数値の範囲を制御する仕組みが便利です。
ある値を小さすぎず大きすぎずに保ったり、最小値と最大値の間で自動的に調整したりすることで、テキストやボックスのサイズを画面に応じて自然に変化させることができます。
こうした仕組みを使うと、固定サイズでは難しかったレスポンシブ対応がよりスムーズになります。
画面サイズに応じて上限を設けたい場合に有効な関数です。
セレクタ {
プロパティ: min(値1, 値2);
}
min関数の引数には長さや割合、数値などを指定することができます。
引数は2つ以上与えることも可能で、計算結果としてその中でより小さい値が採用されます。
コード例
<div>
<p>最小幅にします</p>
</div>div{
width: min(20%, 50px);
background-color: #ffb3b399;
}出力例
最小幅にします
例えばビューポート幅が800pxの場合、20%は160pxとなり50pxより大きいため幅は50pxになります。
ビューポート幅が400pxの場合は20%が40pxとなるため、幅は40pxになります。
min関数はpxや%、remなど異なる単位の混在も可能で、常に小さい方の値を優先します。
計算結果が0より小さくなることはなく、レスポンシブ対応や可変レイアウトに便利です。
画面サイズが小さくなっても、要素がこれ以下にはならないように高さや幅の下限を設定したい場合に有効な関数です。
セレクタ {
プロパティ: max(値1, 値2);
}
max関数の引数には長さや割合、数値などを指定することができます。
引数は2つ以上与えることも可能で、計算結果としてその中で最も大きい値が適用されます。
コード例
<div>
<p>最大幅にします</p>
</div>div{
width: max(20%, 50px);
background-color: #ffb3b399;
}出力例
最大幅にします
例えばビューポート幅が800pxの場合、20%は160pxとなり50pxより大きいため幅は160pxになります。
ビューポート幅が400pxの場合は20%が40pxとなるため、幅は50pxになります。
max関数もpxや%、remなど異なる単位を混ぜて使用でき、常に大きい方の値が優先されます。
clampは最小値と理想値と最大値を同時に指定できる関数です。
構文
セレクタ {
プロパティ: clamp(最小値, 推奨値, 最大値);
}
clamp関数は3つの値を引数に取り、最小値と最大値の範囲内で推奨値を適用します。
これにより、画面サイズに応じて自動的にサイズを変えつつ、極端に小さくなったり大きくなったりするのを防ぐことができます。
コード例
<div>
<p>フォントサイズが可変します</p>
</div>div{
font-size: clamp(16px, 1.2vw, 20px);
}出力例
フォントサイズが可変します
ビューポート幅が500pxの場合、1.2vwは6pxとなりますが、最小値16pxより小さいため、フォントサイズは16pxになります。
ビューポート幅が1600pxの場合、1.2vwは19.2pxとなり、最大値20pxを超えないため、フォントサイズは19.2pxになります。
ビューポート幅が2000pxの場合、1.2vwは24pxとなりますが、最大値20pxより大きいため、フォントサイズは20pxになります。
このようにclamp関数は最小値と最大値を明示的に指定しつつ推奨値を可変させられるため、文字サイズやボックスサイズをレスポンシブに調整するのに非常に便利です。
幅が狭い場合は最小値、広い場合は最大値で制限されるため、極端に小さくなったり大きくなったりせず安定した表示を維持できます。
CSSでは要素の幅や高さに最小値や最大値を設定することができます。
これにより、画面サイズや親要素のサイズに応じて自動で調整される柔軟なレイアウトを作りつつ、極端に小さくなったり大きくなったりするのを防ぐことが可能です。
最小値を指定すると要素が小さくなりすぎるのを防ぎ、最大値を指定すると大きくなりすぎるのを制限できます。
min-widthとmax-widthはコンテンツの暴走を防ぐために重要なプロパティです。
画面がどれだけ広くなっても、読みやすさを保つ役割を持ちます。
構文
セレクタ {
min-width:値;
max-width:値;
}
min-widthは要素の幅の下限を指定し、max-widthは幅の上限を指定します。
どちらも長さや割合、数値で指定可能で、要素の幅はこれらの範囲内で自動的に変動します。
指定しなければデフォルトでは制限なく拡大縮小します。
コード例
<div>
<p>幅が変わります</p>
</div>div {
background-color: #ffb3b399;
width: 50%;
min-width: 150px;
max-width: 300px;
}出力例
幅が変わります
この指定では、要素の幅は親要素やビューポートに応じて自動的に変化します。基本は幅50％で計算されますが、幅が小さくなりすぎる場合は最小値の150pxが適用され、幅が大きくなりすぎる場合は最大値の300pxが適用されます。
例えば親要素の幅が400pxの場合、50％は200pxで最小値と最大値の範囲内のため幅は200pxとなります。
親要素の幅が200pxの場合、50％は100pxとなりますが、最小値150pxより小さいため幅は150pxになります。
親要素の幅が800pxの場合、50％は400pxですが、最大値300pxより大きいため幅は300pxになります。
こうして幅は常に150pxから300pxの範囲で変動し、極端に小さくなったり大きくなったりすることを防ぎます。
また、min-widthとmax-widthは単位の混在も可能で、可変幅を設定しつつ下限や上限を確保することで、レスポンシブレイアウトを安定させることができます。
min-heightとmax-heightもコンテンツの暴走を防ぐために重要なプロパティです。
画面がどれだけ広くなっても、読みやすさを保つ役割を持ちます。
構文
セレクタ {
min-height:値;
max-height:値;
}
min-heightは要素の高さの下限を指定し、max-heightは高さの上限を指定します。
高さも長さや割合、数値で指定でき、要素の高さはこれらの範囲内で自動的に調整されます。
コード例
<div>
<p>幅が変わります</p>
</div>div {
background-color: #ffb3b399;
height: 10vh;
min-height: 60px;
max-height: 200px;
}出力例
高さが変わります
この指定では、要素の高さはビューポートの高さに応じて自動的に変化します。
基本は高さ10vhで計算されますが、ビューポートが小さくなると最小値60pxが適用され、ビューポートが大きくなると最大値200pxが適用されます。
例えばビューポート高さが500pxの場合、10vhは50pxとなりますが、最小値60pxより小さいため高さは60pxになります。
ビューポート高さが1500pxの場合、10vhは150pxとなり、最大値200pxの範囲内のため高さは150pxになります。
ビューポート高さが2500pxの場合、10vhは250pxとなりますが、最大値200pxより大きいため高さは200pxになります。
こうして高さも常に60pxから200pxの範囲で変化し、極端な大きさにならず安定した表示を保ちます。
vwやvhなどの単位と組み合わせることで、レスポンシブ対応のボックスサイズを柔軟に調整できます。
orderを使うと、HTML構造を変えずに見た目上の順序だけを変更できます。
画面サイズごとに配置を調整したい場合に使われます。
構文
セレクタ {
order: 値;
}
orderプロパティは、フレックスコンテナやグリッドコンテナ内の要素の表示順序を制御するためのプロパティです。
数値を指定すると小さい順に左から右、上から下に並び、負の値も指定可能で負の値の要素は先に表示されます。
デフォルトは0で、同じ数値の場合はHTMLの記述順がそのまま適用されます。
コード例
<div>
<p class="item1">1番目の要素</p>
<p class="item2">2番目の要素</p>
<p class="item3">3番目の要素</p>
<p class="item4">4番目の要素</p>
</div>div{
display: flex;
gap: 15px;
}
p{
background-color: #ff000099;
}
.item1{
order: 2;
}
.item2 {
order: -1;
}
.item3 {
order: -1;
}
.item4 {
order: 1;
}出力例
1番目の要素
2番目の要素
3番目の要素
4番目の要素
この場合、orderが-1のitem2とitem3が最初に表示され、次にorderが1のitem4、最後にorderが2のitem1が表示されます。
HTML上の記述順に関係なく、この数値順で要素の順序が並ぶため、フレックスやグリッドのレイアウトを柔軟に入れ替えることが可能です。
なお、orderの値が同じの場合は順番に書かれている要素が先に配置されます。
orderプロパティはフレックスやグリッドでのみ有効で、ブロックレベル要素やインライン要素単体には効果がありません。
数値を変えることで、HTMLを書き換えずに表示順序を簡単に調整できるため、レスポンシブデザインや動的なレイアウト変更で非常に便利です。
ただし、視覚的順序と読み上げ順序が異なる場合があるため、重要な情報の順序変更には注意が必要です。
レスポンシブデザインでは、画面幅や高さが変わっても要素の配置を意図した通りに保つことが重要です。
そのためには、単に順序を変えるだけでなく、Grid内の各要素がどのセルに配置されるかを正確に指定する必要があります。
grid-areaプロパティを使うと、行と列の開始位置・終了位置を一行でまとめて指定でき、HTMLの記述順に依存せずレイアウトを制御できます。
フレックスのorderと組み合わせることで、レスポンシブ対応の制作にも非常に役立つ方法です。
構文
セレクタ {
grid-area: 行開始 / 列開始 / 行終了 / 列終了;
}
grid-areaはGridコンテナ内の要素がどのセルに配置されるかを指定するプロパティで、複数の行や列にまたがる要素も一行でまとめて設定できます。
これにより、画面幅が変化しても要素の意図した位置を維持しつつ、柔軟にレイアウトを調整できます。
コード例
<div>
<p class="item1">1番目の要素</p>
<p class="item2">2番目の要素</p>
<p class="item3">3番目の要素</p>
</div>div{
display: grid;
gap: 10px;
}
p{
border: 1px solid #000000;
box-sizing: border-box;
}
.item1 {
grid-area: 1 / 1 / 2 / 3;
}
.item2 {
grid-area: 2 / 1 / 3 / 2;
}
.item3 {
grid-area: 2 / 2 / 3 / 3;
}出力例
1番目の要素
2番目の要素
3番目の要素
item1は1行目・1列目から2列目までの範囲に配置され、item2は2行目・1列目、item3は2行目・2列目に配置されます。
ビューポート幅が狭くなるとGrid全体の列幅が縮み、必要に応じて要素が縦に並ぶ場合でも、grid-areaで指定した範囲を基準に配置されます。
このため、画面幅が変わっても意図したレイアウトを保ちながら、レスポンシブに対応できます。
レスポンシブ対応のWebページでは、headerやfooterなど主要なセクションを直感的に配置できると制作が効率的になります。
Gridでは、行番号や列番号で位置を指定する方法のほかに、名前付きエリア を使って視覚的にレイアウトを管理することができます。
これにより、HTMLの記述順に依存せず、画面幅や高さが変わっても意図した配置を保つことが可能です。
構文
セレクタ {
display: grid;
grid-template-areas:
"エリア名 エリア名"
}
/*各要素にエリア名を指定*/
セレクタ{
grid-area: エリア名;
}行・列ごとに名前を指定し、各要素にgrid-areaで割り当てると、画面幅が変わっても意図した配置を維持できます。
コード例
<div>
<p class="header">ヘッダー要素</p>
<p class="nav">ナビゲーション要素</p>
<p class="main">メイン要素</p>
<p class="footer">フッター要素</p>
</div>div {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: 30% 70%;
grid-template-areas:
"header header"
"nav main"
"footer footer";
gap: 8px;
}
p.header {
grid-area: header;
background-color: #ff000099;
}
p.nav {
grid-area: nav;
background-color: #ffff0099;
}
p.main {
grid-area: main;
background-color: #00ff0099;
}
p.footer {
grid-area: footer;
background-color: #0000ff99;
}出力例
ヘッダー要素
メイン要素
このGridでは、headerとfooterがそれぞれ1行目と3行目にまたがり、2列分の幅を占めています。
2行目ではnavが1列目、mainが2列目に配置され、列幅はそれぞれ30％と70％に設定されています。
画面幅が変わってもGridの列幅は割合に応じて変化するため、navとmainの比率が維持されつつ、全体のレイアウトも崩れません。
gapで指定した8pxの間隔も列・行の間に適用され、要素同士が密着せずに見やすく配置されます。
grid-template-columnsで割合を指定すると、画面幅に応じて各列の幅が自動で伸縮するため、レスポンシブ対応が自然に行えます。
headerやfooterは両列にまたがるため、列幅の割合にかかわらず横いっぱいに表示されます。
列ごとに比率を変えたい場合はrepeat()より個別指定の方が直感的で、fr単位と％単位のどちらも使用できます。
grid-areaで要素を名前付きエリアに割り当てることで、HTMLの順序を変えずにレイアウトを調整可能です。
grid-template-areas内でピリオド「.」を使うと、空のセルとして扱われ、要素が配置されない場所を指定できます。
画面が狭くなり30％の列が極端に小さくなる場合はminmax()を使って最小幅を設定すると可読性を保てます。