CSSだけでHTMLのテキストを簡単に置き換える方法

misa

こんにちは、ウェブデザインパレットのmisaです。

今回は、CSSを使用してWebページ上のテキストを置き換える方法について解説します。

CSSだけでHTMLのテキストを直接書き換えることはできません。CSSは主にスタイルを指定するための言語であり、HTMLの構造や内容を変更することはできないからです。
HTMLのテキストを変更するには、JavaScriptを使用する必要があります。

しかし、CSSを使用して擬似要素や content プロパティを使ってテキストの内容を補足的に表示したり変更したりすることは可能です。今回はその方法について解説します。

あわせて読みたい

CSSとは？Webサイト制作初心者でも安心！基本から応用まで徹底解説  こんにちは、ウェブデザインパレットのmisaです。 Webサイトを閲覧していると、見やすく読みやすいレイアウトや思わず目を引くようなデザインに出くわすことがあります…

なぜCSSでテキストを置き換えるのか？

HTMLを直接変更したくない場合

• HTMLの構造を保ちつつ、表示されるテキストだけを変えたい
• CMSなど、HTMLを直接編集できない環境でデザインをカスタマイズしたい

擬似要素とcontentプロパティでテキストを変更

CSSの擬似要素 ::before や ::after とcontent プロパティを使用して、テキストを変更できます。

<p class="replace-text">元のテキスト</p>

.replace-text {
  font-size:0; /* 元のテキストを見えなくする */
}

.replace-text::before {
  content:'置き換えたテキスト'; /* 置き換えたいテキストをここに記述 */
  font-size:16px;
}

Webページ上の表示👇

この方法では、元のテキストのフォントサイズを0にして見えなくし、疑似要素で新しいテキストを表示しています。

misa

HTMLの構造を変えずに、簡単にテキストを変更できます。

CSSによるテキストの変更は、実際のHTML内容を変えるものではなく、表示されるテキストを見た目として変えるだけです。
コンテンツそのものを書き換えたい場合は、JavaScriptを使用するのが一般的です。

まとめ

今回は、CSSを使用してWebページ上のテキストを置き換える方法について解説しました。

HTMLの内容を変更せずに、表示されるテキストだけ変えたいときにおすすめです。

JavaScriptを使用しなくても、数行のCSSだけで簡単に実装できるので、覚えておくと便利です。

では、また～✨