タイトル・URLをコピー
記事タイトルレスポンシブデザインを制作するためのCSSサンプルコード集
記事URLhttps://min-web.com/responsive-css/
記事タイトルレスポンシブデザインを制作するためのCSSサンプルコード集
記事URLhttps://min-web.com/responsive-css/
POINTこの記事をざっくり言うと
実務で使えるCSSサンプルコードの紹介
簡単にレスポンシブ対応ができるCSSフレームワークの紹介
ボトムメニューの実装方法を解説
本記事では、レスポンシブ対応をする上で抑えておきたいCSSのポイントを解説します!
レスポンシブ表示をするためにはCSSを書くだけではなく、コードを書くための基礎として抑えておきたいポイントがいくつか存在します。
きっちりと基礎を抑えた上で、実際に筆者が実務で使ったことがあるレスポンシブ表示のCSSサンプルコードやCSSフレームワークをご紹介します。
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を記載 */ } |
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; } } |
レスポンシブデザインで使われやすい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%; } } |
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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
|
.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を指定するだけで簡単に実装できます。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
|
<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> |
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> |
②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> |
③HTMLでテンプレートのHTMLを書く
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
|
<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> |
実際にコーディングした例が下記です。ブラウザ幅を変更すると確かにレスポンシブデザインが実装されているのがわかります。
Bootstrap navbar 実装プレビュー
まとめ
レスポンシブ対応をする上で抑えておきたいCSSのポイントを解説しました。各要素のサイズ指定に使う単位についてはあまり知らずに使っていたという方も少なくないと思います。
また、今回ご紹介したCSSサンプルコードやフレームワークは実際に筆者が実務で使ったことがあるものばかりです。実務で必要な時に対応できるよう、この記事でCSSによるレスポンシブ表示の基礎をしっかり抑えておきましょう。
レスポンシブに対応した画像調整・サイズ切り替えの実装方法
画像をレスポンシブ対応させる方法を3つ紹介します。
レスポンシブでスライダーを実装する方法(HTML/CSS/jQuery)
Webサイトにレスポンシブレイアウトのスライダーを実装する方法をまとめます。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルレスポンシブデザインを制作するためのCSSサンプルコード集
記事URLhttps://min-web.com/responsive-css/
記事タイトルレスポンシブデザインを制作するためのCSSサンプルコード集
記事URLhttps://min-web.com/responsive-css/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。