コーディング練習問題 【HTML・CSS実践課題】カフェのお知らせページを作ろう
カフェのお知らせページを作ろうHTMLとCSSの基礎を学んだら、完成見本を確認しながら、実際にWebページを作ってみましょう。今回制作するのは、架空のカフェ「MORI CAFE」のお知らせページです。レスポンシブ対応は行わず、パソコンで表示...
コーディング練習問題 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答え合わせ（動画）レイヤーを選んでいないとオ...
フォトショップの練習問題 Affinityの選択範囲とマスクを理解しよう
概要無料公開されたAffinityの使い勝手を検証していきます。マスクが必要な例を紹介人物の画像を丸く切り抜きたい素材（画像上で右クリック→保存）やってみた動画Photoshopとほぼ変わらない操作感でした。楕円形選択は「中心から」がデフォ...
Affinityの使い方 Affinityで画像を明るくする
概要Afiifnityでphotoshopの課題をやってみました。作業内容暗い画像を次の画像を参考に明るくしてください。データ画像の上で右クリック→画像を保存使用ソフトAffinity使用する主な機能 明るさ・コントラスト※最終的に目標の状...
Affinityの使い方 Affinityで画像を配置してみよう
概要2025年10月31日にAffinityが無料になりました。無料のこのツールは実用できるのか？を検証していきたいと思います。まずは上記の課題をやってみたいと思います。レベル１ 画像を配置するPhotoshopでは作業をするときにデータを...
JavaScript練習問題 jQuery入門：60分で「動く」Webサイトを作ろう【slick.js実装】
「jQueryって名前は聞くけど、結局なにができるの？」 「独学で勉強しているけど、実務でどう使うのかイメージが湧かない…」そんな悩みを持つあなたへ。 今のWeb制作の現場では、jQueryを一から十まで書くことはほとんどありません。「CS...