Webページはざっくり2つの言語でできている。HTMLが「骨格」——「ここに見出し、ここに画像、ここにボタン」と配置を決める役。CSSが「見た目」——色、余白、形、大きさを決める役。AIに頼む時も、骨格を変えたいなら「HTMLに追加して」、見た目を変えたいなら「CSSで」と言い分けると伝わりやすい。

大きさの単位にはpx（ピクセル）とremがよく登場する。pxは絶対値——「16px」は画面上の小さな点16個分のイメージ。remは相対値——「1rem」が基準サイズ（多くの環境で16px）で、その何倍かで指定する。AIが出してくるコードにどちらかが書かれていたら、「サイズを指定している数字だ」と読めれば十分。

色の指定には2つのプロパティがある。colorは文字色、backgroundは背景色。「文字を濃いグレーに」→ color、「カードの背景を白に」→ background、と使い分ける。混同しやすい二つだが、役割が違うと知っていればAIへの指示が一往復で済む。

余白にも2種類ある。paddingは内側の余白——ボタンのテキストと枠の間の空き。marginは外側の余白——ボタンと次の要素の間の空き。「ボタンがぎゅうぎゅうで息苦しい」時はpaddingを増やす、「ボタンが詰まって並んでいる」時はmarginを増やす、と使い分ける。

角の丸さがborder-radius。「border-radius: 8px」で少し丸く、「border-radius: 9999px」で完全な丸（pill型）になる。「もっと丸く」と言う代わりに「border-radiusを大きくして」と言えると、AIへの指示が正確になる。

要素の大きさはwidth（横幅）とheight（高さ）で指定する。「width: 100%」は親要素の横幅いっぱい、「width: 320px」は固定幅。文字の大きさはfont-size——「font-size: 1.2rem」なら基準の1.2倍の大きさになる。

横並びのレイアウトでよく出てくるのがflex（Flexbox）。「display: flex」と書くだけで子要素が横に並ぶ。ナビゲーションバー・ボタン群・カードの横並びなど、AIがレイアウトを組む時に頻繁に使う。「横並びにして」という代わりに「flexで並べて」と言える。

最後にsrc。画像や動画の「参照先」を指定する属性で、「どのファイルを表示するか」のパスを入れる。「この画像を差し替えたい」時はsrcの値を変える、と知っておくと、AIへの依頼が具体的になる。

書けなくていい。読めて、AIに言葉で指示できればいい。HTMLとCSSの役割分担、paddingとmarginの内外、colorとbackgroundの文字と背景——この対比を地図として持っていれば、「なんか違う」ではなく「paddingをもう少し」と言えるようになる。

AIとページを作る言葉