HTML の文字の色や大きさを、コードを書かずに変える方法

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

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

コードで直す方法

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

1. ファイルの上の方にある style の中で、見出し(h1 や h2)や、見出しに付いた class の色(color)や大きさ(font-size)を探して書き換える。
2. 見出しのタグに、直接 style="color: #245BDC; font-size: 32px;" のように書き足す。

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

コードで直すときに困ること

• 色や大きさが、どの行で決まっているかを探すのに時間がかかります。AI が作った資料は、ルールが何重にも重なっていることがあります。
• 変えたつもりが、ほかのルールに上書きされて変わらないことがあります。
• 書き換えるたびに、保存して開き直す必要があります。

UTNOA HTMLエディタなら、選んで右のパネルで変える

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

1. 変えたい見出しや段落を、画面の上でクリックして選びます。
2. 右のパネルで、文字の大きさ・色・太字・揃え、背景の色、余白、横幅を変えます。
3. 変えた結果は、その場で画面に出ます。
4. 気に入ったら保存します。

• 画像も差し替えられます。大きな写真は自動で縮小して埋め込みます。
• 操作は最大100回まで元に戻せます。試しに変えてみて、合わなければ戻せます。
• 開いたファイルはパソコンの中だけで処理し、UTNOA を含め、どこにも送信しません。

見た目を整えるときのこつ

• 色は、会社のロゴやサイトの色に合わせて2〜3色までにします。色が多いと、どこが大事か伝わりにくくなります。
• 文字の大きさは、見出し・本文・補足の3段階にそろえると、読みやすくなります。
• 余白を少し広げるだけで、詰まって見える資料が読みやすくなることがあります。

文章そのものを直す方法は、ChatGPT や Claude が作った HTML 資料を、頼み直さずに直す方法で説明しています。