概要

【レスポンシブデザインの実装方法】
レスポンシブデザインとは、PCやタブレット、スマートフォンなど、様々な端末に対応するデザインのことを言います。スマートフォンの普及により、ユーザーは様々な端末でWebサイトを閲覧するようになっており、レスポンシブデザインはユーザーの利便性を向上させる上で非常に重要な役割を果たしています。

ここでは、レスポンシブデザインの実装方法について解説します。まずは、基本的なCSSのプロパティである@mediaを使った方法を紹介します。

[@mediaを使ったレスポンシブの実装方法]

css.

/* 768px以下の場合に適用 */
@media (max-width: 768px) {
  /* 768px以下の場合に適用されるCSS */
}

/* 768px以上の場合に適用 */
@media (min-width: 769px) {
  /* 768px以上の場合に適用されるCSS */
}

これを使って、例えばPC版のサイトでは3カラムレイアウトを使い、スマートフォン版のサイトでは1カラムレイアウトを使うような場合は以下のように記述することができます。

css.

/* PC版 */
@media (min-width: 769px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .column {
    flex-basis: 33.33%;
  }
}

/* スマートフォン版 */
@media (max-width: 768px) {
  .container {
    display: block;
  }
  
  .column {
    width: 100%;
  }
}

上記の例では、スマートフォン版ではcontainerという要素をブロック要素に、columnという要素を100%にすることで、1カラムレイアウトを実現しています。PC版では、containerに対してflexboxを使い、columnに対しては33.33%の幅を指定することで、3カラムレイアウトを実現しています。

【Bootstrapを使ったレスポンシブデザインの実装方法】

Bootstrapは、レスポンシブデザインの実装を簡単にするためのCSSフレームワークです。Bootstrapを使うことで、レスポンシブデザインに必要なグリッドシステムやレイアウト、ナビゲーションなどのコンポーネントが用意されており、手軽にレスポンシブデザインを実装することができます。

まずは、BootstrapをHTMLに読み込むために、以下のようにhead要素内にlinkタグを追加します。

html.

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

次に、Bootstrapのグリッドシステムを使ってレスポンシブデザインを実装する方法を解説します。Bootstrapのグリッドシステムは、12カラムをベースとしたもので、横幅が大きくなるにつれてカラム数が増え、小さくなるにつれてカラム数が減っていくという仕組みです。以下のように、.container要素を使って、コンテンツを中央に配置し、.row要素を使って、グリッドシステムを作ります。

html.

<div class="container">
  <div class="row">
    <div class="col-md-4">コンテンツ1</div>
    <div class="col-md-4">コンテンツ2</div>
    <div class="col-md-4">コンテンツ3</div>
  </div>
</div>

上記の例では、.col-md-4というクラスを使って、3つのコンテンツを12カラムに分割しています。mdはmediumの略で、横幅が992px以上の場合に適用されるCSSを指定することを示しています。また、4は、12カラムのうちの4カラムを占めるということを表しています。

さらに、xs、sm、lgといったサイズ指定も用意されており、以下のように指定することができます。

html.


<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">コンテンツ1</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">コンテンツ2</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">コンテンツ3</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">コンテンツ4</div>
    </div>
```html.
xsはExtra Small、smはSmall、mdはMedium、lgはLargeを表しており、それぞれの画面サイズに合わせて表示されるカラム数を指定することができます。

また、Bootstrapでは、レスポンシブデザインに必要なコンポーネントも多数用意されています。例えば、以下のように、.navbar要素を使ってナビゲーションバーを簡単に作ることができます。

```html<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">メニューを切り替える</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">サイト名</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </div>
  </div>
</nav>

上記の例では、.navbar要素に.navbar-defaultというクラスを指定し、ナビゲーションバーを作っています。また、.navbar-header要素には、サイト名を表示する.a要素と、メニューを開閉するためのボタンを作る.button要素を配置しています。さらに、.navbar-collapse要素には、メニュー項目を.ul要素で作成しています。

Bootstrapを使うことで、レスポンシブデザインを簡単に実装することができます。ただし、Bootstrapが提供するスタイルに依存してしまうため、オリジナリティに欠けるデザインになることもあります。そのため、デザインにこだわりがある場合は、Bootstrapを使わずにCSSを自分で書くことも検討してみてください。

以上です！