HTML/CSS

レスポンシブサイトの作り方をめっちゃわかりやすく書いてみた【Bootstrap4】【初心者向け】

レスポンシブサイトつくりたいんです
『レスポンシブサイト』の作り方を知りたいんだけど・・どれくらい難しいんだろう・・できたら簡単につくりたいんだけど・・
アオキ
こんなお悩みにお応えさせていただきます。
Sponsored link

そもそも『レスポンシブサイト』って何?

『レスポンシブサイト』を一言で言えば、

パソコンでもスマホでもいい感じに表示されるサイト

と言っていいのかなと思います。

2000年頃は、ホームページといえばパソコンの事だけ考えていればよかったんですが、

2008年にiPhone3Gが発売されて以来、スマホを持つ人が年々少しずつ増えていきました。

iPhone3Gの頃はまだ『レスポンシブ』なんて言葉はなかったと思いますが、

パソコン用のホームページをそのままスマホで表示させていたため、

写真は小さいわ文字は小さいわで、毎回毎回ズームして見るという手間がかかっていました。

当時のデザイナー
パソコンでも見やすく、スマホでも見やすくしたいっ!

というニーズが徐々に高まって、

当時のデザイナー
パソコン用とスマホ用で別々にページを作ったらいいんじゃない?!

っという流れになりました。

例えば僕のホームページのアドレスは https://coinbaby8.com なのですが、

パソコンでみたら https://coinbaby8.com というアドレスのままなんだけど、
スマホで見たら、 https://coinbaby8.com/sp といった、

しれっとアドレスが変わってるサイトがでてきました。

(2018年現在でもこの作り方のホームページはたくさんあります)

パソコンとスマホでファイルを分けると、

  • パソコンとスマホで別々にキレイに表示できる

というメリットはあるものの、一方で、

  • 修正する必要があるときはパソコン・スマホ両方修正の手間がかかる

というデメリットも発生していて、

さらに最近は、

  • テレビの画面ほどの大きいモニター
  • 一般的なノートパソコン
  • iPadなどのタブレット
  • iPhoneやAndroidなどのスマホ

など、モニターのサイズがさらに多様になってきたこともあり、

謎の天才
全部のモニターにぴったり合わせるのしんどくない?
謎の天才
それより同じファイルでパソコンもスマホもいい感じに表示できた方が修正も楽じゃない?

っと天才達が思ったのかどうかわかりませんが、

同じファイルでいろんなモニターサイズに調整できるような方法が誕生しました。

この方法で作られているサイトの事を、

『レスポンシブサイト』もしくは、『レスポンシブ対応されたサイト』

などと呼ぶようになりました。

※レスポンシブ・・英語だと「反応がいい」という意味のようです。

レスポンシブサイトの作り方の基本

同じファイルでパソコンやスマホをいい感じに表示させる『レスポンシブサイト』の作り方は、大きく3つあるかなと思います。

  1. CSS( シーエスエス)で1つずつ調整する
  2. CSS(シーエスエス)があらかじめ調整された便利箱を使う
  3. CSS(シーエスエス)が調整された便利箱をさらに調整する

まずは1番目、基本的な作り方から。

『レスポンシブサイト』と言っても必要なのはパソコン用ホームページと同じで、

  • HTML(エイチティーエムエル)
  • CSS (シーエスエス)

の2つの知識が必要になります。

HTMLとCSSがピンと来ない・・という方はこちらの記事を参照ください。

『レスポンシブサイト』にするためには、HTMLもCSSも対応が必要なのですが、まずはHTMLから。

普通のHTML(エイチティーエムエル)はこんな感じ。

レスポンシブ用のHTML(エイチティーエムエル)はこんな感じです。

違いはというと、この1行。

viewport(ビューポート)というのは、表示される範囲の事で、

width(ワイズ)は幅で、 『幅 イコール デバイス(device)の幅』 となっています。

パソコンでもスマホでもタブレットでも、幅いっぱいで使いまっせーというような意味になります。

initial-scale(イニシャルスケール)は、最初に表示される時の倍率で、ほとんどの場合1.0にしておけばOKです。

他にも、minimum-scale(ミニマムスケール)などあったりしますが、

HTML(エイチティーエムエル)に関しては、この1行だけでOKです。慣れたら簡単ですね。

一方、ちょっと面倒(というか手間がかかる)のが、CSS(シーエスエス)の方です。

1. CSS( シーエスエス)で1つずつ調整する

『レスポンシブサイト』の作り方は、CSS(シーエスエス)の機能である

『メディアクエリー』というものを使います。

先にコードを書くとこういう形になります。

書き方としては、


1. アットマークの後にmedia と書いて、
2. width、min-width、max-widthのいずれかを書いて、
3. その中に一般的なCSS(シーエスエス)を書いていくと。

なので、感のいい方は気づいたかもですが、

実は同じファイルといえど、パソコンとスマホで別々にCSS(シーエスエス)を書いていく必要があります

一つずつ微調整できるのでもちろん綺麗な仕上がりにはなるのですが、

アオキ
その分時間はかかるかな・・

という体感です。

謎の天才
毎回毎回一こずつ調整すんのめんどいな・・ なんか手はないもんか・・
謎の天才
・・・
謎の天才
そうや!
謎の天才
よく使う幅をあらかじめ準備しといたらええねや!

っと関西弁で思ったのかどうかは知りませんが、

2013年、CSS(シーエスエス)の常識を変えるような革新的なツールが発表されました。

それが、

ウェブ業界では知らない人はいないとも言われる超有名CSS(シーエスエス)便利箱、

『Bootstrap3(ブートストラップ)』です。

Sponsored link

レスポンシブサイトと言ったら『Bootstrap3』

2013年にリリースされた『Bootstrap3(ブートストラップ3)』は、

あらかじめ準備された幅の設定『グリッドシステム』に合わせて組み込むだけで、

CSS(シーエスエス)をほとんど触らずに『レスポンシブサイト』がつくれてしまうという、

まさに画期的なツールでした。

さらには、ホームページ作成ではよく使われる、

ボタンやスライドショー、お問い合わせフォームにテーブルなどもあらかじめ部品が用意されていて、

本当に簡単操作で『レスポンシブサイト』がつくれるようになりました。

ゲームでいったらプレステ2のような圧倒的な人気度で、またたく間にウェブ業界を席巻しました。

なので今でも、

『レスポンシブサイト』といえば真っ先に『Bootstrap3(ブートストラップ3)』が出てくる人が多いと思います。

一方、人気が出すぎたあまりに反動もあり、

『Bootstrap3(ブートストラップ)っぽい』サイトもたくさん生まれてきて、

『Bootstrap3(ブートストラップ)っぽい』イコール ダサい

なんていう風潮もでてきたりして、

『Bootstrap3(ブートストラップ3)』の『レスポンシブサイト』に特化した『グリッドシステム』だけつかって、

デザインは別でつくる、なんて流れもでてきました。

とはいえやっぱり今でも、

『レスポンシブサイト』といえば『Bootstrap3(ブートストラップ3)』と言っても過言ではないくらいの影響度、大発明だったと思います。

レスポンシブサイトの作り方 地味だけどスゴい『Bootstrap4』

2013年の『Bootstrap3(ブートストラップ3)』の発表から5年たった、2018年1月。

ついに、『Bootstrap4(ブートストラップ4)』の正式版がリリースされました。

さぞかし話題になるかと思いきや、

『Bootstrap3(ブートストラップ3)』の影響力が強すぎたせいで、

『Bootstrap4(ブートストラップ4)』は機能のわりに地味な存在になっていたりします。

アオキ
ちょうどプレステ2全盛期の後の プレステ3みたいな。

とはいえ、『レスポンシブサイト』を簡単につくれるための機能はさらに充実し、

『Flexbox(フレックスボックス)』という便利レイアウト機能にも標準対応し、

アオキ
これから『レスポンシブサイト』をつくるなら、まずは『Bootstrap4(ブートストラップ4)』でいいんじゃないかな

と思います。

使い方も簡単で、

こういったコードをメモ帳に保存して開くだけで、『レスポンシブサイト』ができてしまいます。

あとは、『Bootstrap4(ブートストラップ4)』の公式サイトの中から、

【公式サイト】

Components(コンポーネント:部品)の中の、例えばButtons(ボタン)などをクリックすると、

その中にソースコードが書いてあるので、それをHTML(エイチティーエムエル)にコピーするだけでキレイなボタンがつくれるようになったりします。

アオキ
いやぁ、便利な世の中になったもんだ。
Sponsored link

さいごに

まとめると、


1. CSS( シーエスエス)で1つずつ調整する

の基礎の仕組みを知ったあとは、


2. CSS(シーエスエス)があらかじめ調整された便利箱を使う『Bootstrap4(ブートストラップ4)』

でさくっと『レスポンシブサイト』をつくる、というのがいいのかなと思います。


3. CSS(シーエスエス)が調整された便利箱をさらに調整する

については、ちょっと複雑+量も増えるので別記事で書くことにします。

今後ますますスマホが普及するだろうし、『レスポンシブサイト』の重要性も増してくると思うので、

ホームページを作りたいなら、『レスポンシブサイトを作る方法』をしっかり知っておいた方がいいかなと思います。

PS. 『レスポンシブサイト』つくりたいけど難しそう・・

という場合はぜひご遠慮なく下記よりお問い合わせくださいませ。

できる限り、ご相談にのらせていただきたいと思いますので。

お問い合わせ

『レスポンシブサイト』の作り方おすすめ本はこちら

関連記事

  1. HTML/CSS

    【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)【P5.j…

    遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろ…

  2. HTML/CSS

    パソコンでホームページをつくる5つの方法とサーバー4種類をまとめてみました【初心者向け】

    子供向け無料プログラミング寺子屋『CoderDojo熊本』第1回のアン…

  3. HTML/CSS

    楽天トラベルのカスタマイズページをできるだけ簡単に手早くつくる方法をまとめてみた

    楽天トラベルのカスタマイズページを作ってみたいと思ってはいるんだけど、…

  4. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

    先日とあるコミュニティで質問があがりまして。教えたがり性分の身…

  5. HTML/CSS

    【Sass】の書き方をアップデートすべくbulmaフレームワークを読み解いてみる【初心者向け】

    ホームページなりWebサービスを作ろうと思ったらもれなく『HTML…

  6. HTML/CSS

    ホームページを作成して売上をあげるために知っておきたい事

    今回の記事ではこんな悩みにお答えします。ホームページって稼…

Sponsored link

最近の記事

  1. 検索システム

    【検索システム】をつくってみた【実際にログインしてさわれます】
  2. クリエイティブコーディング

    三角関数の使い方〜わかりやすさ重視でまとめてみた【動画あり】
  3. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  4. P5.js (Processing)

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
  5. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
PAGE TOP