2022年6月

レスポンシブ入門5 メインコンテンツの修正②

レスポンシブ入門5

レスポンシブ入門5 メインコンテンツの修正② ・メインコンテンツの修正  みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第5回、最終回です。  前回に続いて、スマホ用のウェブサイトのメインの部分を修正して、サイトを完成させましょう。 今回はまず、フレックスボックスの2つの画像の項目を修正します。  フレックスボックスの中のラーメンの画像は、画面幅を小さくしてい […]

レスポンシブ入門4 メインコンテンツの修正①

レスポンシブ入門4

レスポンシブ入門4 メインコンテンツの修正① ・メインコンテンツの修正 ・フッターの修正  みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第4回です。  今回は、スマホ用のウェブサイトのメインの部分を修正していきましょう。 現在は右側が隠れてしまっていますので、これを修正します。  インデックスHTMLを開くと、メインの部分は、「id コンテイナー」のディブの […]

レスポンシブ入門3 ヘッダー画像の表示

レスポンシブ入門3

レスポンシブ入門3 ヘッダー画像の表示 ・ヘッダー画像 ・フローティングメニュー  みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第3回です。 今回は、スマホで表示するためにCSSを編集していきましょう。  ブラウザの画面は、右にデベロッパーツールを配置して、境界をドラッグして、スマホサイズの画面幅にしておきます。  まず、「ラーメン 味噌一番」のヘッダー画像 […]

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

レスポンシブ入門2

レスポンシブ入門2 ビューポートとメディアクエリ ・ビューポート ・メディアクエリ ・ブレイクポイン  みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第2回です。 今回は、スマホで表示するための「ビューポート」と「メディアクエリー」を設定しましょう。    まず、「インデックスHTML」の、「ヘッド」タグの閉じタグの、先頭から、改行して、一行開けて、 8行目に […]

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

レスポンシブ入門1

レスポンシブ入門1 レスポンシブとは ・レスポンシブとは ・データファイルの準備 ・デベロッパーツール  みなさんこんにちわ。中学生のためのプログラミング講座です。これから一緒に、レスポンシブ ウェブデザインの勉強をしていきましょう! 今回は入門編の第1回です。  レスポンシブ ウェブデザインというのは、パソコンやスマートフォン、タブレットなど、画面幅の異なる様々なデバイスそれぞれに最適な、見やす […]