CSSの content プロパティの便利な使い方いろいろ

今まであまり知らなかったのですが、contentプロパティを使うと自動的に文字や画像を自動的に挿入したりできて便利ですね。最近調べて知った、contentプロパティを使用した表示の仕方をいくつか書きだしてみました。

IE8以上でないとcontentプロパティを使った、:beforeや :after擬似要素は対応していませんが、「 IE9.js」を使用すれば使える範囲も広がります。ちなみにIE9.jsを適用しても5.の連番表示は8以下では表示できませんでした。

1. リストの最初の要素に”★new!”を表示する

リストの最初の要素に”★new!”を表示した例
更新記事一覧などで最新の記事に自動的に”★new!”等の表示や画像を表示する事ができます。文字だけでなく画像も表示できます。Webフォントを使えばいろんなアイコンが表示できますね。

デモ

See the Pen リストの最初の要素に”★new!”を表示するサンプル by Saomocari (@Saomocari) on CodePen.

HTML

<ul>
	<li>商品追加しました!</li>
	<li>商品追加しました!</li>
	<li>商品追加しました!</li>
	<li>商品追加しました!</li>
</ul>

CSS

li:first-child:after{
	content: "★new!";
	margin-left: 5px;     
	font-size: small;     
	color: #f619b0;     
	vertical-align: text-top; 
}

2. リンクされているurlを表示する

リンクされているurlを表示した例
attrでhref属性を指定し、リンクしたテキストの後ろへ、リンクされているURLを自動的に表示します。

デモ

See the Pen リンクされているurlを表示するサンプル by Saomocari (@Saomocari) on CodePen.

HTML

<P><a href="https://memocarilog.info/">memocarilog</a></P>

CSS

a:after { 
	content: " [ "attr(href)" ] ";  
}

3. パンくずリストの表示

パンくずリストを表示した例
パンくずリストの”>”の部分を隣接セレクタを使って、二個目以降のliの前に挿入しています。HTMLに余計なものを記入しなくて済むのでいいですね。

デモ

See the Pen パンくずリストの表示サンプル by Saomocari (@Saomocari) on CodePen.

HTML

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Content1</a></li>
    <li>現在のページ</li>
</ul>	

CSS

ul{
	padding: 10px;
	overflow: auto;
	_zoom:1
}
li {
	float: left;
	list-style: none;
}
li + li:before {
	margin: 0 8px;
	content: ">";
}

4. リンクのtitleをキャプションのように表示する

リンクのtitleをキャプションのように表示した例
attr で title 属性を指定し、画像の後に title のテキストを挿入してキャプションのように表示しています。

デモ

See the Pen リンクのtitleをキャプションのように表示するサンプル by Saomocari (@Saomocari) on CodePen.

HTML

<p><a href="#" title="ダックスフンド"><img src="dachs.jpg" alt="ダックス"/></a></p>

CSS

p a{
	display: block;
	text-decoration: none;
	width: 300px;
}
p a:after{
 display: block;
 content: attr(title);
 text-align: center;
 color: #666;
 font-size: small;
  }

5. 連番を表示する

連番を表示した例
contentプロパティを使うと文字列や画像だけでなく、連番も追加できます。親要素に counter-increment: 任意の文字列; を指定し、counter-increment が指定されている要素が隣り合っていないと連番表示できませんのでご注意ください。

デモ

See the Pen 連番を表示するサンプル by Saomocari (@Saomocari) on CodePen.

HTML

<h3>タイトル</h3>
      <p>略</p>
<h3>タイトル</h3>
      <p>略</p>     
<h3>タイトル</h3>
      <p>略</p>
<h3>タイトル</h3>
      <p>略</p>

CSS

h3{
  counter-increment: section;
}
h3:after{
    content: " (" counter(section) ")";
}
h3{
   counter-increment: section;
   margin: 13px 0 3px;
}

Related Article

4 Comments & Tracbacks

  • ひーさん 2014-12-14 12:27 AM

    はじめまして。contentプロパティについて調べてたらここにたどり着きました。こんなに使いどころがたくさんあるんだなあーって感激です。ありがとうございます(^o^)/
    自力でサイト作成を始めたばかりです。このサイトはワードプレスですか?とっても見やすくてキレイですね(^o^)

    Reply

    • saori 2014-12-15 11:53 AM

      ひーさん さま
      初めまして。コメントありがとうございます!
      このブログは WordPress で作っています。
      こちらこそお褒め頂きありがとうございます。

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS