レスポンシブデザインを導入した当日ついでに方法を解説してみた
公開:2019.08.21 更新:2019.09.10

今回、当ブログにレスポンシブデザイン対応をしたくなったので、やりました。(唐突)方法を一から解説していきます。

レスポンシブの下準備

下準備とか、かっこつけたこと言いましたが、やることは二つです。

CSSファイルを複数作って、個々の端末用に割り振る方法もありますが、ここでは既にあるCSSファイルに書き込む方法で解説していきます。

HTMLファイルへの文章追加

レスポンシブデザインを導入するにはまず、「このサイトはレスポンシブデザインです」ということをHTMLファイルの<head>タグに書いてやります。

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

上のコードを<head>タグの中に書いてください。後でやろうと思って忘れないようにしてください……。私はこれを忘れてたが為に30分ほど作業停止しました。(ポンコツ)

※<meta>タグはwebサイトの情報を伝える役目を持ちます。

CSSファイルへの追加

次にCSSファイルの一番下にコードを追加していきます。ちなみに一番下に書くのは、既に書かれているCSSに上書きされない為ですね。

以下のコードを書きます。

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

}

この{ }の中に、レスポンシブデザイン用のCSSを書いていきます。

コードの中のmax-width:○○○はブレイクポイントと言って、どれくらいの画面サイズからページ表記をレスポンシブデザインに切り替えるかの為の数値です。

決め方としては、時の流行スマホの画面サイズを考えるようにしましょう。ちなみに、ブレイクポイントは増やしても問題は無いので

@media screen and (max-width:600px) {
  h2 {
    font-size: 10px;
}

@media screen and (max-width:400px) {
    font-size: 8px;
}

というように複数の端末用に用意することもあります。まあ、労力的にはおすすめはしませんが…….。

レスポンシブ導入!

先ほど「下準備」と言いましたが、実はもうこれで終わりです。(笑)

じゃんじゃんCSSを書き込んでいきましょう!

ここからは使えれば楽になるレスポンシブデザインの為?の知識をご紹介します。

chromeの検証機能

みんな大好きgoogleさんは開発者向け機能もいっぱいです。ちょっとクリックすれば、機能を使用することが出来ます。

まあ、主要ブラウザならだいたい似たような機能はあるかもしれません…..。

まずはchromeを開いて、画面上で右クリックしてみましょう。

chromeの検証機能解説1
↑右クリックすると「検証」が出てくる

出てきた「検証」ボタンをクリックしましょう。

chromeの検証機能解説2
↑検証機能の表示ページ

これが検証機能画面です。利用している人なら知っていると思いますが、この機能を使えば、わざわざファイルをアップロードしなくてもコーディングによる変化を見ることが出来ます。いつもお世話になっております。

chromeの検証機能解説3
上のなんかモバイルっぽいボタンを押す。

開けたら、検証画面の「Elements」の左にあるなんかモバイルっぽいボタンを押します。

chromeの検証機能解説4
スマホ用の画面が出てきた!

はい!これで完了です。この画面と普通の画面を切り替えることで、効率的にレスポンシブデザインのコーディングが出来そうです。

…….ついでにいうと、私のページ全然対応してないですね……。ちゃんとやったんだけどなあ….。おかしいなあ….。

直さなきゃ。

レスポンシブデザインで便利なCSSの単位

font-sizeプロパティなどではpxなどの単位を使いますが、なんでもかんでもpxを使っていると、いちいちレスポンシブデザインの為に書くコードが増えてしまいます。

そんなときに便利なのが「vw」「vh」!

※vw=viewport-width、vh=viewport-heightの略。

この単位達を使うと、Webページを閲覧しているユーザーが使用している画面サイズに応じた単位サイズ(ビューポートという)を使うことが出来ます。

例えばvwの場合、100vwで閲覧者のブラウザ横幅いっぱいのサイズとなります。

もちろん、フォントサイズに限った単位ではないのでボーダーや、マージンにも使うことが出来ます。これを多用すれば、レスポンシブデザインもやりやすくなりますね。ぜひ、試してみてください!

まとめ

今回は我がブログもスマホに対応すべくレスポンシブデザインに挑戦したので、解説をしてみました。

やる前は、レスポンシブデザインとか余裕wwwとか思っていたんですけどね。丸二日かかりましたよ。皆さんも計画は大事にしましょう。(大きなお世話)

ではまたいつか!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。