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

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

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

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

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

デモ

リストの最初の要素に”★new!”を表示|memocarilog demo

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を自動的に表示します。

デモ

リンクされているurlを表示する|memocarilog demo

HTML

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

CSS

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

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

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

デモ

パンくずリストの表示|memocarilog demo

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 のテキストを挿入してキャプションのように表示しています。

デモ

リンクのtitleをキャプションのように表示する|memocarilog demo

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プロパティを使うと文字列や画像だけでなく、連番も追加できます。こんな事ができるんだと驚いたのですが、よく考えると使い道が難しいかもしれません。

デモ

連番の表示|memocarilog demo

HTML

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

CSS

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