レスポンシブ入門

レスポンシブ ウェブデザインというのは、パソコンやスマートフォン、タブレットなど、画面幅の異なる様々なデバイスそれぞれに最適な、見やすいウェブサイトを作ることを言います。PC用のウェブサイトを修正して、スマホでも見やすいレスポンシブなウェブサイトを作ってみましょう!

レスポンシブ入門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回です。  レスポンシブ ウェブデザインというのは、パソコンやスマートフォン、タブレットなど、画面幅の異なる様々なデバイスそれぞれに最適な、見やす […]