レスポンシブ入門５ メインコンテンツの修正②
レスポンシブ入門５ メインコンテンツの修正② ・メインコンテンツの修正 みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第５回、最終回です。 前回に続いて、スマホ用のウェブサイトのメインの部分を修正して、サイトを完成させましょう。 今回はまず、フレックスボックスの２つの画像の項目を修正します。 フレックスボックスの中のラーメンの画像は、画面幅を小さくしてい […]
2022年6月
レスポンシブ入門４ メインコンテンツの修正①
レスポンシブ入門４ メインコンテンツの修正① ・メインコンテンツの修正 ・フッターの修正 みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第４回です。 今回は、スマホ用のウェブサイトのメインの部分を修正していきましょう。 現在は右側が隠れてしまっていますので、これを修正します。 インデックスHTMLを開くと、メインの部分は、「ｉｄ コンテイナー」のディブの […]
レスポンシブ入門３ ヘッダー画像の表示
レスポンシブ入門３ ヘッダー画像の表示 ・ヘッダー画像 ・フローティングメニュー みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第３回です。 今回は、スマホで表示するためにCSSを編集していきましょう。 ブラウザの画面は、右にデベロッパーツールを配置して、境界をドラッグして、スマホサイズの画面幅にしておきます。 まず、「ラーメン 味噌一番」のヘッダー画像 […]
レスポンシブ入門２ ビューポートとメディアクエリ
レスポンシブ入門２ ビューポートとメディアクエリ ・ビューポート ・メディアクエリ ・ブレイクポイン みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第２回です。 今回は、スマホで表示するための「ビューポート」と「メディアクエリー」を設定しましょう。 まず、「インデックスHTML」の、「ヘッド」タグの閉じタグの、先頭から、改行して、一行開けて、 ８行目に […]
レスポンシブ入門１ レスポンシブとは
レスポンシブ入門１ レスポンシブとは ・レスポンシブとは ・データファイルの準備 ・デベロッパーツール みなさんこんにちわ。中学生のためのプログラミング講座です。これから一緒に、レスポンシブ ウェブデザインの勉強をしていきましょう！ 今回は入門編の第１回です。 レスポンシブ ウェブデザインというのは、パソコンやスマートフォン、タブレットなど、画面幅の異なる様々なデバイスそれぞれに最適な、見やす […]
レスポンシブ入門 データファイル ダウンロード
中学生のためのプログラミング講座 レスポンシブ入門 で使用するデータファイルです。デスクトップにダウンロードして、ZIPファイルを解凍して使用してください。