Photogentle

コーディング練習問題

中央揃えの練習

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

paddingとmarginを理解する

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

見出しの練習

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

基本タグの練習

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

HTMLとCSSの連携を理解する

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

リンク練習初級

概要まずは以下のファイルをダウンロード、解凍しましょう。作業する場所に移動し、VScodeで「フォルダで開く」をしましょう。ダウンロードしたデータは3ページのWEBサイトです。現在リンクが繋がっていません。各ページを行き来できるようにファイ...
コーディング練習問題

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

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

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

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

パプリカを赤くする

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

マグカップに文字入れ

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

赤いちご青いちご

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

山 vs 海

概要作業内容素材を活用して次の画像を作成してください。素材データ使用ソフトAdobe Photoshop使用する主な機能例 クイックマスクモード グラデーションツール レイヤーマスク答え合わせ(動画)グラデーションとマスクを組み合わせると実...