初級 HTMLとCSSの基礎

Web制作を始めたばかりの人向けの初級レベル課題・解説集です。HTML/CSS練習問題・CSSプロパティリファレンス・WordPressテンプレート入門・ポートフォリオサイト公開・PC選びなど、最初の一歩で迷わないテーマを扱います。模写コーディング全体の流れは 模写コーディング練習サイト も参照してください。

全111件の記事中、1-30件を表示

ClaudeとCanvaをMCPで繋ぐ方法|下書きを任せて仕上げは人。

ClaudeとCanvaをMCPで繋ぐ方法|下書きを任せて仕上げは人。

ClaudeとCanvaをMCPで繋ぐには、Claudeの設定の[コネクタ]からCanvaを追加して...
続きを読む
動画のショットの種類一覧|伝わる印象とAI動画プロンプトの書き方

動画のショットの種類一覧|伝わる印象とAI動画プロンプトの書き方

ショットの種類とは、動画の1カットを「被写体をどのくらいの大きさで映すか」「どの高さ・向きから撮るか...
続きを読む
Web制作が止まらないネット環境|有線と無線・速度より安定性

Web制作が止まらないネット環境|有線と無線・⁠速度より安定性

Web制作の作業が途中で止まるかどうかを決めるのは、回線速度(Mbps)ではなく、遅延・ゆらぎ・パケ...
続きを読む
副業Web制作の確定申告|開業届・青色申告から申告までの流れ

副業Web制作の確定申告|開業届・⁠青色申告から申告までの流れ

給与を1か所から受け、その全額が源泉徴収の対象になっている会社員は、給与以外の所得(売上から経費を引...
続きを読む
スポット依頼の取り方|最初の1件は応募30件・20時間だった

スポット依頼の取り方|最初の1件は応募30件・⁠20時間だった

スポット依頼とは、継続契約を結ばず、1回の作業ごとに発注・納品・支払いが完結する単発の仕事のことです...
続きを読む
ComfyUIとは?無料の範囲・動作環境・ライセンスを始める前に整理

ComfyUIとは?無料の範囲・⁠動作環境・⁠ライセンスを始める前に整理

ComfyUIとは、画像や動画を生成するAIモデルを、ノード(処理の部品)を線でつないで動かす無料の...
続きを読む
インハウスデザイナーとは?受託との違いと3つの軸で整理

インハウスデザイナーとは?受託との違いと3つの軸で整理

インハウスデザイナーとは、事業会社に所属し、自社の商品やサービスのためにデザインする人のことです。対...
続きを読む
Fireflyは自分の契約でどこまで使えるか|生成クレジットの上限と超過後

Fireflyは自分の契約でどこまで使えるか|生成クレジットの上限と超過後

生成クレジットとは、Adobeの生成AI機能を使うたびに減っていく、月ごとの持ち点です。付与数は契約...
続きを読む
DomoAIとは|料金プラン・使える機能・クレジットの仕組みを整理

DomoAIとは|料金プラン・⁠使える機能・⁠クレジットの仕組みを整理

DomoAI(ドモAI)とは、シンガポールの DOMOAI PTE. LTD. が提供する、ブラウザ...
続きを読む
副業Web制作の現実|週何時間なら案件を受けられるか

副業Web制作の現実|週何時間なら案件を受けられるか

副業とは、本業より使える時間が少ない前提で成果を出す働き方です。時間が少ないから副業なのであって、仕...
続きを読む
生成AIで写真から動画を作る|無料枠で3本作って本番サイトに載せた

生成AIで写真から動画を作る|無料枠で3本作って本番サイトに載せた

生成AIの無料枠を使えば、手持ちの写真から数秒の動画を作ってWebサイトやSNSに載せられます。ただ...
続きを読む
学習ロードマップの作り方|未経験は案件から逆算して順序を決める

学習ロードマップの作り方|未経験は案件から逆算して順序を決める

学習ロードマップの作り方は、いま実際に発注されている案件を見て、そこから逆算するのが出発点です。作り...
続きを読む
エックスサーバーでWordPressをインストールする手順|クイックスタートの画面つき解説

エックスサーバーでWordPressをインストールする手順|クイックスタートの画面つき解説

WordPressクイックスタートとは、エックスサーバーの申し込みと同時に「独自ドメインの取得・設定...
続きを読む
ConoHa WINGでWordPressをインストールする手順|かんたんセットアップの画面つき解説

ConoHa WINGでWordPressをインストールする手順|かんたんセットアップの画...

WordPressかんたんセットアップとは、ConoHa WINGの申し込みと同時に「独自ドメインの...
続きを読む
Photoshop・Illustratorで構図を再現する方法|三分割グリッド・ガイドの引き方

Photoshop・⁠Illustratorで構図を再現する方法|三分割グリッド・⁠ガイドの引...

PhotoshopもIllustratorも、標準機能だけで三分割法や黄金比の構図ガイドを引けます。...
続きを読む
バナーデザインの構図パターン|三分割・対角線・日の丸で視線を操る基礎

バナーデザインの構図パターン|三分割・⁠対角線・⁠日の丸で視線を操る基礎

バナーデザインの構図とは、伝えたい情報の優先順位に沿って視線の流れを設計し、要素を配置する「型」のこ...
続きを読む
デベロッパーツールを使える人は伸びる|Chrome DevToolsで仮説と検証を回す手順

デベロッパーツールを使える人は伸びる|Chrome DevToolsで仮説と検証を回す手順

デベロッパーツール(Chrome DevTools)とは、ブラウザに標準で入っている検証環境のことで...
続きを読む
サイト構造の設計手順|ページ洗い出しから階層を組み立てる情報設計のやり方

サイト構造の設計手順|ページ洗い出しから階層を組み立てる情報設計のやり方

サイト構造の設計とは、サイトに載せる情報をすべて洗い出し、似たものをグループにまとめ、親子の階層に組...
続きを読む
Chrome・VSCode・GitHubでCSSが反映されない原因と対処法

Chrome・⁠VSCode・⁠GitHubでCSSが反映されない原因と対処法

ChromeでCSSが反映されない、VSCodeで編集しても変わらない、GitHub Pagesにデ...
続きを読む
GTMエンジニアは何者 ?|Go-To-MarketとGoogle Tag Manager

GTMエンジニアは何者 ?|Go-To-MarketとGoogle Tag Manager

GTMエンジニア(Go-To-Market Engineer)とは、営業・マーケティング・エンジニア...
続きを読む
ブラウザだけで始めるプログラミング練習環境5選【環境構築不要・無料】

ブラウザだけで始めるプログラミング練習環境5選【環境構築不要・⁠無料】

「プログラミングを始めたい。でも環境構築でつまずいて、コードを1行も書かないまま諦めた。」 プログラ...
続きを読む
LAPRASとは?エンジニアスキルを可視化して成長に繋げる方法

LAPRASとは?エンジニアスキルを可視化して成長に繋げる方法

LAPRASとは、エンジニアの技術的なアウトプット(GitHub・技術記事・イベント登壇など)をAI...
続きを読む
ドメインパワーより大事なSEO評価基準4つ|Web制作初心者が本当に見るべき指標

ドメインパワーより大事なSEO評価基準4つ|Web制作初心者が本当に見るべき指標

この記事を読む前に「ドメインパワーはそもそもGoogleの公式指標なのか?」という疑問をお持ちの方は...
続きを読む
CSSプロパティ一覧【カテゴリ別・使用例付きリファレンス】

CSSプロパティ一覧【カテゴリ別・⁠使用例付きリファレンス】

CSSプロパティとは、HTML要素の見た目やレイアウトを制御するための指定項目です。この記事では、実...
続きを読む
ポートフォリオ公開するためのレンタルサーバーの選び方

ポートフォリオ公開するためのレンタルサーバーの選び方

Web制作を学んで作品が増えてきたら、次のステップはポートフォリオサイトの公開です。ローカル環境で作...
続きを読む
WordPress案件を受注したら最初にやるサーバー設定

WordPress案件を受注したら最初にやるサーバー設定

WordPress案件を受注した——おめでとうございます。でも「まず何をすればいいんだろう?」と不安...
続きを読む
HTML/CSS練習問題20選|初心者向けコーディング実践課題集

HTML/CSS練習問題20選|初心者向けコーディング実践課題集

HTML/CSSの基礎を身につけるには、実際に手を動かして書くのが一番の近道です。この記事では、初心...
続きを読む
SEOチェックツール比較7選|無料有料の目的別おすすめと選び方

SEOチェックツール比較7選|無料有料の目的別おすすめと選び方

SEOチェックツールは、目的に応じて「検索実績を見るもの」「ページの品質を診断するもの」「キーワード...
続きを読む
【2026年版】AI検索時代のSEO対策入門 — llms.txt・構造化データ・FAQの始め方

【2026年版】AI検索時代のSEO対策入門 — llms.txt・⁠構造化データ・⁠FAQの...

「ちゃんとSEO対策をしているのに、問い合わせが増えない」と感じていませんか。Google検索に加え...
続きを読む
Adobe Creative College|Photoshop・Illustratorを独学できる公式無料スクール

Adobe Creative College|Photoshop・⁠Illustratorを...

デザインツールを学びたいと思ったとき、多くの人がYouTubeや書籍で独学をスタートします。でも、こ...
続きを読む