【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

2021 / 03 / 14

HTML, CSS

Data illustrations by Storyset

Webサイトをレスポンシブ対応して作る方法を、実際にコードを書きながら解説していきます。
以下のような人向けです。

ProgateのHTML & CSSコースの初級をクリアした。
エディタを自分のパソコンにインストールした。
エディタを使って簡単にWebサイトを作ってみた。

上記のことができていれば、あとは「お手本を見ながらコードを書きまくる」必要があります。
書籍をお手本にするのがおすすめです。

ただ、お手本は当たり前のように「レスポンシブ対応」しています。
いきなり「レスポンシブ対応」されても分からなくなるはずです。

「レスポンシブ対応」とは、スマホ・タブレット・PCなど、大きさの異なる画面幅に応じてWebサイトの見た目が最適になるよう調整されていることです。

「レスポンシブ対応」は言葉で説明しても伝わりづらいと思います。

そこで、この記事を通して実際にレスポンシブ対応のサイトを一つ作ってみましょう。

もし、「まだProgateしかやったことない....」という人は以下の記事を参考にエディタを自分のパソコンにインストールしてみてください。

【初心者向け】Visual Studio Codeの使い方【図解あり】

記事を読む

サイトを作る準備

エディタはVS Codeを使っていきます。

デスクトップ上などに空のフォルダを作ってください。
フォルダの名前は何でもいいです。
思いつかなければ「responsive_site」としましょう。

VS Codeを起動し、左上の「ファイル」から「開く」をクリックします。
「responsive_site」と名前をつけたフォルダを開きます。

「ファイル追加」ボタンから、以下の2つのファイルを作ります。

index.html
style.css

これでサイトを作る準備は完了です。

HTMLに基本設定を記述する

「index.html」にコードを記述していきます。

まずは、上の画像のようにHTMLの基本設定を記述します。
レスポンシブにする場合、上の画像の赤枠で囲んだ記述が必ず必要です。
ProgateのHTML & CSS初級コースでは書かなかったコードです。

以下に上の画像と同じコードをのせます。
ここはコピペでいいです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Responsive</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

ここで、ブラウザでの表示を確認しておきましょう。

左側に表示されている「index.html」を右クリックして、「Open with Live Server」をクリックします。
「Live Server」という拡張機能がないと、「Open with Live Server」は表示されません。
まだ「Live Server」をインストールしていない方は、以下の記事を参考にインストールしてください。

【初心者向け】Visual Studio Codeの使い方【図解あり】

記事を読む

記事の通りにVS Codeをインストールしていれば、「Google Chrome」が起動します。
まだ何も表示されておらず、真っ白な状態だと思います。

次に、Google Chromeのデベロッパーツールを開いてスマホ表示にしておいてください。
Google Chromeのデベロッパーツールでスマホ表示にする方法は、以下の記事で解説しております。

【Chrome】Webサイトのスマホ表示、PC表示を確認する

記事を読む

上の画像のようになったと思います。

では、bodyの中にコードを記述していきます。

headerとfooter

ここからは手打ちでコードを記述するのがおすすめです。
まずはheaderとfooterを追加します。
index.htmlに以下のコードを追加してください。

...略...
<body>
  <header>
    <div>Responsive</div>
    <nav>
      <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
      </ul>
    </nav>
  </header>

  <footer>
    <div>Responsive</div>
    <nav>
      <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
      </ul>
    </nav>
  </footer>
</body>

上の画像のような表示になります。

Progateでは<header>、<nav>、<footer>は出てこなかったと思います。
どれもブロック要素のひとつです。
全部<div>に置き換えても表示は変わりません。

でも、<header>や<footer>を使うことで「これはheaderです」、「これはfooterです」とはっきり示すことができます。
こうしておく方が、Webサイトとしての評価は高くなります。

では、CSSにコードを記述していきます。
style.cssに以下のコードを書きます。
少し長いですが、頑張って手打ちしてください。

/* リセット */
body, h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

/* ヘッダー */
header {
  padding: 10px 0;
  background-color: #26d0c9;
  color: #ffffff;
}

header div {
  margin-bottom: 10px;
  font-size: 36px;
  text-align: center;
}

header nav ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

header nav ul li:not(:last-child) {
  margin-right: 30px;
}

/* フッター */
footer {
  padding: 20px;
  background-color: #2f5167;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
}

footer div {
  font-size: 20px;
}

footer nav ul {
  list-style-type: none;
}

footer nav ul li:not(:last-child) {
  margin-bottom: 10px;
}

上の画像のような表示になったと思います。

次はメインコンテンツを追加していきます。

mainを追加する

headerとfooterの間に、メインコンテンツを追加します。
divを使ってもいいんですが、ここではmainタグを使います。

...略...
<body>
  <header>
  ...略...
  </header>

  <main>
    <h1>Hello, World!</h1>
    <p>レスポンシブサイトを作ろう</p>
  </main>

  <footer>
  ...略...
  </footer>
</body>

mainにCSSを割り当てます。

/* ヘッダー */
...略...

/* メイン */
main {
  padding: 250px 0;
  background-color: #eeeeee;
  text-align: center;
}

main h1 {
  font-size: 42px;
}

/* フッター */
...略...

上の画像のような表示になります。
スクロールすればfooterも見えると思います。

ここまで書いてきたCSSは、「スマホ表示、PC表示のどちらにも適用されるCSS」です。

続いてPC表示のレイアウトを作っていきます。

PC表示用のCSSを書く

上の画像のようにしてGoogle ChromeのデベロッパーツールをiPad表示にしておいてください。

iPad表示でサイト全体を見てみます。
headerには文字が真ん中に集まり過ぎてる気がします。
mainの文字はなんか小さく見えます。
この辺りを調整していきます。

どうするかというと、「画面の幅がタブレット以上の時専用のCSSを書く」っていうのをやっていきます。
「画面の幅がタブレット以上」なので、今回は「タブレット表示」も「PC表示」も同じと考えます。

iPadは縦表示の場合、画面の横幅は768pxです。
画面の横幅が768px以上のとき、別のCSSを適用するように設定していきます。

style.cssに「PC表示用」の部分のコードを追加してください。

...略...

/* フッター */
...略...

/* PC表示用 */
@media (min-width: 768px) {
  header {
    padding: 20px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  main h1 {
    font-size: 72px;
  }

  footer {
    padding: 100px 60px;
  }
}