AI で作った資料の手直し

# HTML の文字の色や大きさを、コードを書かずに変える方法
執筆：UTNOA ｜ 情報確認日：2026-10-11

AI が作った HTML 資料の見出しの色や文字の大きさを少しだけ変えたいとき。CSS を書いて直す方法と、画面で選んで右のパネルで文字の大きさ・色・余白・横幅を変える方法を説明します。

HTML の文字の色や大きさを、コードを書かずに変える方法この記事の内容[コードで直す方法](#section-1)

[コードで直すときに困ること](#section-2)

[UTNOA HTMLエディタなら、選んで右のパネルで変える](#section-3)

[見た目を整えるときのこつ](#section-4)

AI が作った資料の見出しが、少し小さい。色も会社のロゴに合わせたい。そう思ってファイルを開くと、style や class と書かれたコードが並び、どこを触れば見出しだけが変わるのか分からない。直したいのは見た目の少しだけなのに、コードを読み解くところから始めることになります。

この記事では、HTML の文字の色や大きさを変える方法を、コードで直す方法と、画面で直す方法に分けて説明します。

## コードで直す方法
HTML の見た目は、CSS というルールで決まっています。見出しの色を変える場合は、次のどちらかを書き換えます。

ファイルの上の方にある style の中で、見出し(h1 や h2)や、見出しに付いた class の色(color)や大きさ(font-size)を探して書き換える。

見出しのタグに、直接 style="color: #245BDC; font-size: 32px;" のように書き足す。

1の方法は、同じ種類の見出しがまとめて変わります。2の方法は、その見出しだけが変わります。どちらも、ファイルを保存してブラウザで開き直し、見た目を確かめます。

## コードで直すときに困ること
色や大きさが、どの行で決まっているかを探すのに時間がかかります。AI が作った資料は、ルールが何重にも重なっていることがあります。

変えたつもりが、ほかのルールに上書きされて変わらないことがあります。

書き換えるたびに、保存して開き直す必要があります。

## UTNOA HTMLエディタなら、選んで右のパネルで変える
UTNOA HTMLエディタは、AI が作った HTML の資料を、コードを知らなくても画面の上で直して保存できる無料のツールです。

見出しを選ぶと、右のパネルで文字の大きさ・色・余白・横幅を変えられる見出しを選ぶと、右のパネルで文字の大きさ・色・余白・横幅を変えられる右のパネル: 文字の大きさ・色・太字・揃え、背景の色、余白、横幅右のパネル: 文字の大きさ・色・太字・揃え、背景の色、余白、横幅変えたい見出しや段落を、画面の上でクリックして選びます。

右のパネルで、文字の大きさ・色・太字・揃え、背景の色、余白、横幅を変えます。

変えた結果は、その場で画面に出ます。

気に入ったら保存します。

画像も差し替えられます。大きな写真は自動で縮小して埋め込みます。

操作は最大100回まで元に戻せます。試しに変えてみて、合わなければ戻せます。

開いたファイルはパソコンの中だけで処理し、UTNOA を含め、どこにも送信しません。

## 見た目を整えるときのこつ
色は、会社のロゴやサイトの色に合わせて2〜3色までにします。色が多いと、どこが大事か伝わりにくくなります。

文字の大きさは、見出し・本文・補足の3段階にそろえると、読みやすくなります。

余白を少し広げるだけで、詰まって見える資料が読みやすくなることがあります。

文章そのものを直す方法は、[ChatGPT や Claude が作った HTML 資料を、頼み直さずに直す方法](/column/ai-html-edit-without-asking-again/)で説明しています。

## AIが作った資料を、頼み直さずに直す。
UTNOA HTMLエディタは、AIが作ったHTMLの資料を、画面の上で選んで直して保存できる無料のツールです。開いたファイルは、どこにも送りません。

[HTMLエディタのページを見る](/html-editor/?src=column)[ほかのツールを見る](/tools/?src=column)作った理由は、[HTMLエディタを作りました](/column/html-editor-story/)に書いています。