デバイスの幅に応じて表示を変えるための基本設定
headタグ内に、以下のように記載しましょう。この記載がないと、レスポンシブ対応されません。
VS Codeでは、Emmetで! にて表示されるテンプレートに予めセットされています。
<meta name="viewport" content="width=device-width, initial-scale=1.0">いろいろなデバイスで表示できるように定義するには
まずは、現在の主なデバイスサイズを調査することから始めましょう。
デザインはPC版（幅1440px）とスマホ版（幅375px）で制作することが多いですが、タブレットでもきれいに表示されるように実装しなければなりません。
基本的には、どのディスプレイサイズでも要素が欠けることなく、ビューエリアへ表示されるよう、実装します。
以下、2025年現在の主要なサイズが明記されていますが、デバイスの進化と共にサイズも年々変化していることに注意しましょう。
PC
主要なディスプレイサイズ「1280px〜1920px」が問題なく表示できるよう、実装しましょう。
スマートフォン
主要なディスプレイサイズ「375px〜440px」が問題なく表示できるよう、実装しましょう。
タブレット
主要なディスプレイサイズは「768px〜960px」が問題なく表示できるよう、実装しましょう。
ブレイクポイントを定義する
ブレイクポイントとは、デザインを切り替える分岐点です。
下の例では、「タブレットとPCは540px以上」または「スマホとタブレットが共通でデフォルト、PCは1100px以上から」という定義の例です。（主要なディスプレイサイズが問題なく含まれていることに注意しましょう）
1100pxや540pxというのは、この数値でないといけないということはありません。
ブレイクポイントの数は、最初は1つだけで実装してみましょう。
（複雑なデザインでは、セクション毎にブレイクポイントを変えることもあります）
スマートフォンをデフォルトとして、タブレットからはPCのデザインを表示する場合
/* スマートフォン（デフォルト） */
.box{
margin-bottom: 20px;
}
/* タブレットとPC 540px以上で切り替え */
@media screen and (min-width: 540px) {
.box {
margin-bottom: 40px;
}
}
セレクタとプロパティ（青い線の部分）は、デフォルトとブレイクポイントの範囲で、記載を統一しましょう。
スマートフォンとタブレットが同じデザイン、PCは別デザインを表示する場合
/* スマートフォン＋タブレット（デフォルト） */
.box{
margin-bottom: 20px;
}
/* PC 1100px以上で切り替え */
@media screen and (min-width: 1100px) {
.box {
margin-bottom: 40px;
}
}セレクタとプロパティ（青い線の部分）は、デフォルトとブレイクポイントの範囲で、記載を統一しましょう。
PCとスマートフォンで画像を差し替える方法
スマホ用は縦長や正方形、PCの場合は横長の大き目画像を使用、という場合には、picture＋sourceタグを追加しましょう。
imgタグ（デバイスに関わらず同じ画像を使用）
<img src="mdn-logo-narrow.png" alt="MDN">pictureタグを使う方法（デバイスの幅で画像を切り替える）
540px以上の場合は、mdn-logo-wide.pngを使用し、それ以外の場合はmdn-logo-narrow.pngを使う例です。
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 540px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>デバイス幅によって、特定の要素を非表示にしたい
デバイス幅によって、特定の要素を非表示にしたい場合は、クラス名を付けてからデバイスの範囲で非表示にします。
/* スマートフォン（デフォルト） */
.box{
/* 設定内容は自由です */
margin-bottom: 20px;
}
/* タブレットとPC 540px以上で切り替え */
@media screen and (min-width: 540px) {
.box {
/* 540px以上ではboxクラスの要素を非表示 */
display: none;
}
}
PCでは4カラム、スマホでは2カラムにしたい
作品一覧などを並べる際に使う方法です。
余白を考えつつ、横並び要素の子要素の幅を切り替えます。
/* スマートフォン（デフォルト） */
.parent{
/* flex指定で、子要素を横並びにする */
display: flex;
/* 複数行で表示 */
flex-wrap: wrap;
/* 両端から表示 */
justify-content: space-between;
}
/* 540px以上では横幅を50%弱＝2カラム */
.child{
width: 48%;
}
/* タブレットとPC 540px以上で切り替え */
@media screen and (min-width: 540px) {
.child{
/* 540px以上では横幅を25%弱＝4カラム */
width: 23%;
}
}子要素を一部だけ別の幅に設定することもできますが、その場合、高さをどうするか、美しく見せるためのデザイン時の配慮が必要です。
flexを使った横並びの場合、高さが揃っているほうがキレイです。
ブラウザで表示確認する方法
レスポンシブの実装時は、ブラウザでの表示確認をスムーズに行いたいので、chromeでの確認方法をいくつか紹介します。画面で右クリックして「検証」ウィンドウを開きます。
Chromeで、主要なデバイスの画面表示に切り替えて表示
パソコンとスマホが重なったようなアイコンをクリックすると、左側のビューが切り替わります。
（右側にコードが表示されていない場合は、右上の縦に点々アイコンから、コードの表示位置を変更しましょう）
「Dimensions」プルダウンで、デバイスの種類を切り替えることができます。
Chromeで、レスポンシブビューで確認
薄いブルーの四角で区切られたような部分をクリックすると、幅を切り替えることができます。
（2枚目は、Mobile M 375pxに切替後、幅が切り替わった画面例です）
右側のバーをつかんで動かすと、幅を変更できます。
上部の100%と表示されている箇所は縮尺で、ここを小さくすると、疑似的に大きな画面での表示確認ができます。
例えば、50%の状態にしてから幅を1920に変更すると、一番普及しているPCモニターの横幅での表示確認ができます。
適宜、ビューを切り替えながら、CSSの状態を確認していきましょう。
矢印アイコンで、要素をフォーカスできます。（赤線）
フォーカスされた要素に対して、有効順にCSSが表示されます。（青線）
@media指定の設定がbase.cssの318行目にあり、2番目にはデフォルト設定が197行目にあります。
base.cssの318行目を編集するには、VS Codeの「移動 > 行/列に移動…」からジャンプします。
ショートカットは、Macの場合「Control + G」です。
（キーボード左側、シフトキーの上にControlがあります）
318と入力してEnterすると、その行へカーソルが移動します。
行へのジャンプが早くなると、CSSの編集スピードが上がります。
