Photogentle

コーディング練習問題

レイアウト書き込み問題

概要 ※印刷推奨 PDFにWebサイトのスクリーンショットが掲載されています。 横並びレイアウトが掲載されている箇所を探し、レイアウト用の枠線をかきこみなさい。 記述例 目的 横並びレイアウトを行うには、要素の構造をしっかり作る必要がありま...
コーディング練習問題

中央揃えの練習

概要 コードの「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。 HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。 style.css上でスタイル指定が必要なclas...
コーディング練習問題

paddingとmarginを理解する

概要 「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。 目的 paddingとmarginの違いを把握する データ 使用ソフト VisualStudioCode 答え(作業完了後にみてください。)
コーディング練習問題

見出しの練習

概要 「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。 目的 見出しの装飾を学ぶ データ distフォルダの中身を使用してください。 使用ソフト VisualStudioCode 答え(作業完了後にみ...
コーディング練習問題

基本タグの練習

概要 「index.html」を新規作成し、適切なコーディングをして次のような見た目にしてください。 目的 基本のタグをマスターする。 データ 新規作成 犬のしつけ手順 ダミー画像 犬は非常に多くの種類があり、それぞれに異なる特性や性格があ...
コーディング練習問題

HTMLとCSSの連携を理解する

概要 CSSを読み込み、サイトにスタイルシートを反映させてください。 目的 CSSとHTMLがどのように連携しているかを理解する。 データ 使用ソフト VisualStudioCode 答え(作業完了後に答え合わせ)
コーディング練習問題

リンク練習初級

概要 ダウンロードしたデータは3ページのWEBサイトです。 現在リンクが繋がっていません。 各ページを行き来できるようにファイルを修正しリンクを繋げてください。 TOPページ : index.html 会社概要 : about.html お...
コーディング練習問題

「こんにちは」と表示する

概要 目的 フォルダとファイルの作成を体験し、エディタの扱いに慣れる。 ブラウザで自分の作ったファイルを表示してみる。 目標 ファイルとフォルダを新規に作成し、ブラウザで次のように表示されるようにしてください。 データ 新規作成のためなし ...
フォトショップの練習問題

Photoshop 主要な選択ツールを解説

Photoshopの選択ツールを解説 よく使う選択ツールについて解説します。 基礎的なツールを除き、よく使う順に解説していきたいます。 全機能は網羅していません。 Web制作において必要なものだけ掲載しています。 基本のツール なげなわツー...
フォトショップの練習問題

パプリカを赤くする

概要 納品形式 jpg 素材を活用して次の画像を作成してください。 素材データ 画像の上で右クリック→画像を保存 使用ソフト Adobe Photoshop 使用する主な機能例 テキストツール 長方形ツール 調整レイヤー 選択範囲 答え合わ...
フォトショップの練習問題

マグカップに文字入れ

概要 画像サイズ 幅1024px 高さ1024px 納品形式 jpg テキスト coffee フォント Times 作業内容 素材を活用して次の画像を作成してください。 素材データ 画像の上で右クリック→画像を保存 使用ソフト Adobe ...
フォトショップの練習問題

赤いちご青いちご

概要 作業内容 素材を活用して次の画像を作成してください。 素材データ 画像の上で右クリック→画像を保存 使用ソフト Adobe Photoshop 使用する主な機能例 色域指定 色相・彩度 答え合わせ(動画)