LINKSTORY LIBRARY(リンクストーリーライブラリー)

LINKSTORY LIBRARY(リンクストーリーライブラリー)

CATEGORY is ホームページ制作

レスポンシブデザインでホームページを制作する方法

こんにちは、後藤です。

以前の記事で、ホームページ制作におけるマルチデバイスへの対応の必要性を紹介しました。

今回は、マルチデバイスへ対応する方法の一つである、レスポンシブデザインでホームページを制作する方法を紹介します。

 

viewportを設定する

viewportとは?

viewportとは、スマートフォンやタブレットに設定されている仮想ウィンドウサイズを調節するものです。

例えば、iPhoneのデフォルトの仮想ウィンドウサイズは980pxに設定されています。

viewportを設定しないと、後述するメディアクエリを設定しても、PCと同じ表示になってしまいます。

 

記述方法

html内に記述します。

<head>タグの中に記述する必要があるので注意しましょう。

 

「width=device-width」は、仮想ウィンドウサイズの横幅のピクセル数を端末の画面幅に合わせるという設定です。

「initial-scale=1」は、初期のズーム倍率を1倍にするという設定です。

基本的には、この設定で良いでしょう。

他にも以下の設定があります。

height:仮想ウィンドウサイズの高さのピクセル数、端末の画面の高さは「device-height」と設定

minimum-scale:最小のズーム倍率

maximum-scale:最大のズーム倍率

user-scalable:ズーム操作の有無、「yes」「no」で設定、デフォルトでは「yes」

 

メディアクエリを設定する

メディアクエリとは?

メディアクエリとは、表示されている環境によって指定するスタイルを切り替える機能です。

 

記述方法

<link>で指定する

cssファイルを読み込むときに<link>を使用しますが、mediaを追記することで切り替えることができます。

このように記述します。

 

css内で指定する

css内でメディアクエリを指定することも可能です。

1つのcssファイルで管理できるため、こちらの方がおすすめです。

このように記述します。

上記の例では、全ての横幅でpの色を#000、フォントの太さをboldと指定、768pxまではフォントサイズを15px、769px以上はフォントサイズを20pxと設定しました。

 

まとめ

今回は、レスポンシブデザインの設定方法を解説しました。

レスポンシブデザインを活用して、スマートフォンユーザーにもPCユーザーにも優しいホームページを制作して行きましょう。

この記事を書いた人

後藤
2017年入社です。 コーディングと、メディアサイトの企画・運営、SNS運用を担当しています。 コーディングに関してはまだまだ実力不足なので、早く会社の戦力になれるように日々精進しています。