初心者向け！レスポンシブデザイン制作の簡単レシピ

この記事では、レスポンシブデザインのWebページ制作に関する手法を紹介しています。
初心者の方でも理解しやすいように、分かりやすく解説していきます。

レスポンシブデザインの基礎知識

まずは、レスポンシブデザインに関する基本的な知識をお伝えします。

レスポンシブデザインとは？

レスポンシブデザインとは、スマホに対応したWebページを制作する手法です。

端的に言えば、利用者のデバイスの画面サイズに応じてデザインが変わります。PC用のデザインとスマートフォン用のデザインがあり、それぞれのデバイスで最適な表示が可能になります。

スマートフォン対応の他の方法もありますが、レスポンシブデザインは特に推奨されています。Googleもこの手法を支持しており、他の方法と比べて多くの利点があります。

スマートフォン対応の詳細は、以下のリンクで詳しく説明しています。レスポンシブデザインと他の方法の違いについても触れていますので、ぜひ参考にしてください。

» レスポンシブだけじゃない！スマホ対応の方法3つと特徴まとめ ｜ 株式会社ロックビル

どうやって導入すればいい？

スマートフォン対応にはレスポンシブデザインが最適ですが、具体的にはどのように導入するのでしょうか？

一つの方法は、自分でコーディングを行うことです。CSS3のメディアクエリを使用し、HTMLとCSSを書いていきます。この記事では、その方法に焦点を当てて説明します。

もう一つの方法は、HTMLテンプレートやWordPressテーマなどを使用することです。これにより、コーディングなしでレスポンシブデザインを実現でき、制作の手間を省けます。

テンプレートを使用する方が簡単ですが、メディアクエリの基本を理解しておくことは重要です。ページの修正や更新時に役立つ知識となります。

レスポンシブデザイン制作の簡単レシピ

レスポンシブデザインの作成方法について説明します。

レスポンシブデザインをWebページに導入する方法はいくつかありますが、ここではメディアクエリを使用した方法を紹介します。

まず、メディアクエリについて簡単に説明します。これはCSS3で追加された機能で、デバイスごとに適用するCSSを切り替えるものです。一つのHTMLファイルに対して複数のCSSが適用されるイメージです。

以下の解説では、この点を踏まえてご理解いただければと思います。

HTMLにviewportを記述する

メディアクエリを使用するためには、HTMLファイルのheadセクションに以下のメタタグを追加してください。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

viewportの詳細は割愛しますが、拡大率やピンチ操作の設定を行っています。このメタタグがないとメディアクエリは機能しませんので、注意してください。

CSSにメディアクエリを設定する

次に、CSSにメディアクエリを用いたスタイルを記述していきます。

例えば、スクリーンが640px以下のデバイスに特定のスタイルを適用したい場合、以下のように記述します。

@media screen and (max-width: 640px) {
    /* スタイルを記述 */
}

このスタイルは640pxより大きなスクリーンには適用されません。そのため、640px以上のスクリーン用に別のスタイルを設定する必要があります。以下のコードを参考にしてください。

@media screen and (max-width: 640px) {
    /* スタイルを記述（640pxまでのスクリーン用） */
}

@media screen and (min-width: 641px) {
    /* スタイルを記述（641px以上のスクリーン用） */
}

min-widthを使用すると、640px以上のディスプレイサイズに適用するスタイルを指定できます。これにより、異なるスクリーン幅に対応する複数のスタイルを設定できます。

この方法で、デバイスごとに異なるデザインを適用するレスポンシブデザインが完成します。

メディアクエリの使い方まとめ

メディアクエリについて、さらに詳しく解説します。

属性について

先ほどの例ではmin-widthという属性を使用しました。これは「指定したサイズ以上のスクリーンにスタイルを適用する」という意味です。

メディアクエリには他にもいくつかの属性があります。以下に一般的に使用される属性をまとめました。

min-width	指定した値以上のスクリーンに適用する
max-width	指定した値以下のスクリーンに適用する
orientation	スクリーンの向き（portrait、landscape）に応じてスタイルを適用する

これらの条件は単独で使用することも、複数組み合わせて使用することも可能です。以下に例を示します。

@media screen and (min-width: 641px) and (max-width: 980px) {
    /* スタイルを記述 */
}

この例では、641px以上980px以下のスクリーンサイズに適用するスタイルを指定しています。andを使って複数の属性を組み合わせることができます。

ファイルを分ける方法

メディアクエリのもう一つの使い方として、異なるスクリーンサイズごとにCSSファイルを分ける方法があります。

例えば、PC用のスタイルを「pc.css」に、スマートフォン用のスタイルを「sp.css」に分けて管理することができます。

この場合、HTML側でそれぞれのCSSファイルを以下のように読み込む必要があります。

<link href="./sp.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 640px)" >
<link href="./pc.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 641px)" >

あとがき

レスポンシブデザインの制作方法についてご紹介しました。この記事で説明したように、スマートフォン対応の手法としてレスポンシブデザインは非常に重要です。Web制作に携わる方は、この技術を身につけておくことをお勧めします。