どうもフリーランスプログラマのTakaです。
このプロジェクトも今回で第15回目を迎えましたが、前回までPC版のhtmlとcssのコーディングをしてきました。第1回からこのプロジェクトに合わせてコーディングをしてきた方は、手元にあるプロジェクトファイルを開いてみれば、見本となるサンプルページと同じ見た目になっていると思います。
そして、今回からはスマホの縦長の画面にも対応するべくレスポンシブ仕様にしていきたいと思いますが、まずはレスポンシブとは何なのかという概要的な説明から、具体的にどのように設定するのか基本的な書き方を紹介したいと思います。
ここまでのおさらい
まずは、いつも通りここまでの本プロジェクトのおさらいですが、本プロジェクトで作成するサンプルページの見本はこちらになります。
そして、冒頭でも述べたように前回まででPC版に関しては見た目の部分は完成している状態になっています。
レスポンシブとは？
レスポンシブは、「レスポンシブサイト」や「レスポンシブウェブデザイン」などと呼ばれたりしますが、英語の「responsive」から来ています。responsiveは日本語で「反応する、応答する」等の意味になりますが、PCやスマホ、またはタブレット等の様々な画角サイズに対応するサイトということで、そのように呼ばれています。
スマホやタブレットが普及した今では、PCだけでなくこれらの端末にも対応することがマストなのでレスポンシブ構築はWebサイト制作において最低条件の１つになります。
なお、世の中にはスマホとPC用にhtmlファイルを分けてPHP等のプログラムで端末を判定してファイルを切り替えているサイトもありますが、一般的にレスポンシブサイトとは、１つのファイルのみでPCやスマホの画面サイトに対応しているWebサイトのことを指すことが多いです。
Googleもレスポンシブでの構築を推奨してたりしますね
viewportの設定をしよう
では、実際にレスポンシブサイトをどのように作成するのか解説していきたいと思いますが、まずレスポンシブサイトにするためにはviewportの設定をhtmlに記述する必要があります。
viewportとは、簡単に言うとPCやスマホやタブレット等の様々な端末で適切にコンテンツを表示させるために欠かせないmetaタグになります。この記述がないといくらCSSでスマホ用のスタイルを設定しても希望通りの見た目にならないので忘れずに記述してください。
具体的には下記のようにhtmlのhead内に記述します。
設定の仕方等細かくあるのですが、最初の内はこの記述をおまじないとしてコピペで使っておけば大丈夫だと思います。
メディアクエリとは？
では、実際にコーディングしながら説明していきたいと思います。
なお、構築方法はいくつかありますが、今回は一番主流である「メディアクエリ（Media Queries）」を使った方法で構築していきたいと思います。
メディアクエリとは、css3で採用された仕様でcssに記述（もしくはcssの読み込みの際）に使います。
このメディアクエリを使うことで、指定したサイズ以上（以下）に限定したスタイルを記述することができます。
メディアクエリをCSSに記述する
cssファイルに記述する場合は、具体的に下記のように指定することで特定のサイズでスタイルを切り分けることができます。
上記のコードを見てみると、「@media screen and」のあとに「max（min）-width」プロパティがあり、それに具体的なサイズが指定されていますが、そのサイズを境に指定したスタイルが適用されるということですね。
上記コードにもコメントアウトしていますが、max-widthプロパティで指定されているときは、横幅がそのサイズまで適用され、逆にmin-widthプロパティの場合は、そのサイズからスタイルが適用されるということになります。
メディアクエリで読み込みファイルを分ける
上記は、CSSファイルに記述して特定のサイズを境にスタイルを分ける方法になりますが、htmlファイルに下記のように記述することで、特定サイズを境に読む込むcssファイルを切り替えることも可能です。
メディアクエリを設定してみる
では、実際に上記の記述に倣ってメディアクエリをプロジェクトファイルに記述してみます。
まずは、style.cssを開いて一番最後に下記のように記述します。
これで、このメディアクエリセレクターの中に記述するスタイルに関しては、768以下に適用されるようになります。つまり、ここにスマホ用のスタイルを書けばいいということになりますね。
では、このセレクターの中に、下記のようにhtmlとbodyセレクターに適用される記述を加えてみましょう。
見てわかる通り、フォントサイズを指定したものになります。
実際にhtmlファイルをブラウザで開いて、ブラウザの横幅を768px以下にしてみてください。些細な違いなので分かりづらいかもしれませんが、全体のフォントサイズが768pxを境に変わっているのが分かるかと思います。
なお、今回は上記のようにスマホ用スタイルをメディアクエリを使って記述するので、PCファーストの記述になってしまいますが、本来はスマホファーストで記述することが推奨されています。つまり本来は、スマホ用（768以下）のスタイルをデフォルトにして、768以上のスタイルをメディアクエリを使って記述した方がより良いということになります。
まとめ
ということで、今回からスマホの画面にも対応するべくレスポンシブサイトの構築方法の初回としてレスポンシブの概要、それから実際にメディアクエリを使ってレスポンシブ化する方法を紹介しました。
本記事のまとめ
- レスポンシブの概要
- メディアクエリの概要
- メディアクエリを使って実際にコーディング
てことで、今回はこんな感じですね。次回は今回の続きとしてスマホ用スタイルの記述の続きをやっていきたいと覆います。
それでは今回はここまで！また！