content プロパティは要素の前や後ろにテキスト・画像を挿入する際に設定します。このプロパティを使用する場合には、擬似要素である ::before または ::after を併せて使います。例えば次のようになります。Yahoo ニュースなどで一度は見たことがあるのではないでしょうか。
これを実現するなら次のようにすればよいです。
1 2 3 4 5 6 7 8 9 | <ul> <li class="new">自民3月に党大会 解散憶測も写真</li> <li>点滴に異物 殺人事件で捜査写真</li> <li class="new">米軍機墜落 同型機の運用停止写真</li> <li>だまされたふり無罪 地検控訴</li> ・ ・ ・ </ul> |
1 2 3 4 5 6 7 8 9 | .new::after { content: "NEW"; font-size: .75em; background: #FF9F80; color: #fff; padding: 5px 5px 3px; margin-left: 5px; border-radius: 3px; } |
ちなみに、content プロパティによって表示したテキストは CSS で作られた架空の擬似要素であるため、選択したりコピー＆ペーストすることはできません。HTML で文書として記述されていないからです。
（Yahoo! を確認したのですが、実際には span タグによって実現されていました。だからコピー＆ペーストできちゃいます。例がよくなかった(Ｔ＿Ｔ））
また、ネットで検索するとコロン(：)がひとつのものとふたつのものが出てくると思いますが、CSS3 以降はコロンはふたつになっています。コロンひとつでスタイルシートに記述しても動作はしますが、今後を考えるとコロンふたつに統一しておいたほうがよいでしょう。
こちらを参考にしました。リンク先では content プロパティをどのように応用すればよいのかをソースコード付きで豊富に紹介されていますので、一度は目を通しておくことをおすすめします。
CSSの content プロパティーを使いこなそう！ | Webクリエイターボックス
content プロパティで当ブログが多用しているのはアイコンフォントです。ブログカスタマイズとして定番のテクニックですが、以前に記事にしましたのでよろしければこちらもどうぞ。
アイコンフォントのFont Awesomeを使ってみた | Naokix.net
また、content プロパティの応用として、吹き出しを作ることができます。これは画像を使用せず CSS のみで実現できるので、大きさや色などのカスタマイズが自由自在です。SNS ボタンや見出しに使われているのをよく見かけます。
SNSボタンに必須！CSSだけで吹き出しを作る | Naokix.net
content プロパティは HTML 文書に直接記述せずにテキストや画像を挿入するという性質から、擬似要素である before や after と併用する例が多いです。少なくとも併用していない例を私は知らない。
知らなくてもブログを運営できますが、知っておくとおしゃれなカスタマイズが可能になり、とても便利です。ブログに来てくれる人はデザインを見にくるわけではありませんが、イケてるデザインを目にするとテンションも上がるというものです。ライバルに差をつけられるようにがんばってください。
Comment