文字に蛍光ペン風ラインを引きたい!のに反映されない(解決済)

バックグラウンドカラーではなく、アンダーラインでもなく、文字の下半分に薄く色付くようなラインが引きたい!
CSSをいじれば簡単…なはずなのになかなか反映されず大変でした。
解決法は下の方に。

方法は簡単に見つかった

CSSファイルにクラスを設定して、本文でspanでの指定

こちらのページがとっても分かりやすいし見やすいです。

background: linear-gradient(transparent 50%, yellow 50%);

が該当するCSSタグ。
これを、いちいち書き込まなくてもいいようにCSSファイルにクラスを作ります。

クラスの指定法は、CSSファイルで

.クラス名 {
中身のタグ
}

と書くだけです。

今回は色がいくつか欲しかったので

.underY {
background: linear-gradient(transparent 50%, #fffdba 50%);
}

.underP {
background: linear-gradient(transparent 50%, #ffd6fe 50%);
}

.underG {
background: linear-gradient(transparent 50%, #d8fff0 50%);
}
}

と指定してみました。
うん簡単簡単、さっそく記事で使ってみよう…

(*^^*) {記事内でラインを引きたい文字を<span class=”underY”></span>で囲んで…

 

何もならない!なんでー} Σ(゚д゚lll)

何故か反映されない

とりあえず初心者あるあるを確認していく

打ち間違い?

よーく照らし合わせて見るも、単純な記述だしそもそもコピペして色変えただけ…
ありがちな「;」忘れや「}」もありません。
コメントもきちんと閉じてます。

テーマの設定?

別テーマを使うブログで同じように記述してみました。
結果、やっぱり反映されず。

_(┐「ε:)_  {ちっ、人のせいにできなかったか…

キャッシュの問題?

キャッシュ削除しとけ!ってページが沢山あったので試してみる。

やはり反映されず。

もしかしてクラスの名前がいけなかった?

数色のアンダーラインが欲しかったので例の.underじゃなくて.underYとか少しもじったんですよね。
まさか大文字だめとかルールがあるの?

一つを.underにしてみる

やっぱり反映されず

くそ、何がいけないんだ…

 

じゃあ色?色にこだわり過ぎた?

…とここで色をシンプルなものに変えようとスタイルシートをいじりに行った時にある事に気が付きます。

あれ?なんでここにhtmlタグが…

実は最初いじってたのは別のブログで、検証するためにこのブログにもタグを写したんですが、
その時元のCSSじゃなくてこの記事に書いたコードをコピペしてたんです。(色付き)

それを消したら…

ばーん!

°˖☆◝(⁰▿⁰)◜☆˖°できた

無駄に使っちゃうぞ☆

原因はキャッシュでした

というわけでコードはちゃんと打てている事が分かったので、
別ブラウザを使っている元のブログの方でもキャッシュの削除を行った所、
無事表示されました!

やったー!

CSSが反映されない!!って私みたいな初心者の方、
キャッシュの削除!大事!です!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です