コーディング練習問題 WEBパーツ コーディング課題
概要次の画像をデザインデータとしてコーディングし、WEBページとして作成してください。ウインドウサイズ 390px を想定する納品形式 htmlおよびcssファイル一式目的基本のCSSコーディングをマスターする。Webパーツのコーディングを...
コーディング練習問題 
コーディング練習問題 リンク・パス練習 中級
概要画像のパスの仕組みを理解します。まずは初級に取り組んでからこちらの課題に取り組んでください。初期状態では画像が表示されていません。画像が表示されるようにパスを入力しましょう。目的aタグ/imgタグの使い方、相対パスの使用方法を理解する。...
フォトショップの練習問題 Photoshop レイヤースタイルを理解する
概要Photoshopの応用機能解説です。この記事では「レイヤースタイル」機能を紹介します。レイヤースタイルの基本WEBデザインにおいて、ボタンなどに影をつけたような加工をすることがよくあります。影をつける作業をどのように行えば良いのか説明...
フォトショップの練習問題 Photoshop クイックマスクモードを理解する
概要Photoshopの選択ツール解説の続きです。この記事では「クイックマスクモード」「選択とマスク」機能を紹介します。Photoshopの選択範囲の概念を把握しよう今回解説する「クイックマスクモード」「選択とマスク」を理解するにあたって、...
フォトショップの練習問題 Photoshop グラデーションの基本
概要Photoshopの使い方解説の基本の続きです。この記事では「グラデーション」機能を紹介します。グラデーションは色の選択、ツール、グラデーションレイヤーなど複数の要素があり、非常に説明が難しいです。うまく説明するように頑張ってみたいと思...
フォトショップの練習問題 Photoshop 調整レイヤーの基本
概要Photoshopの使い方解説の基本の続きです。この記事では「調整レイヤー」機能を紹介します。調整レイヤーを使うと画像を明るくする、一部の色を変更するなど表現の幅が非常に広くなります。グラフィック表現に力を入れたい方はぜひマスターしまし...
フォトショップの練習問題 Photoshopのクリッピングマスクを理解しよう
概要Photoshopのレイヤーマスクについては以下の記事で紹介しています。この記事では「クリッピングマスク」というレイヤーマスクと似た機能を紹介します。こちらもしっかりと使い方を把握しましょう。角丸長方形の画像を作成するクリッピングマスク...
フォトショップの練習問題 Photoshop使い方解説③ 図形描画とペンツール
この記事では、Photoshopの基本の使い方を解説します。上記の記事の続きです。図形を作成するWEBデザインでボタンを作成したり、文字の後ろに長方形を置いたりなど簡単な図形を作る機会はたくさんあります。どのように図形を作成するのか把握して...
フォトショップの練習問題 Photoshop使い方解説② レイヤーと移動ツール
この記事では、Photoshopの基本の使い方を解説します。上記の記事の続きです。レイヤーを理解するレイヤーパネルレイヤー関連の操作はレイヤーパネルで行います。出してみましょう。ウインドウ > レイヤー レイヤーの種類レイヤーにはいくつか種...
フォトショップの練習問題 Photoshop使い方解説① 基礎と文字ツール
この記事では、Photoshopの基本の使い方を解説します。画面説明最初にワークスペースの状態を初期化することをお勧めします。 ウインドウ > ワークスペース > 初期設定 ウインドウ > ワークスペース > 初期設定をリセットツールバーの...
WEBデザイン企画 インタラクション前提でデザインしよう！
Web制作における「インタラクション」とは、ユーザーとWebサイト（またはアプリ）との間で行われる双方向のやり取りを指します。ユーザーの行動に応じて、画面上の要素が反応したり変化したりする仕組みのことです。「Webサイトは操作することができ...
Figmaの練習問題 【応用機能】Figmaのスタイル機能
まずは動画で確認まずは動画でスタイル機能を使っているところを見てみましょう。このように、よく使う色やフォント、フォントサイズを記録しておき、統一して利用することができます。デザインがまだ決まっていない状態では、中途半端に利用すると邪魔になる...