CSSのcontentプロパティーについて勉強してみた

CSSのcontentプロパティーってなんだろう？WEBエンジニアになって5年くらい経つのに今さらながらこの「content」プロパテーィについて気づいたまとめを記載していきます。

contentプロパティーとは？

文字や画像をCSSで指定できます。

CSSで指定できるのはなんだか不思議ですね。

contentプロパティーの特徴や注意点

contentプロパティーで指定した文字列は選択ができません。つまり、文字列のコピー&ペーストもできないということです。

この特徴が便利な面もあるとは思いませんが、一般的は予想外のことが多いと思いますので頭の片隅に入れて置くとよいでしょう。

また、:before擬似要素または:after擬似要素でしかcontentプロパティーは利用できません。

contentプロパティー用途は？

なんだかここまで調べてもパッとしません。

プログラマーとしては、インターフェースや抽象クラスの定義を知ったときの使い方の分からなさを思い出しました。

contentプロパティーの用途

• NEW!アイコン
• リスト形式の装飾
• 引用の装飾によくある「’」

用途として私が見つけたものを時々書き足していきますね。

contentプロパティーはSEO的には大丈夫？

うーむ簡単にググっても出てきませんでした。

私の主観としては、下記の観点でSEO効果はないのではと思います。

• CSSはデザイン的なものなので、コンテンツとして評価は薄い
• 要素の特性として選択できない、コピーできない。コンテンツとして取り扱わない要素と考えられる
• 単純なテキストと比べ評価しにくい

ということで、リストの装飾とかに便利ですがキーワード配置することは避けたいと思います。

 

 

参考サイト

http://www.webcreatorbox.com/tech/content-property/

http://www.htmq.com/style/content.shtml

 - フロントエンド CSS