HTMLテキストの太字を解除する方法

選択したHTML見出しテキストの太字を解除するには、そのテキストのCSS font-weight を normal に設定します。変更したい語句だけを <span> で囲み、そのspanにCSSクラスを指定します。見出しは引き続き h1 などの見出し要素であり、構造や意味上の重要性は変わりません。見出し全体を変更する場合は、見出し自体にルールを適用します。

見出しの一部の太字スタイルを解除する

<span> は、親要素の意味や見出しレベルを変えずにインラインテキストをまとめる要素です。通常の太さにしたい語句だけをspanで囲みます。spanの外側にあるテキストには、見出しのほかのスタイルが適用されたままです。繰り返し使う場合は、spanにクラスを追加し、スタイルシートまたは文書のhead内にある <style> 要素でそのクラスを定義します。

選択したテキストにCSSクラスを使う

次の実行可能なJavaScript例は、クラスルールと見出しを含むHTML断片を生成します。出力をページのマークアップとして使い、見出しと対象の語句を必要に応じて変更してください。.not-bold セレクターはそのクラスが付いたspanだけに一致するため、ほかのspanのスタイルは保たれます。コード例と出力に含まれる表示テキストは英語のままです。

この例を実行して、クラスを使ったページ断片を生成します。

const page = `<style>
.not-bold { font-weight: normal; }
</style>
<h1>Keep this bold; <span class="not-bold">make these words normal weight</span></h1>`;
console.log(page);

<style>
.not-bold { font-weight: normal; }
</style>
<h1>Keep this bold; <span class="not-bold">make these words normal weight</span></h1>

同じ見た目をほかの場所でも使う場合は、このクラスを再利用できます。選択したテキストだけを変更したいときは、広範囲に適用される span セレクターを避けてください。適用範囲内のすべてのspanに一致するため、無関係なコンテンツまで変わることがあります。クラスを使えば対象が明確になり、ページが大きくなったときの意図しない変更も抑えられます。

1回限りの変更にはインラインCSSを使う

一か所だけ変更する場合は、spanのHTML style 属性に宣言を記述します。例: <span style="font-weight: normal">selected words</span>。固有の変更には手軽ですが、表示指定が要素に直接付くため、クラスより再利用しにくくなります。見出しのほかの部分のスタイルを保つには、宣言をspanに付けてください。複数の要素に同じ指定を使う場合は、代わりにクラスルールへ移します。

見出し全体の太字スタイルを解除する

見出し全体を変更するには、見出し自体に font-weight: normal を設定します。例: <h1 style="font-weight: normal">A normal-weight heading</h1>。見出し内のインラインコンテンツも含め、すべてのテキストに適用されます。複数の見出しやページに同じ指定を適用する場合は、インラインの style 属性ではなくスタイルシートのルールを使います。見た目の太さを変えても、見出しレベルや文書アウトラインでの役割は変わりません。

方法を選び、表示結果を確認する

再利用するルールで一部のテキストを変更するならクラスを、一度だけspanを変更するならインラインCSSを、見出し全体を変更するなら見出しのルールを使います。ルールを適用したら、ページの表示結果を確認してください。クラスが意図したspanに付いていることと、CSSセレクターがそのspanに一致することを確かめます。それでも太字に見える場合は、より詳細度の高いルールや後から適用されるルールなど、スタイルシート内のほかの適用可能な指定を確認し、ブラウザーの開発者ツールで計算済みの font-weight を調べます。セレクターが対象に一致していないのか、別のルールが表示上の太さを決めているのかを特定するのに役立ちます。