ホームページ制作レスポンシブデザインでホームページを制作する方法hatenabookmark目次viewportを設定するviewportとは?記述方法メディアクエリを設定するメディアクエリとは?記述方法<link>で指定するcss内で指定するまとめこんにちは、後藤です。以前の記事で、ホームページ制作におけるマルチデバイスへの対応の必要性を紹介しました。今回は、マルチデバイスへ対応する方法の一つである、レスポンシブデザインでホームページを制作する方法を紹介します。viewportを設定するviewportとは?viewportとは、スマートフォンやタブレットに設定されている仮想ウィンドウサイズを調節するものです。iPhoneのデフォルトの仮想ウィンドウサイズは980pxに設定されています。viewportを設定しないと、後述するメディアクエリを設定しても、PCと同じ表示になってしまいます。記述方法html内に記述します。<head>タグの中に記述する必要があるので注意しましょう。initial-scale=1"></head>「width=device-width」は、仮想ウィンドウサイズの横幅のピクセル数を端末の画面幅に合わせるという設定です。「initial-scale=1」は、初期のズーム倍率を1倍にするという設定です。基本的には、この設定で良いでしょう。他にも以下の設定があります。height:仮想ウィンドウサイズの高さのピクセル数、端末の画面の高さは「device-height」と設定minimum-scale:最小のズーム倍率maximum-scale:最大のズーム倍率user-scalable:ズーム操作の有無、「yes」「no」で設定、デフォルトでは「yes」メディアクエリを設定するメディアクエリとは?メディアクエリとは、表示されている環境によって指定するスタイルを切り替える機能です。記述方法<link>で指定するcssファイルを読み込むときに<link>を使用しますが、mediaを追記することで切り替えることができます。このように記述します。(min-width:769px)">css内で指定するcss内でメディアクエリを指定することも可能です。1つのcssファイルで管理できるため、こちらの方がおすすめです。このように記述します。20px;}}上記の例では、全ての横幅でpの色を#000、フォントの太さをboldと指定、768pxまではフォントサイズを15px、769px以上はフォントサイズを20pxと設定しました。まとめ今回は、レスポンシブデザインの設定方法を解説しました。レスポンシブデザインを活用して、スマートフォンユーザーにもPCユーザーにも優しいホームページを制作して行きましょう。この記事を書いた人linkstory株式会社LinkStoryのスタッフです。