記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

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

レスポンシブデザインを実装する際に知っておいて損がないCSSの基礎知識を解説します。 筆者が実務で使用したことがあるCSSサンプルコードやCSSフレームワークもあわせて紹介している、レスポンシブデザイン初心者必見の記事です。

カテゴリ: HTML/CSS

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

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

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

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

メディアクエリとは

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

メディアクエリの書き方

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

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

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

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;を使用することで、指定したデバイス幅で表示・非表示の切り替えができます。具体的には下記のようなコードで指定します。

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

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

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

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

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

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

flexbox

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

することができます。

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

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

flexboxのプレビュー

grid

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

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

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

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を指定するだけで簡単に実装できます。

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

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

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

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

Bootstrapの使い方

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

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

①BootstrapのCSSを読み込む

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

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

実際にコーディングした例が下記です。ブラウザ幅を変更すると確かにレスポンシブデザインが実装されているのがわかります。

Bootstrap navbar 実装プレビュー

まとめ

レスポンシブ対応をする上で抑えておきたいCSSのポイントを解説しました。各要素のサイズ指定に使う単位についてはあまり知らずに使っていたという方も少なくないと思います。

また、今回ご紹介したCSSサンプルコードやフレームワークは実際に筆者が実務で使ったことがあるものばかりです。実務で必要な時に対応できるよう、この記事でCSSによるレスポンシブ表示の基礎をしっかり抑えておきましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。