LoginSignup
4
7

More than 3 years have passed since last update.

@7note(7note （セブンノート）)

【初心者でもわかる】レスポンシブサイトの作り方

Posted at

どうも7noteです。レスポンシブサイトの基礎から解説

「レスポンシブサイトを作りたい！」
「PCスマホ両方に対応したサイトを作りたい」
「レスポンシブが何かよくわからないから知りたい」

こんな方向けの記事です。

WEBサイトを作ってみたいとHTMLやCSSの勉強を始めたのはいいものの、なんだかよくわからない単語ばかり出てきて大変ですよね。
でも作るならかっこいいサイトを作りたいし、いつかはお客さんに出せるようなサイトを作りたいと考えますよね？

そんな方のためにWEB業界ではほぼ当たり前といっていい「レスポンシブサイト」について、初心者でもわかるように言葉の説明から作り方まで全部解説します。

レスポンシブサイトって何？

レスポンシブサイトとは「1つのHTMLファイルでPCとスマホの両方に対応したWEBサイト」のこと

WEBサイトを見るためにはブラウザを通して見てもらう必要があります。いまあなたがこのサイトを見るために使っているのもブラウザです。

※松井証券さんのHPでいまどのブラウザを使っているのかチェックすることができます。
https://www.matsui.co.jp/utility/win/info_os_check.html

ブラウザはソフトウェアです。ソフトですね。これを動かすにはハードウェア、つまり実物の機械が必要です。これにはパソコンやスマートフォンがハードウェアにあたります。

つまり、WEBサイトを閲覧するには「PC」や「スマートフォン（タブレット）」のデバイスが必要になります。

さて、知ってる人からすれば当たり前な話かもしれないですが、ゆっくり解説していきますのでお付き合いください。

「つまりレスポンシブサイトとは、PCにもスマホにも対応したWEBサイトのことである。」

レスポンシブサイトの作り方は？

まずWEBサイトを作るには様々な方法がありますが、レスポンシブサイトを作るには以下のような方法があります。

① ノーコードでwebサイトを作れるツールを使う

② wordpress等のCMSを使って既存のテンプレートを使ってWEBサイトを作る

③ HTML・CSSを自分で書いてレスポンシブサイトを1から作る

この中でも①、②については詳しく書いているサイトも多いと思います。「wordpress サイト作り方」や「web制作 ノーコード」などで検索すれば多くの方がやり方について紹介している記事が見つかると思います。
それらのサイトを参考にweb制作を進めるとかんたんにレスポンシブサイトを作ることができます。

さて、ではここからは今後自分でWEB開発をゴリゴリ進めたい方向けの解説をしていきます。

自分でHTML・CSSを書いてレスポンシブサイトを作る方法（準備編）

まず用意するものはこちら。

  • パソコン(MacでもWindowsでもOK)
  • 開発用エディタ（Dreamweaver、VScode、サクラエディタなど）
  • インターネット環境

（一般公開したいのなら以下も用意が必要）

  • ドメイン
  • サーバー

では基本的なHTMLから書いていきます。
あらかじめ任意の場所にフォルダを1つ作っておきます。基本的にすべてこのフォルダの中に作成したファイルを保存していきます。

スクリーンショット 2021-03-07 15.24.52.png

ではエディタを開きhtmlファイルを作成します。
エディタによりファイル作成方法がちがうと思いますが、とりあえず新規ファイルを1つ作って、別名で保存をするときに「index.html」と付けて保存すればhtmlのファイルが作成されると思います。
作成したindex.htmlは先程作成したフォルダの中に入れておきましょう。

スクリーンショット 2021-03-07 15.28.36.png

ではHTMLファイルの中を編集していきます。
今回はレスポンシブサイト作成するための解説が中心ですので、最低限必要なものだけ書きます。
ここはコピペでもいいと思います。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" >
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- ここにHTMLを書いていく予定 -->
  </body>
</html>

つぎにcssファイルを作成します。またエディタでファイルを新規作成し、フォルダの中に保存してください。今度はファイルの名前を「style.css」とします。
そしてstyle.cssのファイルには以下を記述してください。

style.css
@media (max-width: 768px) {

}

これでレスポンシブサイトを作成する準備ができました。

自分でHTML・CSSを書いてレスポンシブサイトを作る方法（基本編）

ではソースを書いていきます。
PC表示の時には幅が1000px、でもスマホ表示のときには画面幅いっぱいになる要素を作って行きます。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <!-- 追記 -->
    <div class="block" >Hello World!</div>

  </body>
</html>
style.css
/* PC・スマホ兼用のCSSを書く場所 */

.block {
  color: #fff;
  text-align: center;
  width: 1000px;
  background: #000;
  margin: 0 auto;
  padding: 10px 20px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
/* スマホ専用のCSSを書く場所 */

  .block {
    width: 100%;
  }

}

【PCの時(ウィンドウサイズが769px以上)】
sample.gif

【スマホの時(ウィンドウサイズが768px以下)】
スクリーンショット 2021-03-07 16.05.26.png

ではいくつかポイントを解説。
レスポンシブサイトを作る基本として、まずはPCもスマホも同一のHTMLファイルで作成するのが基本的な前提にあります。

今回の例ではblockというクラスがついた要素を用意しましたが、PCでもスマホでも表示されているHTMLファイルは同じものです。ですが、PC表示の時は幅が1000pxの要素、スマホ表示の時は幅が100%の要素になっています。
つまり、CSSでPC用とスマホ用のCSSを書き分けているのがポイントです。
細かく言えば、コメントにもかいてますが、PCスマホ兼用のCSSと、スマホ専用のCSSに書き分けています。人によっては「PC専用とスマホ専用」、「スマホPC兼用とPC専用」、「すべて兼用、タブレット専用、スマホ専用」など様々な分け方が可能です。

これを可能にしているのがこの部分↓

style.css
@media (max-width: 768px) {

}

これが何をしているかというと、この例であれば、「幅が768pxよりも小さければ{}の中のCSSを優先しなさい」的な意味になります。
こうすることで、幅が広いPCでの表示の際は、width: 1000px;が効きますが、768px以下になった際には、width: 100%;が優先されることになります。
768pxの理由としては、一般的なタブレットで見ている人にはPC表示で見せるのに一番最適な数値が768pxのためです。たとえば750pxでも大きな問題はありません。幅が750pxよりも小さいデバイスの時にだけスマホ表示になるだけです。

そしてもう一つレスポンシブサイトを作る上で重要な記述がこれ↓

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

これの役割は詳しく説明するとややこしいが、かんたんに言うなれば「デバイスに合わせて表示領域を調整する」みたいな役割を果たしています。これがないとスマホで見たときにめちゃくちゃ文字が小さくなって表示されるなど、とてもレスポンシブサイトを作れる状態にはならないので、必ず指定するようにしましょう！

※もっと詳しく知りたい方は他の方の解説記事をどうぞ↓
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

レスポンシブサイトを作る上で重要なのは大きくこの2点。ここさえ間違えずちゃんと指定していれば、あとは色々なサイトを参考にしながら試行錯誤してPC用とスマホ用それぞれのCSSを書いていくことでレスポンシブサイトを作ることができます。

自分でHTML・CSSを書いてレスポンシブサイトを作る方法（応用編）

だいぶなれてくると、レスポンシブを意識したhtmlを書くことができるようになってくるのですが、どうしても同じHTMLだけだと難しい局面が出てくる場合があります。
そんなときに使える方法として、PC専用のHTMLファイル、スマホ専用のHTMLファイルを作成する方法があります。

index.html
<div class="pc_only">パソコン専用</div>
<div class="sp_only">スマホ専用</div>
style.css
.pc_only { display: block; }
.sp_only { display: none; }

@media (max-width: 768px) {
  .pc_only { display: none; }
  .sp_only { display: block; }
}

スクリーンショット 2021-03-07 16.31.47.png

右下に写っている方がPC表示の場合です。左側がスマホ表示の時の場合です。
基本的には同一のhtmlで済んだほうがいいのですが、どうしても難しい場合はdisplay:none;を使い、このようにどちらか専用の要素を作成することも可能です。

javascriptのレスポンシブ対応

以前かいた記事で2つの方法を紹介しましたので、よければこちらもご覧ください。

【初心者でもわかる】PCとスマホでjavascriptを切り換える2つの方法（画面サイズ・デバイス）

まとめ

・htmlの<head>内にviewportの指定を記述
・cssには@media ~省略~を書いてPC専用orスマホ専用のCSSを記述していく

この2点だけ忘れず設定しましょう。あとは経験値の問題です。レスポンシブサイトを何個も作っていったり、他のサイトを検証ツールなどで見てみて真似したりすることで技術が上がっていくでしょう。

WEBサイトの作り方を紹介している記事とかは結構たくさんあるのですが、レスポンシブサイトの作り方って、結構情報がバラバラで載っていたりするのでざっと全体を通して紹介できればと思いこのようにまとめてみました。

ちょっと文章での説明が多かったので読みにくい、わかりにくいところもあると思いますがコメントいただければ解説しますのでお気軽にコメントください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

4
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
7