2022年

1/3ページ

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

GIMP入門8 袋文字を作る

GIMP入門8 袋文字を作る ・文字の入力 ・文字を塗りつぶす ・袋文字を作る  みなさんこんにちわ。中学生のためのプログラミング講座です。今回はGIMP入門編の第8回、最終回です。今回は、派手な装飾がついた袋文字を作ってみましょう。  文字の周りに縁取りがある文字を「袋文字」といいますが、派手な袋文字を使って、ロゴを強くアピールすることができます。  まず、「ファイル」から、「新しい画像」を選択 […]

GIMP入門7 パス

GIMP入門7 パス ・パスの作成 ・パスの編集 ・選択範囲からパスの作成  みなさんこんにちわ。中学生のためのプログラミング講座です。今回はGIMP入門編の第7回です。   今回は、パスについて見てみましょう。  パスというのは、自分で自由に書くことができる直線や曲線のことを言います。パスを図形や選択範囲に変換して、ブラシツールでは表現できない自由な図形や様々な編集を行うことができます。 ジェイ […]

GIMP入門6 画像の編集

GIMP入門6 画像の編集 ・色の編集 ・画像の編集 ・画像の変形  みなさんこんにちわ。中学生のためのプログラミング講座です。今回はGIMP入門編の第6回です。  今回は、画像の編集について見てみましょう。  イラストの画像では違いが分かりにくいので、写真の画像素材を準備してください。 画像素材がない方は、概要欄のリンクから、画像ファイルのダウンロードのサイトを開いて、画像ファイルのダウンロード […]

GIMP入門5 範囲選択

GIMP入門5 範囲選択 ・自由選択 ・ファジー選択 ・選択範囲の編集  みなさんこんにちわ。中学生のためのプログラミング講座です。今回はGIMP入門編の第5回です。   前回に続いて、範囲選択について見てみましょう。 ツールボックスの投げ縄のアイコンの、「自由選択ツール」をクリックして選択します。 これは、選択範囲を手書きで作成するツールです。 画像ウィンドウの上で、左クリックして、クリックした […]

1 3