〔初心者向け〕レスポンシブデザインの作り方

レスポンシブ・デザインとは？
まとめ
1. HTMLファイルの記述

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

レスポンシブ・デザインについて解説します。

レスポンシブ・デザインとは、同じHTMLで作られたページを、PCで見るのとスマホやタブレットで見る場合で違ったデザインにすることです。スマホでHPを見る機会が多くなり、スマホ用サイトの設計が欠かせなくなってきました。

まずは、サンプルをご覧ください。

PC画面で見た画像です。↓

スマホで見ると、このように画面に合わせて表示されるように設計していきます。↓

設定は簡単！３つの手順だけです。

１．viewportの設定

２．外部CSSファイルの読み込み

３．メディアクエリの設定

viewportを設定しましょう

簡単に言うと、「表示領域」のこと。画面の幅に合わせて表示してくれる役割があります。HTMLファイルを開き、以下のコードを<head>…</head>内に記述します。↓

<meta name="viewport" content="width=device-width, initial-scale=1">

外部CSSファイルを読み込みましょう

CSSファイルは、PC用、スマホ用と２種類用意します。PCで表示するものを、スマホで非表示にする、といった設定も簡単にできます。

以下の２種類のコードを<head>…</head>内に記述します。↓

<link href="style1.css" type="text/css"　media="screen" >
<link href="mobile1.css" type="text/css"　media="screen" >

上のファイルがPC用、下のファイルがスマホ用です。ファイル名(style1.cssとmobile1.css)はサンプルなので、それぞれお持ちのCSSファイル名に変更してください。

これで、CSSファイルを読み込む準備ができました。CSSファイルはHTMLファイルと同じディレクトリ内に置いてください。

このように、2種類のCSSファイルを用意することで、後々のサイト管理が楽になってきます。PCに表示する画像を、display : none; を使ってスマホでは非表示といった設定も簡単にできます。

メディアクエリを設定しましょう

PC用メディアクエリ

まず、PC用のメディアクエリです。画面の幅が481px以上になった時の見え方を指定します。

PC用CSSファイルの1行目に以下のコードを記述します。↓

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

{}の中に、CSSコードを書いていきます。

波カッコ内に入れ子のようになります。最後はこのように、波カッコが２つ並び何となく不安かもしれませんが、これで大丈夫です。↓

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

.main-image{
  width:650px;
  height:450px;
  margin: 30px auto;
}
}

スマホ用メディアクエリ

次は、スマホ用のメディアクエリです。画面の幅が480px以下になった時の見え方を指定します。

スマホ用CSSファイルの1行目に以下のコードを記述します。↓

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

同じく、｛｝の中にCSSコードを書いていきます。

 @media screen and (max-width:480px){
    
    img{
        width:100%;
    }
    }

画面の幅が480px以下になったら、画像の幅を100％にするといった設定になっています。このように、それぞれのCSSファイルにコードを書いていきます。ファイルを2種類用意するだけで、混乱が避けられるのでこの管理方法はおすすめです。

まとめ

以下の3つの手順で、レスポンシブ・デザインが設計できるようになります。

１．viewportの設定

２．外部CSSファイルの読み込み

３．メディアクエリの設定

HTMLファイルの記述

HTMLファイルは以下のような記述になります。↓　いたってシンプルです。管理も楽です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link  href="style1.css" type="text/css" media="screen">
<link  href="mobile1.css" type="text/css" media="screen">
<title>responsive sample</title>
</head>
<body>
<div class="main-image">
 <img src="3251907_s.jpg"> 
</div>
</body>
</html>

いいかがでしたか？

初心者向けに、簡単な例で解説しました。

スマホサイト向けに、レスポンシブデザインに挑戦しましょう！

[初心者向け]レスポンシブ・デザインの作り方