AIと一緒にサイトを作る前に
知っておくべきHTML/CSSの最低限

AIがコードを書いてくれる時代に、なぜHTMLを学ぶのか

このサイト（スキル・資産化ナビ）はCMSを使わず、Claude Codeと純粋なHTML+Tailwind CSSで構築しています。サーバー費用はゼロ。デザイナーへの依頼も不要でした。

可能になった理由は「HTMLを完全に書ける」からではありません。「AIが書いたHTMLを読んで、どこを変えれば何が変わるか判断できる」からです。その判断力を得るために、学ぶべき最低限があります。

これだけ知れば「読める」——最低限のHTML/CSS

① タグの入れ子構造

HTMLは「箱の中に箱を入れる」構造です。<div>が大きな箱、<p>が段落、<a>がリンクと覚えるだけで、全体の構造が見えてきます。

② class属性とCSSの関係

class="bg-orange text-white"のように書けば「オレンジ背景・白テキスト」になる——これがTailwind CSSの仕組みです。クラス名を読めれば、見た目の変更場所が特定できます。

③ リンクと画像の書き方

<a href="URL">でリンク、<img src="パス">で画像。この2つを知るだけで、アフィリエイトリンクの差し替えや画像の変更が自分でできます。

Udemyで学ぶべきは「写経」より「読解」

おすすめの学び方は、AI生成コードをUdemyで学んだ知識で読み解くサイクルです。完全に書けなくていい。「ここの色を変えたい」「このボタンのリンク先を変えたい」が自分でできれば、制作の自由度が一気に上がります。

• HTMLの基本タグ（div・p・a・img・ul・li）を理解する
• CSSのボックスモデル（margin・padding・border）を把握する
• Flexboxの基本（並べ方・中央寄せ）を覚える
• あとはAIに任せて、結果を読んで修正するだけ