01 レスポンシブホームページ基本講座

Webサイト制作

レスポンシブホームページ基本講座1回目の講座です。前回レスポンシブで必要なデベロッパーツールを解説していますので、こちらの回がまだの場合は、初回講座をご覧ください。

meta viewportビューポートの設定

はてな?
はてな?

meta viewport ビューポート何ですか?

yoshiko先生
yoshiko先生

もともとホームページでパソコンで見る。というのが主流でしたが、スマートフォン時代になって、スマホで見るのが当たり前になってきました。いままでのパソコンで見るホームページをスマホで見るとその「ちっちゃい版」が表示されていて、文字を見るのが大変でした。このビューポートでそれを回避できるのです。

記述は下記のようになって、これを<header> 内<title>の上に書きます。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
はてな?
はてな?

meta 要素って上に書くUTF-8以外にも使うんですね。

yoshiko先生
yoshiko先生

そうですね。meta 要素に name 属性を書いて そこにviewport指定を書きます。それ以降は、いろいろなパターンがありますが、ここでは、width=device-width スマホの横幅に合わせる
initial-scale=1 初期の表示倍率 スマホのそのままの倍率って意味ですね
なので、ここまでが入っておけば問題ありません。maximum-scale=1は、最大倍率の指定なので、スマホの1字のサイズはそのままに一行当たりの文字数が増える表示となります

メディアクエリ

レスポンシブでCSSを指定していない頃 スタイルシートの呼び込みで、

<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">

上記のように media属性の値に スクリーン=PC用 プリント=プリンター用のCSSを書いて指定していました。そのmedia属性の値がスマホになってきたので、

<link rel="stylesheet" href="css/media.css" media="screen and (max-width:480px)">

media の値が、スクリーン(PC用) と 最大480px までの画面(iphoneのver6/7/8 )という指定に変わってきました。そしてその記述をCSS内に書いてくるようになると

/*media の指定がない場合*/
p {
 color:red;
}

/* 画面サイズが480pxからはここを読み込む */
@media screen and (min-width:480px) { 
p {
 color:blue;
 }
}
/* 画面サイズが768xから1024pxまではここを読み込む */
@media screen and (min-width:768px) and ( max-width:1024px) {
p {
  color:yellow
 }
}

何も指定がないサイズの時は文字の色が赤
480pxから767pxまでは文字の色が青
768pxから1024pxまでは文字の色が黄色
という指定方法になりました。このpx の値がブレイクポイントといいます

ブレイクポイント

実はこのブレイクポイントには定義がありません。新しいスマホが続々と出る時代ですので、この数字も新機種やその年の傾向によって随分とことなります。

できれば、そんなにブレイクポイントは増やしたくないものです。

この値なら確実 と調べて検証していくしかないのが現状です。

レスポンシブCSSで使うブレイクポイントの決め方
レスポンシブWebデザインでCSSを書く際のブレイクポイントを、2018年版アクセス解析結果の画面サイズシェアから考える方法を解説。スマホは375px、タブレットは768pxの横幅が最も多いとはいえ、375と768をブレイクポイントにすれば良いわけではありません。さらに、モバイル端末とPCとの境界は1024~1280p...
レスポンシブのブレークポイントの決め方!PCデザインカンプから再現する際のベスト | HPcode
「ブレークポイントをどうしよう...」、レスポンシブデザインでは常に悩みの種かもしれません。日頃コーダーとしてデザインカンプからPCデザインだけ渡されて「スマホもレスポンシブでいい感じによろしく!」的な指示を受けることが多いわたしは、もう悩むことは止めて、ほぼ決まった型で作るようにしています。 今のところ、ブレークポイ...

レスポンシブホームページ基本講座 01回目 動画

01 レスポンシブホームページ基本講座 meta name="viewport"

コメント

タイトルとURLをコピーしました