CSSでHTMLのタグを書き換える

最終更新日:2021年11月04日公開日:2021年2月22日 2021年02月

1. CSSでタグを書き換えることはできない
2. なぜ書き換えたいと思ったか
3. どうしたらいいのか
- 3.1. CSSでタグを書き換えているように見せる

CSSでタグを書き換えることはできない

CSSに触りなれていないと、CSSでHTMLのタグを書き換えたいと思うことがあるかもしれません。しかし、CSSではタグを書き換えることはできません。
実際に＜CSS　タグ　書き換え＞で検索してみてもタグ自体を書き換える記事はなく、タグで囲まれたのテキストを書き換える方法やスタイルシートを書き換える方法などがヒットします。
検索結果は次に載せている通りです。※2021年2月22日時点
resultTagConversion

なぜ書き換えたいと思ったか

私の場合は、JavaScriptでHTMLを書き換える方法に慣れてからCSSを触ったため、CSSでも書き換えられると思い込んでいました。私と同様にあまりCSSに触れて来なかった方は不便に感じたことがあるのではないでしょうか？
もしかしたら、CSSとHTMLを中心に触っている方はタグをCSSで書き換えたいと思うことはないかもしれません。

どうしたらいいのか

冒頭でも言った通り、CSSでタグを書き換えることはできません。JavaScriptを使って書き換えることはできますが、CSSだけ使いたい...となった場合、どうしたらいいのでしょうか？
解決策としては実際に書き換えるのではなく、書き換えているように見せることでCSSのみで書くことができます。以下の例をもとに考えてみます。

CSSでタグを書き換えているように見せる

↓

上の例は【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替えるで紹介しています。
パスワードの表示・非表示の切り替えをCSSのみで行っています。

ポイントはCSSでタグ書き換えているように見せることです。
下の画像のようにチェックボックスをうまく使えばイベント発火のように見せることもできます。それを使ってテキストのタイプを書き換えているように見せています。
HTMLではチェックボックスのチェック有無で表示・非表示用にそれぞれテキストボックスとボタンを用意しています。
hidePassword_checkbox
↓
showPassword_checkbox