目次
こんにちは、後藤です。
以前の記事で、ホームページ制作におけるマルチデバイスへの対応の必要性を紹介しました。
今回は、マルチデバイスへ対応する方法の一つである、レスポンシブデザインでホームページを制作する方法を紹介します。
viewportを設定する
viewportとは？
viewportとは、スマートフォンやタブレットに設定されている仮想ウィンドウサイズを調節するものです。
例えば、iPhoneのデフォルトの仮想ウィンドウサイズは980pxに設定されています。
viewportを設定しないと、後述するメディアクエリを設定しても、PCと同じ表示になってしまいます。
記述方法
html内に記述します。
<head>タグの中に記述する必要があるので注意しましょう。
|
1 2 3 4 5 6 7 8 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> //viewportの設定部分 <meta name="viewport" content="width=device-width, initial-scale=1"> </head> |
「width=device-width」は、仮想ウィンドウサイズの横幅のピクセル数を端末の画面幅に合わせるという設定です。
「initial-scale=1」は、初期のズーム倍率を１倍にするという設定です。
基本的には、この設定で良いでしょう。
他にも以下の設定があります。
height：仮想ウィンドウサイズの高さのピクセル数、端末の画面の高さは「device-height」と設定
minimum-scale：最小のズーム倍率
maximum-scale：最大のズーム倍率
user-scalable：ズーム操作の有無、「yes」「no」で設定、デフォルトでは「yes」
メディアクエリを設定する
メディアクエリとは？
メディアクエリとは、表示されている環境によって指定するスタイルを切り替える機能です。
記述方法
<link>で指定する
cssファイルを読み込むときに<link>を使用しますが、mediaを追記することで切り替えることができます。
このように記述します。
|
1 2 3 4 |
/* 画面サイズが768pxまでsmp.cssのスタイルを適用する */ <link rel="stylesheet" href="smp.css" media="screen and (max-width:768px)"> /* 画面サイズが769px以上はpc.cssのスタイルを適用する */ <link rel="stylesheet" href="pc.css" media="screen and (min-width:769px)"> |
css内で指定する
css内でメディアクエリを指定することも可能です。
１つのcssファイルで管理できるため、こちらの方がおすすめです。
このように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@charset "UTF-8"; /* @media内以外は全ての横幅で読み込む */ p { color: #000; font-weight: bold; } @media only screen and (max-width: 768px) { /* 横幅が768pxまではここを読み込む */ p { font-size: 15px; } } @media print,screen and (min-width: 769px) { /* 横幅が769px以上はここを読み込む */ p { font-size: 20px; } } |
上記の例では、全ての横幅でpの色を#000、フォントの太さをboldと指定、768pxまではフォントサイズを15px、769px以上はフォントサイズを20pxと設定しました。
まとめ
今回は、レスポンシブデザインの設定方法を解説しました。
レスポンシブデザインを活用して、スマートフォンユーザーにもPCユーザーにも優しいホームページを制作して行きましょう。
