content quotesのレンダリング

 
内容の追加
ホーム > CSS2 Note > content|quotes > content quotesのレンダリング

文字列の追加

<style type="text/css"><!--
h1 {font-size:medium;}
h1:before {content:"■ ";}
--></style>

<h1>第1章</h1>
<h1>第2章</h1>
-ie7は未対応。ie8 ff3 o9 sf4 gc2は対応。
 

画像や音声データの追加

<style type="text/css"><!--
h1 {font-size:medium;}
h1:before {content:url(img/bullet.gif);}
--></style>

<h1> 第1章</h1>
<h1> 第2章</h1>
-ie7は未対応。ie8 ff3 o9 sf4 gc2は対応。
 

カウンタの追加

counter

<style type="text/css"><!--
h1, h2 {font-size:medium; margin:0; padding:0;}

h1:before {
content:counter(chapter) ".";
counter-increment:chapter;
counter-reset:section;
}
h2:before {
content:counter(chapter) "." counter(section);
counter-increment:section;
}
--></style>

<h1> イメージマップ</h1>
<h2> イメージマップ</h2>
<h2> マップのエリア</h2>
<h1> 訂正</h1>
<h2> 追加</h2>
<h2> 削除</h2>
-ie7は未対応、ie8 ff3 sf4 gc2は不完全、o9は対応しています。

counters

<style type="text/css"><!--
ol {counter-reset:item; list-style:none;}
li:before {content:counters(item, "."); counter-increment:item;}
--></style>

<ol>
<li> イメージマップ
  <ol>
  <li> イメージマップ</li>
  <li> マップのエリア</li>
  </ol>
</li>
<li> 訂正
  <ol>
  <li> 追加</li>
  <li> 削除</li>
  </ol>
</li>
</ol>
-ie7は未対応。ie8 ff3 o9 sf4 gc2は対応しています。
 

quotesプロパティで指定した引用符の追加

<style type="text/css"><!--
.so q {quotes:"「" "」" "『" "』" "(" ")";}
.so q:before {content:open-quote;}
.so q:after {content:close-quote;}

.cms q {quotes:"{" "}" "[" "]" "(" ")";}
.cms q:before {content:open-quote;}
.cms q:after {content:close-quote;}
--></style>

<div class="so">
<q>至人之用心、如鏡。不将不逆、応而不蔵。<q>至人<q>しじん</q>の心を用うるは、鏡の如し。将<q>おく</q>らず逆<q>むか</q>えず、応<q>おう</q>じて而<q>しか</q>して蔵<q>おさ</q>めず</q></q>
</div>
<br>
<div class="cms">
<q>コンテンツマネージメントシステム<q>CMS<q>Content Management System</q></q></q>
</div>
-ie7 sf4 gc2は未対応。ie8 ff3 o9は対応しています。
 

指定した引用符を表示しない

<style type="text/css"><!--
q {quotes:"{" "}" "[" "]" "(" ")" "<" ">";}
q:before {content:open-quote;}
q:after {content:close-quote;}
q.del:before {content:no-open-quote;}
q.del:after {content:no-close-quote;}
--></style>

<q>コモン・ゲートウェイ・インタフェース<q>CGI<q class="del"><q>Common Gateway Interface</q></q></q></q><br>
<q>ピー・エイチ・ピー<q>PHP<q class="del"><q>Hypertext Preprocessor</q></q></q></q>
-ie7 sf4 gc2は未対応。ie8 ff3 o9は対応しています。

指定された要素において引用符を表示しません。後に続く引用文のネスト(入れ子)において、quotesプロパティで設定された引用符を表示する効果を維持します。
 

引用符を表示しない

<style type="text/css"><!--
q {quotes:"{" "}" "[" "]" "(" ")";}
q:before {content:open-quote;}
q:after {content:close-quote;}
q {quotes:none;}
--></style>

<q>インターネットプロトコルバージョン4<q>IPv4<q>Internet Protocol version 4</q></q></q><br>
<q>アイピーバージョン6<q>IPv6<q>Internet Protocol Version 6</q></q></q>
-ie7 sf4は未対応。ie8 ff3 o9は対応しています。
 

属性Xの属性値を文字列として追加

<style type="text/css"><!--
h1 {font-size:medium;}
h1:before {content:attr(class);}
--></style>

<h1 class="Chapter"> 第1章</h1>
<h1 class="Chapter"> 第2章</h1>
-ie7は未対応。ie8 ff3 o9 sf4 gc2は対応。
 
トップページ CSS2 Note ページトップ
 2009/01/01発行 2009/09/01更新