レスポンシブデザインを制作するためのCSSサンプルコード集

本記事では、レスポンシブ対応をする上で抑えておきたいCSSのポイントを解説します！

レスポンシブ表示をするためにはCSSを書くだけではなく、コードを書くための基礎として抑えておきたいポイントがいくつか存在します。

きっちりと基礎を抑えた上で、実際に筆者が実務で使ったことがあるレスポンシブ表示のCSSサンプルコードやCSSフレームワークをご紹介します。

1 CSSによるレスポンシブ対応①メディアクエリ
- 1.1 メディアクエリとは
- 1.2 メディアクエリの書き方
2 CSSによるレスポンシブ対応②各要素の単位
3 CSSによるレスポンシブ対応③画像切り替え
4 レスポンシブデザインで使われやすいCSSサンプルコード
5 レスポンシブなCSSフレームワーク「Bootstrap」
- 5.1 Bootstrapとは
- 5.2 Bootstrapの使い方
6 まとめ

CSSによるレスポンシブ対応①メディアクエリ

メディアクエリとは

メディアクエリはレスポンシブ対応をするためには必須な仕様であり、各デバイスの横幅に合わせてCSSを分岐表示するために指定するものです。メディアクエリを指定することで、1つのスタイルシートでさまざまなデバイス幅に合わせたCSSコーディングをすることができます。

メディアクエリの書き方

メディアクエリの書き方は主に3つあります。

HTMLでCSSを読み込む際にmedia属性を記載する
CSS内で@media要素を記載する
CSS内で@importをする時に一緒に記載する

もっとも汎用的に使われているのは、2つめの@media要素に記載する方法です。実際に@mediaでメディアクエリを指定する場合には以下のようなコードを書きます。

@media screen and (max-width: 520px) {
  /* 520px以下の時に使用するCSSを記載  */
}

@media screen and (max-width: 960px) {
  /* 960px以下の時に使用するCSSを記載  */
}
@media screen and (min-width: 960px) {
  /* 960px以上の時に使用するCSSを記載  */
}

@media screen and (max-width: 520px) {

/* 520px以下の時に使用するCSSを記載 */

}

@media screen and (max-width: 960px) {

/* 960px以下の時に使用するCSSを記載 */

}

@media screen and (min-width: 960px) {

/* 960px以上の時に使用するCSSを記載 */

}

CSSによるレスポンシブ対応②各要素の単位

レスポンシブ対応をする上では、各要素のサイズ指定も的確に行う必要があります。CSSで指定できる単位にはpx、%、em、rem、vwなどが挙げられます。それぞれがどういう単位なのかを表にまとめました。

単位	定義
px	指定したら常に同じサイズを表示する絶対値であり、もっとも多く使われている単位。
%	親要素に指定したfont-size相対的にサイズが変化する相対値の単位。
em	親要素に指定したfont-sizeを基準に変化する相対値の単位。1emは100%と同値になる。
rem	htmlセレクタに指定したfont-sizeを基準に変化する相対値の単位
vw	デバイス横幅を基準として変化する相対値の単位。1vwはデバイス横幅の1%に値する。

CSSによるレスポンシブ対応③画像切り替え

各デバイスに合わせて画像のサイズを切り替えたり、もしくは画像自体を切り替えることもレスポンシブ対応です。これらは主に以下の4つの方法で切り替えられます。

img要素自体の表示・非表示切り替え
src属性による切り替え
srcset属性を指定して画像切り替え
picture要素で複数条件下で画像切り替え

この中でCSSで指定できるのはimg要素自体の表示・非表示の切り替えです。先述したメディアクエリと組み合わせてdisplay:none;を使用することで、指定したデバイス幅で表示・非表示の切り替えができます。具体的には下記のようなコードで指定します。

.img {
  /* PC表示ではblock要素として表示 */
  display: block;
}
@media screen and (max-width: 520px) {
  .img {
    /* スマホでは表示しない */
    display: none;
  }
}

.img {

/* PC表示ではblock要素として表示 */

display: block;

}

@media screen and (max-width: 520px) {

.img {

/* スマホでは表示しない */

display: none;

}

レスポンシブデザインで使われやすいCSSサンプルコード

min-width(height)/max-width(height)

基本的には普段のコーディングで幅を指定する際に使うwidthやheightと同じように幅を指定するために使います。それぞれは以下のような役割を持っています。

min-width(height)：【指定された幅】以下になることはない。
max-width(height)：最大で【指定された幅】まで要素を伸ばせる。

これらを組み合わせることで、PC表示では固定幅で表示してスマートフォンやタブレット

では画面幅ぴったりに表示するなどのレスポンシブ対応が可能です。実際にCSSを書く時には下記のようなコードになります。

.box {
  /* PC表示では1200pxを最大幅とする */
  max-width: 1200px;
}
@media screen and (max-width: 520px) {
  .box {
    /* スマホ表示では横幅いっぱいに表示する */
    max-width: 100%;
  }
}

.box {

/* PC表示では1200pxを最大幅とする */

max-width: 1200px;

}

@media screen and (max-width: 520px) {

.box {

/* スマホ表示では横幅いっぱいに表示する */

max-width: 100%;

}

flexbox

flexboxは画面幅に合わせて柔軟にレイアウトを変更することができる、CSS3から導入された仕組みです。親要素にdisplay:flex;を指定するだけで使うことができるため、簡単に実装

することができます。

headerのグローバルメニューを例にすると以下のようなコードで実装することが多いです。

<header>
<nav>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
      <li>F</li>
  </ul>
</nav>
</header>

<nav>

<ul>

</ul>

</nav>

</header>

header{
width: 700px;
background: blue;
}
ul{
list-style: none;
  /* flexboxを適用する */
  display: flex;
 　/* header全体に均一にli要素を配置する */
  justify-content: space-around;
}
li{
  width: 100px;
  color: white;
  text-align: center;
border: 1px solid white;
  margin-left: 10px;
  margin-right: 10px;
}

header{

width: 700px;

background: blue;

}

ul{

list-style: none;

/* flexboxを適用する */

display: flex;

　/* header全体に均一にli要素を配置する */

justify-content: space-around;

}

li{

width: 100px;

color: white;

text-align: center;

border: 1px solid white;

margin-left: 10px;

margin-right: 10px;

}

実際のプレビューは下記リンクから確認できます。

flexboxのプレビュー

grid

親要素に含まれる子要素をタイル状に配置することができるのがgridレイアウトです。flexboxと比べると少し構造が複雑気味ではありますが、その分レイアウトに自由がきくのでデザイン性の高いWebサイトを制作する際にはおすすめです。

Gridレイアウトをコーディングしたサンプルコードが以下になります。

<div class="container">
  <div class="item box1">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item box2">F</div>
  <div class="item box3">G</div>
</div>

</div>

.container {
  display: grid;
  /* 子要素間の余白を指定する */
  gap: 15px;
  /* 横に並ぶアイテムの数だけアイテム幅の比率を設定する */
  grid-template-columns: 1.5fr 1fr 1fr 3fr;
  /* 縦に並ぶアイテムの数だけアイテム幅のサイズを設定する */
  grid-template-rows: 180px 100px 80px 120px auto;
}
.item {
  background: #ddd;
  padding: 10px;
  border-radius: 8px;
  border: 3px solid #ccc;
}
.box1 {
  /* 横幅を1アイテム分に指定している */
  grid-column: 1;
  /* 縦幅の範囲を開始位置/終了位置で指定する */
  /* 今回の場合にはアイテムのスタート位置（1）から4つめのアイテムまで横幅を指定している */
  grid-row: 1 / 4;
  background: #fc2;
  border-color: #fa0;
}
.box2 {
  grid-column: 3 / 5;
  background: #0bd;
  border-color: #09c;
}
.box3 {
  grid-column: 1/5;
  grid-row: 3 / 5;
  background: #c6c;
  border-color: #a4a;
}

/* Responsive */
@media (max-width: 520px) {
  .container {
    /* 520px以下の時には横幅は1アイテム分に変化する */
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .box1,
  .box2,
  .box3 {
    grid-column: 1;
    grid-row: auto;
  }
}

.container {

display: grid;

/* 子要素間の余白を指定する */

gap: 15px;

/* 横に並ぶアイテムの数だけアイテム幅の比率を設定する */

grid-template-columns: 1.5fr 1fr 1fr 3fr;

/* 縦に並ぶアイテムの数だけアイテム幅のサイズを設定する */

grid-template-rows: 180px 100px 80px 120px auto;

}

.item {

background: #ddd;

padding: 10px;

border-radius: 8px;

border: 3px solid #ccc;

}

.box1 {

/* 横幅を1アイテム分に指定している */

grid-column: 1;

/* 縦幅の範囲を開始位置/終了位置で指定する */

/* 今回の場合にはアイテムのスタート位置（1）から4つめのアイテムまで横幅を指定している */

grid-row: 1 / 4;

background: #fc2;

border-color: #fa0;

}

.box2 {

grid-column: 3 / 5;

background: #0bd;

border-color: #09c;

}

.box3 {

grid-column: 1/5;

grid-row: 3 / 5;

background: #c6c;

border-color: #a4a;

}

/* Responsive */

@media (max-width: 520px) {

.container {

/* 520px以下の時には横幅は1アイテム分に変化する */

grid-template-columns: 1fr;

grid-template-rows: auto;

}

.box1,

.box2,

.box3 {

grid-column: 1;

grid-row: auto;

}

今回のコードを反映させたプレビューは以下から確認できます。

Gridレイアウトのプレビュー

レスポンシブなCSSフレームワーク「Bootstrap」

レスポンシブデザインを実際にCSSで実装することに、疲れや苦労を感じる方も多いです。そんな方におすすめなのがCSSフレームワークを使うことです。フレームワークは

Webページを構成する上でよく使われるデザインやパーツを事前に定義されたものを意味します。今回はCSSフレームワークの中でももっとも多く利用されているBootstrapをご紹介します。

Bootstrapとは

BootstrapはTwitter社が開発した、Web制作で使いまわしできるデザインやパーツを定義したフレームワークのことです。

日本語版はまだ普及しておらず英語版しかないですが、マニュアルがわかりやすく初心者でも使いやすいシステムとして普及しています。

Bootstrapのメリット①簡単にレスポンシブデザインを実装できる

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
.container	100%	540px	720px	960px	1140px
.container-sm	100%	540px	720px	960px	1140px
.container-md	100%	100%	720px	960px	1140px
.container-lg	100%	100%	100%	960px	1140px
.container-xl	100%	100%	100%	100%	1140px
.container-fluid	100%	100%	100%	100%	100%

Bootstrapは既にブレイクポイントが設定されているため、必要に応じてHTMLコーディングの際に各classを記載するだけでレスポンシブ対応が完了します。

実際にブラウザ上でBootstrapのレスポンシブ対応を確認したい方はBootstrap公式のページをご覧ください。

Bootstrapのメリット①短時間でコーディングが完了する

ボタンやお問い合わせフォームのようなパーツ部分のCSSを既存のデータから呼び起こすことができるため、レスポンシブ対応のためのCSSコーディングの手間が省けます。

例えば、実装に手間がかかりやすいアコーディオンであってもHTMLでclassを指定するだけで簡単に実装できます。

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

Accordion Item #1

</button>

</h2>

<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.

</div>

Accordion Item #2

</button>

</h2>

<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.

</div>

Accordion Item #3

</button>

</h2>

<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.

</div>

Bootstrapのメリット③ベーシックなデザインのWebサイトを作れる

NewsセクションやProductセクション、新規登録画面、などWebサイトを実装する上でよく使われるセクションのテンプレートも利用できるため、デザイナーがいない場合であっても、ベーシックなデザインのWebサイトを作れます。

よく見るレイアウトが一通り揃っているため、シンプルかつオーソドックスなデザインのWebサイトを作りたいという時にはBootstrapを使って実装するのもおすすめです。

ただしその一方でデザイン性に欠ける面はあるので、デザイン性の高いWebサイトを作りたい時には部分的に使用する必要があります。

Bootstrapの使い方

実際にBootstrapを使ってナビバーを作るための手順を解説します。Bootstrapでは

3ステップでレスポンシブ対応ができるので、実際にコーディングしてみましょう。

①BootstrapのCSSを読み込む

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<head>

</head>

②JQuery、Popper.js、BootstrapのJavascriptを読み込む

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/dist/js/bootstrap.js"></script>
// <body>の閉じタグ前で読み込む
</body>

// <body>の閉じタグ前で読み込む

</body>

③HTMLでテンプレートのHTMLを書く

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>