レスポンシブ入門２　ビューポートとメディアクエリ

　みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第２回です。
　今回は、スマホで表示するための「ビューポート」と「メディアクエリー」を設定しましょう。　　

　まず、「インデックスHTML」の、「ヘッド」タグの閉じタグの、先頭から、改行して、一行開けて、　８行目に、タブキーで一段下げて、
　「カッコ　メタ　ネーム　イコール　ダブルクオーテーション　ビューポート」、
　「コンテント　イコール　ダブルクオーテーション　ウィズ　イコール　デバイス　ハイフン　ウィズ　カンマ」、
　「イニシャル　ハイフン　スケール　イコール　１　ダブルクオーテーション　カッコ閉じ」と入力します。

　少し長いですが、スペルに間違いがないように注意してください。
　まず、最初の「メタ　ネーム　イコール　ビューポート」で、メタタグでビューポートを設定します。メタタグはウェブサイトの情報を記載するためのタグで、ヘッドタグの中に書きます。今回は一番最後に書きましたが、ヘッドタグの中であれば、記述する位置はどこでも構いません。

　「ビューポート」というのは、表示領域のことで、この「メタ　ネーム　イコール　ビューポート」でデバイスの表示領域を設定することを宣言しています。
　次の、「コンテント　イコール　ウィズ　イコール　デバイス　ウィズ」として、この「ウィズ」というのは「幅」のことですが、表示領域をそれぞれの端末の幅に合わせる、という意味になります。　
　そして最後の、　「イニシャル　ハイフン　スケール　イコール　１」では、ウェブサイトが表示されたときの初期の表示倍率を１に設定して、１００％に指定します。

　この、「メタネーム　イコール　ビューポート、　コンテント　イコール　ウィズ　イコール　デバイス　ウィズ、　イニシャル　スケール　イコール　１」が、最も一般的な、レスポンシブなサイトのビューポートの設定になります。
　それでは、ここでいったん、コントロールキーとSキーを同時に押して、「インデックスHTML」のファイルを保存します。

　次に、スタイルCSSで「メディアクエリー」を設定します。
　 「メディアクエリー」というのは、ウェブサイトを表示するデバイスに応じて、適用するCSSを切り替えること言います。

　ウェブサイトを表示するためのデバイスは、主にスマホ、タブレット、パソコンのモニターの３種類があって、それぞれ機種やメーカーごとに様々な画面の大きさ、画面の幅があって、さらにスマホやタブレットは横置きにして表示する事もできますので、ウェブサイトを表示する表示領域の大きさは千差万別です。
　そこで、あるピクセル以下の画面幅の場合はスマホ用のデザインを、そこからあるピクセルまではタブレット用のデザインを、それ以上はPC用に表示するようにウェブサイトのデザインを区分するのがメディアクエリーです。

　それでは、スタイルCSSのコードの先頭、「ボディ」のセレクターの先頭をクリックして、１行目にカーソルを持ってきて、エンターキーで１行目を改行して、ここに、日本語で、「PC用の表示」と入力します。
　そして、コントロールキーとスラッシュキーを同時に押して、この１行目をコメントアウトします。　
　２行目以下の、現在のCSSのコードはすべてPCで表示するためのコードなので、わかりやすいように先頭に「PC用の表示」というコメントを書いておきます。

　次に、CSSのコードの末尾に移動して、　末尾から、改行して、ここには、日本語で「スマホ用の表示」と入力して、　コントロールキーとスラッシュキーを同時に押して、この行をコメントアウトします。
　ここから、スマホ用のCSSのコードを書いていきます。

　それでは、末尾から、改行して、「アット　メディア　スクリーン　アンド　カッコ　マックス　ハイフン　ウィズ　コロン　５９９　PX　波カッコ」と入力します。

　そして、カッコ閉じを改行して、この間に、「ボディ　波カッコ」と入力して、カッコ閉じを改行して、「バックグラウンド　コロン　ライトブルー　セミコロン」と入力します。
　コロンやセミコロンを忘れないように注意してください。

　まず、「アット　メディア　スクリーン」で、スクリーンを備えたデバイス、つまりスマホやタブレット、PCについて設定することを宣言して、
　「アンド」のあとに、「マックス　ハイフン　ウィズ」とありますが、この「マックス」というのは「マキシマム」、「最大」の略で、最大の幅、つまり画面の最大幅が５９９ピクセル以下の場合は、次の波括弧の中の設定が適用されることを表しますので、これでスマホなど、画面幅が５９９ピクセル以下のデバイスでのウェブサイトのデザインを設定できます。
　５９９ピクセルより大きい、６００ピクセル以上のタブレットやPCの場合は、上のコードが適用されます。
　そして、その次の波括弧の中で、「ボディ　バックグラウンド　ライトブルー」として、ウェブサイトの背景色をライトブルーに設定します。

　それでは、ブラウザを開いて、
　デバイス切り替えのアイコンをクリックして、PCの表示に戻して、

　ここで、ページを更新するために、コントロールキーとRキーを同時に押すか、
　またはキーボードのF5キーを押すか、
　または、ブラウザの再読み込みをクリックして、ページを更新して、

　デベロッパーツールの左の境界を、左クリックでドラッグして、画面幅を狭くしていくと、
　５９９ピクセルを境に、サイトの背景色が白とライトブルーで切り替わります。

　それでは、エディターに戻って、
　今回、画面幅の５９９ピクセルを基準として、それ以下であればスマホ用のデザイン、それ以上であればPC用のデザインと区分しましたが、この区分の基準点をブレイクポイントといいます。

　今回はブレイクポイントを１つだけ設定しますが、これを２つ設定して、スマホ用、タブレット用、PC用の３種類のデザインを設定するときは、
　「スマホ用の表示」の下に、「タブレット用の表示」と入力して、

　「アット　メディア　スクリーン　アンド　カッコ　ミン　ハイフン　ウィズ　コロン　６００　PX　アンド　カッコ　マックス　ハイフン　ウィズ　コロン　１０２４　PX　波カッコ」と入力して、

　これで、「ミン」というのは「ミニマム」、最小の略で、画面の最小幅が６００ピクセルから、最大幅が１０２４ピクセルまでは、タブレットなどでの表示用として、この波括弧の間でデザインを設定することができます。

　それから、今回はPC用のウェブサイトを基準として、まずPC用のサイトを作ってからスマホ用のウェブデザインを整えますが、逆にまずスマホ用のサイトをデザインして、これをPCの画面にも表示させる時は、
　「アット　メディア　スクリーン　アンド　ミン　ウィズ　６００　PX」のあとの、「アンド　マックス　ウィズ　１０２４　ピクセル」を削除して、
　これで、まずスマホ用のCSSのコードをメインに書いて、次に、PC用として、画面の最小幅が６００ピクセル以上の場合は、波カッコの間に、PC用のCSSの設定を入力します。

　それでは、タブレット用のコードを削除して、それから、「スマホ用の表示」のボディのコードも削除して、
　コントロールキーとSキーを同時に押して、ファイルを保存して、

　今回は以上です。それではまた。