未分類 コーディングを「身につける」ってどういうこと？初心者がぶつかる壁と乗り越えるヒント
コーディングを「身につける」ってどういうこと？初心者がぶつかる壁と乗り越えるヒント コーディングを学びたいと思っても、「結局どこまでできれば“身についた”って言えるんだろう？」と疑問に思ったことはありませんか？ この記事では、「コーディング...
未分類 
コーディング練習問題 シンプルな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のレイヤーマスクについては以下の記事で紹介しています。 この記事では「クリッピングマスク」というレイヤーマスクと似た機能を紹介します。 こちらもしっかりと使い方を把握しましょう。 角丸長方形の画像を作成する クリッピ...
フォトショップの練習問題 Photoshop使い方解説③ 図形描画とペンツール
この記事では、Photoshopの基本の使い方を解説します。 上記の記事の続きです。 図形を作成する WEBデザインでボタンを作成したり、文字の後ろに長方形を置いたりなど簡単な図形を作る機会はたくさんあります。 どのように図形を作成するのか...