フォトショップの練習問題 Photoshop初心者の学習ロードマップ｜バナー1枚を作って保存・公開するまで
Photoshopは何から学ぶ？文字・レイヤー・画像配置から、バナー制作、保存、ポートフォリオ公開までを既存の無料教材と確認リストで案内します。
フォトショップの練習問題 
サイト公開・運用 Webサイト公開ガイド｜無料公開・サーバー・独自ドメインの選び方
学習作品の無料公開からPHP・WordPress対応サーバー、独自ドメインまで、目的別に読む記事を選べるまとめ。契約前の確認項目と公開作業の順番を整理しました。
サイト公開・運用 独自ドメインは無料特典と別購入どちらがいい？契約前の費用・条件チェック
独自ドメインの無料特典と別購入を、初年度・更新・移転時の費用と条件で比較。不要な重複購入を避け、公開先を決めてから取得するためのチェックリストです。
WEB制作基礎知識 HTML・CSSで作ったページを公開する方法｜アップロードと表示確認の手順
HTML・CSSの作品を無料公開するか、PHP・WordPress対応サーバーを選ぶかを目的別に整理。アップロード、表示確認、独自ドメインの取得・更新費用まで、公開前に必要な確認を紹介します。
コーディング練習問題 【HTML・CSS実践課題】カフェのお知らせページを作ろう
カフェのお知らせページを作ろうHTMLとCSSの基礎を学んだら、完成見本を確認しながら、実際にWebページを作ってみましょう。完成した作品をURLで共有したい方は、HTML・CSSで作ったページを公開する方法を参考にしてください。今回制作す...
HTMLとCSSの基本 margin: 0 auto;で中央揃えする方法
大切なのは「要素の幅」と「余ったスペース」Webサイトを作っていると、次のように要素を中央に配置したい場面がよくあります。.box { width: 600px; margin: 0 auto;}ここで使われているのが、次の指定です。mar...
Figmaの練習問題 【ついに連携】OpenAI Codex × Figmaでデザインとコードの壁がなくなる！次世代の制作フローを体験しよう
「デザインを作ったけれど、コードに落とし込むのが大変」「エンジニアの実装を待たないとデザインの微調整ができない」……そんな悩みは、もう過去のものになるかもしれません。OpenAIとFigmaが発表した新しい「コード to デザイン」の統合。...
CSSレイアウトテクニック HTML/CSSでカードグリッドを模写する練習
完成図（カードグリッドの完成イメージ）→身につくスキル：カードグリッドの構造設計／余白調整／レスポンシブ対応 → 所要時間：30〜45分HTML/CSSでカードグリッドを模写する練習この課題では、カードグリッドをHTMLとCSSだけで作りま...
CSSレイアウトテクニック HTML/CSSでカードレイアウトを模写する練習｜3枚カードUIを作る
完成図はアイキャッチの通り身につくスキル：カードレイアウトの基本構造／余白設計／ホバー表現所要時間：30〜45分HTML/CSSでカードレイアウトを模写して作る練習この課題では、シンプルなカードUIをHTMLとCSSだけで作ります。完成後は...
HTMLとCSSの基本 【保存版】Webデザイナー未経験でも失敗しない！定番jQueryプラグイン「Slick」「Lity」の導入手順と完全実装コード
「ポートフォリオを作っているけれど、なんだか動きがなくて素人っぽい」 「JavaScriptのコードを見ても、どこをどう触れば動くのかさっぱりわからない」Webデザインの勉強を始めたばかりのころ、誰もが一度はこの壁にぶつかります。特にコーデ...
WEB制作基礎知識 【保存版】Webデザイン初心者がプロへ急成長する最短ルート！「守破離」で学ぶ上達の4ステップ
Webデザインの学習を始めたばかりのとき、「センスがないから上手くなれない」「ツールの使い方はわかったけれど、何から作ればいいの？」と悩んでしまうことはありませんか？実は、プロとして活躍しているデザイナーも、最初から自分だけのオリジナル作品...
Affinityの使い方 Affinity 切り抜き練習
概要以下の課題をAffinityでやってみましょう。作業内容画像にあるタコ、カニ、ヒトデを切り抜いて背景透過の画像にしてください。↓データ画像の上で右クリック→画像を保存使用ソフトAffinity答え合わせ（動画）レイヤーを選んでいないとオ...