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

最終更新日: 公開日: 2021年02月

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

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

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

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

どうしたらいいのか

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

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

hidePassword

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

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

showPassword_checkbox

より詳しい解説とソースコードも載せているのでぜひ確認してみてください。

【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える

 タグ: , ,  
 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
   
Apache Chrome Chrome 拡張機能 CSS Git Google HTML javascript PageSpeed Insights PHP python SEO Windows WordPress xyzzy Youtube z-index アナリティクス ウェビナー エディタ サーチコンソール サーバー管理 スライダー セミナー タグマネージャー テレワーク デザイン データベース ネットワーク フォーム ページ閲覧解析 マーケティング リッチリザルト レスポンシブ レスポンシブ対応 ログ解析 ローカル環境構築 営業 実装
contact
Pagetop