PR

CSSで要素の内容を追加から書き換えまでこなしてくれてる便利な方法!【CSS黙示録】

webページを作成している時にテンプレートなどHTMLには手を加えたくないが一部の内容を変更したい時が多くあります。

そんな時に便利なのが要素指定がしてある部分をCSSを利用して変えてしまうという方法があります。

下記HTMLと実行結果があったとします。

HTML

<div class=”test”>てすと</>

実行結果

てすと

 

上記にCSSを利用して文章や画像などを追加することが可能!

CSSを使って変更

CSS

  • content “文字” 指定した文字を追加
  • url(URI) 指定URIの画像などを追加
  • attr(属性) 指定した属性の値を利用

前後関係

要素の前・後を指定する必要があるので下記を利用します

before … 要素の前に追加したい場合
after … 要素の後に追加したい場合

前例(before)

.test:before {
content: “文字”;
}

後例(after)

.test:after {
content: “文字”;
}

 

書き換えたい場合

追記したい場合で紹介してきましたが書き換えることも可能です。

例のてすとをテストに書き換えたい場合は初めに文字サイズを0にしてから書き換えたい文字のサイズを指定して書き換えたい内容を記載し書き換えることができます。

書き換え例

.test {font-size: 0px;}

.test:before {
font-size: 30px;
content: “テスト”;
}

コメント

アドセンスのお支払い情報画面に「お支払いが遅れることなく、税金の源泉徴収も適切に行われるようにするために、できる限り早急にシンガポールの税務情報をご提出ください。」と表示された?!(対処方法)
auスマホ・タブレットのSIMロックを無料で解除する方法(auスマホで格安MVMO SIMが使えるようになる!)
Windows11で高速スタートアップを無効にする方法(稀にハードウエア不具合を招くことも!?)
DaVinci Resolveの課金有料版「DaVinci Resolve Studio」をポイントも合わせてなるべくお得に購入する方法(実際に買ってみた)
【ライティング】キーボードなどのライティング設定を邪魔してくるWindws機能「動的ライティング」の切り方(無効にする方法)
【100均】ペン型セラミックカッターが便利すぎるのに100円で買える!?
【AI】初めてChatGPTに登録して聞いてみた(AI初体験)
入院時の暇つぶし最強アイテムは家でも使っているアレ!
容量は増えていくけどたまに必要になる中容量のSDカード(32GB)を購入したのでベンチマークしてみた
アリエクスプレスの配送状況に「輸入通関異常あり. 現在ご注文の調査中です。」?!
2024年6月
 12
3456789
10111213141516
17181920212223
24252627282930
タイトルとURLをコピーしました