WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「コンテンツの挿入・置換」

content「コンテンツの挿入・置換」

「content」は、要素の前後に文字列や画像等の挿入を指定します。
疑似要素の::before、::afterとセットで指定します。

CSS Ver.適用要素継承
2.1疑似要素の
::before、::after
しない
広告

content の指定方法

構文

content : normal | none | 文字列 | url | カウンタ | attr | open-quote | close-quote | no-open-quote | no-close-quote ;

プロパティ/設定値意味
content : normal; 挿入しない。
content : none; 挿入しない。
content : "文字列"; 挿入する文字列を引用符で囲んで指定。
content : url(); url()のカッコ内に挿入する画像等のファイルのurlを指定。
content : counter(); counter()のカッコ内にカウンタ名を指定。連番が挿入される。
content : counters();
counters()のカッコ内にカウンタ名、区切り文字を指定。
入れ子の連番が挿入される。
content : attr(); attr()のカッコ内に属性名を指定。属性の値が挿入される。
content : open-quote; 「quotes」で指定された開始引用符が挿入される。
content : close-quote; 「quotes」で指定された終了引用符が挿入される。
content : no-open-quote; 引用符の挿入はないが、引用符の階層が一段階深くなる。
content : no-close-quote; 引用符の挿入はないが、引用符の階層が一段階浅くなる。
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

content のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_content_string::before { content : "★";}
.css_content_url::before { content : url(../../../image/com_ya1.gif);}
.css_content_attr::after { content : "(" attr(cite) ")" ;}

.css_content_quote q { quotes: "『" "』" "【" "】";}
.css_content_quote q::before { content : open-quote;}
.css_content_quote q::after { content : close-quote;}

dl{ counter-reset:cnt cnts; }
.css_content_counter dd::before { 
	counter-increment:cnt; 
	content : counter(cnt) "行目." ;}
.css_content_counters dd::before { 
	counter-increment:cnts; 
	content : counters(cnts,"-")"." ;}
</style>

<!-- html -->
<div class="common">
  <div class="cssTitle">content: "★"</div>
  <div class="css_content_string">前に文字列が挿入される。
  </div>

  <div class="cssTitle">content: url(URL名)</div>
  <div class="css_content_url">前に画像が挿入される。
  </div>

  <div class="cssTitle">content: attr(cite)</div>
  <div>
  <blockquote class="css_content_attr" cite="https://web-designer.cman.jp/">
  後に属性内容が挿入される。</blockquote>
  </div>

  <div class="cssTitle">content: open-quote<br>content:close-quote</div>
  <div class="css_content_quote">
  <q><q>quotes</q>で指定された引用符<q>『』など</q>が挿入される。</q>
  </div>

  <div class="cssTitle">content:counter(カウンタ名)</div>
  <div>
  <dl class="css_content_counter">
  <dt>連番が挿入される。</dt>
  <dd>①</dd>
  <dd>②</dd>
  <dd>③</dd>
  </dl>
  </div>

  <div class="cssTitle">content:counters(カウンタ名)</div>
  <div>
  <dl class="css_content_counters">
  <dt>連番が挿入される。:1階層目</dt>
  <dd>①</dd>
  <dd>②</dd>
  <dd>③
    <dl>
    <dt>連番が挿入される。:2階層目</dt>
    <dd>③の1</dd>
    <dd>③の2
      <dl>
      <dt>連番が挿入される。:3階層目</dt>
      <dd>③の2の1</dd>
      </dl></dd>
    </dl></dd>
  </dl>
  </div>
</div>
content: "★"
前に文字列が挿入される。
content: url(URL名)
前に画像が挿入される。
content: attr(cite)
後に属性内容が挿入される。
content: open-quote
content:close-quote
quotesで指定された引用符『』などが挿入される。
content:counter(カウンタ名)
連番が挿入される。
content:counters(カウンタ名)
連番が挿入される。:1階層目
連番が挿入される。:2階層目
③の1
③の2
連番が挿入される。:3階層目
③の2の1

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン