コーディング練習問題 【はじめて課題】中央揃えレイアウト練習
概要最初のコーディング課題として、中央揃えの基本をマスターしましょう。事前知識■文字や画像の中央揃えをしたい中央にしたいものを囲む親要素に「text-align:center;」例：■エリア（ボックス）の中央揃えをしたい①必ず中央にしたいエ...
Photogentle
コーディング練習問題 
未分類 コーディングを「身につける」ってどういうこと？初心者がぶつかる壁と乗り越えるヒント
コーディングを「身につける」ってどういうこと？初心者がぶつかる壁と乗り越えるヒントコーディングを学びたいと思っても、「結局どこまでできれば“身についた”って言えるんだろう？」と疑問に思ったことはありませんか？この記事では、「コーディングを身...
コーディング練習問題 シンプルなHTMLとCSSファイルを新規作成してみよう！
概要 HTMLとCSSの新規作成 HTMLとCSSの接続 タグの記述とclassの記入 CSSの記述初心者の場合、上記の基本的な工程が頭の中で繋がっていないことがよく見受けられます。この辺りをハードルとして挫折しないようにしていきたいです。...
コーディング練習問題 CSS超基礎課題
概要CSSに関する基礎的な課題です。CSS指定の第一歩として取り組みましょう。目的簡易なCSS装飾指定をできるようになる。(本当に基礎的なCSSの課題がWEB上に見当たらないので作成しました。) 文字装飾 背景色指定 背景画像指定 要素のサ...
コーディング練習問題 プロフィールリンクのコーディング
概要上記の課題の続きです。サンプルこちらのサイトをコーディングしましょう。サイト幅 横幅390px を想定する納品形式 htmlおよびCSSデータ一式参考サイト： 目的簡易なWebページをコーディングできるようになる。作業内容作成したオリジ...
コーディング練習問題 WEBパーツ コーディング課題
概要次の画像をデザインデータとしてコーディングし、WEBページとして作成してください。ウインドウサイズ 390px を想定する納品形式 htmlおよびcssファイル一式目的基本のCSSコーディングをマスターする。Webパーツのコーディングを...
コーディング練習問題 リンク・パス練習 中級
概要画像のパスの仕組みを理解します。まずは初級に取り組んでからこちらの課題に取り組んでください。初期状態では画像が表示されていません。画像が表示されるようにパスを入力しましょう。目的aタグ/imgタグの使い方、相対パスの使用方法を理解する。...
フォトショップの練習問題 Photoshop レイヤースタイルを理解する
概要Photoshopの応用機能解説です。この記事では「レイヤースタイル」機能を紹介します。レイヤースタイルの基本WEBデザインにおいて、ボタンなどに影をつけたような加工をすることがよくあります。影をつける作業をどのように行えば良いのか説明...
フォトショップの練習問題 Photoshop クイックマスクモードを理解する
概要Photoshopの選択ツール解説の続きです。この記事では「クイックマスクモード」「選択とマスク」機能を紹介します。Photoshopの選択範囲の概念を把握しよう今回解説する「クイックマスクモード」「選択とマスク」を理解するにあたって、...
フォトショップの練習問題 Photoshop グラデーションの基本
概要Photoshopの使い方解説の基本の続きです。この記事では「グラデーション」機能を紹介します。グラデーションは色の選択、ツール、グラデーションレイヤーなど複数の要素があり、非常に説明が難しいです。うまく説明するように頑張ってみたいと思...
フォトショップの練習問題 Photoshop 調整レイヤーの基本
概要Photoshopの使い方解説の基本の続きです。この記事では「調整レイヤー」機能を紹介します。調整レイヤーを使うと画像を明るくする、一部の色を変更するなど表現の幅が非常に広くなります。グラフィック表現に力を入れたい方はぜひマスターしまし...
フォトショップの練習問題 Photoshopのクリッピングマスクを理解しよう
概要Photoshopのレイヤーマスクについては以下の記事で紹介しています。この記事では「クリッピングマスク」というレイヤーマスクと似た機能を紹介します。こちらもしっかりと使い方を把握しましょう。角丸長方形の画像を作成するクリッピングマスク...