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

webコーダーとして仕事をする上でHTMLとCSS以外に覚えておくべき事の一つとして、レスポンシブというものがあります。

ここではレスポンシブサイトが何なのか、と言うところから作り方まで解説していきます。ちなみに作ったサイトをレスポンシブサイトにすることを、よくレスポンシブ対応とか言ったりします。

あとここで解説するレスポンシブ対応の手法は、もっとも良く使われる手法であるメディアクエリを使用した方法になります。

スポンサーリンク

レスポンシブサイトについて

レスポンシブサイトとは

WEBサイトを見るときに、使う端末によって見た目が変わるWEBサイトのことをレスポンシブサイトと呼びます。具体例として、PC上で画像が3つ横並びになっているサイトが、スマホだと画像が縦並びに変わったりするアレです。

レスポンシブにする意味

スマホ用やPC用など、WEBサイトを端末ごとに用意せず一つのWEBサイトで済むからです。SEOを考慮すると、同じ内容のWEBサイトを複数用意するのは宜しくない上に、なにより端末ごとにWEBサイトがあったら、更新する時に各サイトごとに作業をする必要があるので、非常に手間です。

レスポンシブサイトを作る方法

JavaScriptで制御したりBootstrapを突っ込んでみたりと、いくつか方法がありますが、一般的なのはメディアクエリを使用して、ブラウザの表示領域に合わせてレイアウトを変更する方法です。

レスポンシブ対応のやり方

メディアクエリ(Media Queries)を設定

HTMLファイルのheadタグとtitleタグの間に下のコードを入れます。

ブレークポイントを設定

CSSでレスポンシブさせたいクラス{}(中括弧)内にスタイルを記述します。ブラウザの表示領域がand以降のpxの時に中括弧の中のスタイルを適用する、という意味になります。

スマホ用のブレークポイント

タブレット用のブレークポイント

使用例

スマホ表示の時に大見出し(h1タグ)の文字を小さくしたい時の記述。

これでh1タグの文字は32pxで表示され、ブラウザの表示領域が480px以下(スマホ表示)でh1タグの文字が20pxで表示されるようになります。

コメント