レスポンシブ入門１　レスポンシブとは

　みなさんこんにちわ。中学生のためのプログラミング講座です。これから一緒に、レスポンシブ　ウェブデザインの勉強をしていきましょう！
　今回は入門編の第１回です。

　レスポンシブ　ウェブデザインというのは、パソコンやスマートフォン、タブレットなど、画面幅の異なる様々なデバイスそれぞれに最適な、見やすいウェブサイトを作ることを言います。
　過去動画の「HTML入門編」と「CSS入門編」で、基本的なウェブサイトの作り方を勉強しましたが、これはパソコンの画面に表示するためのウェブサイトで、スマートフォンでこのウェブサイトを見ようとすると、文字が小さくて、とても見づらいサイトになっています。そこで、スマートフォンの画面でも見やすいように、ウェブサイトの内容はそのままに、デザインを作り変える必要があります。
　具体的には、ウェブサイトのデザインを整えるためのCSSのファイルに、スマートフォン用のコードを追加して、パソコン用とスマートフォン用の２種類のウェブサイトを作る作業になります。さらにこの中間の幅の、タブレットで表示するのに最適なウェブデザインの３種類を作る場合もあります。

　現在のウェブサイトは、スマートフォンやタブレットなどの、モバイルデバイスで見やすく表示されることが求められていて、これを「モバイルユーザビリティ」といいますが、このモバイルユーザビリティはSEO、検索エンジン最適化の評価においてとても重要で、レスポンシブではないウェブサイトは検索結果の上位には表示されません。

　なお、ワードプレスで作ったウェブサイトの場合、パソコン用のウェブサイトを作ると自動的にスマートフォンやタブレットでの表示に最適化されますので、あらかじめレスポンシブ　ウェブデザインの機能が備わっています。

　今回は、過去動画の「HTML入門編」と「CSS入門編」で作ったラーメン屋さんのウェブサイトを利用して、スマートフォンで見やすい、レスポンシブなウェブサイトを作ってみましょう。OSはウィンドウズ１０、ブラウザはクロームを使用します。また、エディターはVSコードを使用します。まだ「HTML入門編」と「CSS入門編」を勉強していない方は、概要欄のリンクから、過去動画の再生リストを開いて、最初に「HTML入門編」と「CSS入門編」を勉強してください。

　それではまず、パソコン用のウェブサイトのデータファイルを準備します。概要欄のリンクから、データファイルのダウンロードのサイトを開いて、ダウンロードをクリックして、ジップファイルを、デスクトップに、保存して、ダウンロードが終わったら、画面左下の表示をクリックして、これで、デスクトップに「ミソイチバン」のデータフォルダができました。

　次に、VSコードを起動して、「ミソイチバン」のフォルダを、左クリックで、ドラッグして、VSコードの画面上にドロップすると、このように、「ミソイチバン」のフォルダが開きました。
　さらに、この中で、「インデックスHTML」のファイルを、左クリックで、ドラッグして、画面上にドロップすると、このように、「インデックスHTML」のファイルが開いて、
　次に、「スタイルCSS」のファイルも同様に、左クリックで、ドラッグして、画面上にドロップすると、　このように、「スタイルCSS」のファイルが開きました。

　そして、「作業の開始」のタブは、閉じて、
　次に、「スタイルCSS」のタブを、左クリックで、ドラッグして、画面の右に持ってくると、　このように、画面の右半分が白っぽくなりますので、ここでクリックを放すと、　このように、「インデックスHTML」と「スタイルCSS」のファイルが並んで表示されます。

　２つのファイルの画面幅を調節するときは、２つの画面の境界の上にマウスオーバーすると、ポインターが両矢印の形に変わりますので、ここで左クリックでドラッグして、マウスを動かすと、このように、画面幅を調節することができます。
　そして、エクスプローラーのアイコンをクリックすると、サイドバーが消えて、編集画面が広くなります。

　次に、デスクトップの、「ミソイチバン」のフォルダを、ダブルクリックして開いて、　「インデックスHTML」のファイルをダブルクリックすると、
　クロームが起動して、ウェブサイトが表示されます。

　ここで、画面上で、右クリックして、「検証」をクリックすると、　デベロッパーツールが開いて、ここでウェブサイトの構造を確認することができます。
　デベロッパーツールの右上の、ドットマークのアイコンをクリックすると、　ここで、デベロッパーツールの配置を選択して、画面の右側、画面の左側、または別ウィンドウに、デベロッパーツールを配置して、　見やすい場所にデベロッパーツールを配置することができます。
　今回は、デベロッパーツールを画面の右側に配置して、作業します。

　デベロッパーツールの上の、セレクトアイコンの右側の、「デバイスの切り替え」のアイコンをクリックすると、　これで、画面表示がスマホサイズの表示に切り替わって、スマホの画面に表示されるウェブサイトを確認することができます。
　そして、画面右側の、二重線を左クリックでドラッグして、左右に動かすと、　画面幅を切り替えて、表示を確認することができます。
　そして上の、「レスポンシブ」の項目をクリックすると、各種のデバイスが表示されて、これをクリックして選択すると、　「ｉＰｈｏｎｅ SE」では、実際のサイズの ３７５ 掛ける ６６７ ピクセルのサイズで、ウェブサイトが表示されます。

　このように、現在のPC用のウェブサイトでは、スマホの画面では文字が小さくて見づらいので、次回からこれを修正していきましょう。
　今回は以上です。それではまた。