CSSのcontentプロパティの使い方

contentとは？

contentプロパティの意味

contentは、::beforeや::afterを使ってHTML要素の前後に擬似要素を挿入する際、擬似要素の挿入内容を指定するcssプロパティです。contentプロパティは値として、テキスト、画像、カウンタやURLや記号など様々なコンテンツを指定することができます。

: CSSの疑似要素って何？before・afterの使い方

続きを見る

contentできる事

css contentできる事

css contentプロパティではbeforeやafterを使って擬似要素として基本的なテキストを表示したり、画像を表示したりすることができます。また、quotesプロパティを使用すれば開始終止符や引用終止符を表示することもできます。

URLでアンカーリンクが指定している場合に印刷をかけるとリンク先のURLがアンカーリンクに隠れてURLを判別することができなくなってしまいます。@media printとattrを使って属性指定をすることにより印刷時にのみアンカーリンクの隣にURLを表示することができます。

増減指定をするcounter-incrementとcounter指定を組み合わせれば連番指定なども行うことができます。

設定できる値

プロパティでは画像やテキスト、連番、URL、引用符を指定できるとお伝えしました。実際にどのようなコードを指定すればそれぞれ表示することができるのか基本的なテキストを表示することから確認していきます。

テキストを表示

contentでテキストを指定

HTML<div>要素の前の擬似要素の内容をContent:"テキスト";で指定しテキストを挿入します。

HTML・CSSコード

<body>
  <div class="test1">
   こんにちは。
  </div>
</body>

<body>

こんにちは。

</div>

</body>

.test1::before{
　　content:"OWLVIEW";
　　background-color:silver;
}

.test1::before{

　　content:"OWLVIEW";

　　background-color:silver;

}

HTMLファイルでは、基本的な文章を<div>要素で挟んで書きます。class指定でtest1に指定します。今回文章は「こんにちは。」という文章を書きました。「こんにちは。」という文章の前にテキストの擬似要素"OWLVIEW"という文章を入れていきます。
cssファイルでは、class名の".test1"を指定します。
擬似要素をHTML要素の前に表示するbeforeを[.test::before]で指定します。
content:"OWLVIEW";でHTML要素の前に挿入する擬似要素の内容を「OWLVIEW」に指定します。
background-color:silver;で背景色をシルバーに指定します。

url~画像を表示~

contentで画像を指定

HTML<div>要素の前の擬似要素の内容をContent:url(画像パス);で指定し画像を挿入します。

HTML・CSSコード

<body>
 <div class="test2">
  こんにちは。
 </div>
</body>

<body>

こんにちは。

</div>

</body>

.test2::before{
content:url(dog.jpg)
}

.test2::before{

content:url(dog.jpg)

}

HTMLファイルでは、基本的な文章を<div>要素で挟んで書きます。class指定でtest2に指定します。今回文章は「こんにちは。」という文章を書きました。「こんにちは。」という文章の前に画像の擬似要素を入れていきます。
cssファイルでは、class名の".test2"を指定します。
画像の擬似要素をHTML要素の前に表示する役割をするbeforeを[.test2::before]で指定します。
content:url("dog.jpg";でHTML要素の前に挿入する擬似要素の内容を犬の写真に指定します。

attr~属性指定してURLを表示する~

attrの属性指定

URLのリンクにアンカーリンクが設定されている場合、印刷時はURLの詳細が無くては困ります。そのような際にcontent プロパティを使うことによって印刷時にURLのリンクを表示することができます。@media printで印刷時の表示設定を行います。

HTML・CSSコード

<body>
  <p><a href="https://owl-view.com" >OWLVIEW</a></p>
</body>

<body>

<p><a href="https://owl-view.com" >OWLVIEW</a></p>

</body>

/*attr~属性を指定する~*/
@media print {
    a:after {
    content: " (" attr(href) ") ";
 }

/*attr~属性を指定する~*/

@media print {

a:after {

content: " (" attr(href) ") ";

}

HTMLファイルでは、<a href="URL名">ででリンク先としたいURLを指定します。<p>タグでアンカーリンクを設定します。
CSSファイルで印刷時の表示設定を行う@media print{}を記述します。
a::afterでHTML要素"OWLVIEW"の後にくる擬似要素を指定します。
content: " (" attr(href) ") ";で擬似要素の内容の属性をURLに指定します。

open-quote~開始引用符を表示~

open-quoteを指定

HTML・CSSコード

<body>
   <div class="test5">
     こんにちは。
   </div>
</body>

<body>

こんにちは。

</div>

</body>

/*文字の背景とコンテンツの範囲を指定*/
.test5{
	background-color:silver;
        padding:5px;
}
/* open-quote~開始引用符を指定~*/
.test5::before{
     　 position: relative;
        quotes:" ";
	content:open-quote;
	color:blue;
	font-size: 30px ;
	font-family: cursive; 
}

/*文字の背景とコンテンツの範囲を指定*/

.test5{

background-color:silver;

padding:5px;

}

/* open-quote~開始引用符を指定~*/

.test5::before{

　 position: relative;

quotes:" ";

content:open-quote;

color:blue;

font-size: 30px ;

font-family: cursive;

}

HTMLファイルでは、基本的な文章を<div>要素で挟んで書きます。class指定でtest3に指定します。今回文章は「こんにちは。」という文章を書きました。「こんにちは。」という文章の前に擬似要素として引用符を入れていきます。
cssファイルで、".test2"を指定し、コンテンツ部分を装飾します。
background-color:silver;でコンテンツの背景色をシルバーに指定します。
padding:5px;でコンテンツと枠線の間を5pxに指定します。
".test5::before"で擬似要素部分をcss編集していきます。
position:relative;で位置を移動する際の基準となる位置を元の位置を指定します。
content:open-quote;で開始引用符を指定します。
color:blue;で開始引用符の色を青に指定します。
font-size:30px;で開始引用符のサイズを30pxに指定します。
font-familiy:cursive;で筆記体系フォントに指定します。

close-quote~終始引用符を表示〜

close-quoteで終始引用符を指定

終始引用符を表示する際は、quotesプロパティを指定します。その際、quotes:"";だけでは終始引用符が表示されません。quoteプロパティで開始引用符'\201C'・終了引用符'\201D'を指定する必要があります。

HTML・CSSコード

<body> 
 <div class="test5">
   こんにちは。
  </div>
</body>

<body>

こんにちは。

</div>

</body>

.test6{
   background-color:silver;
   padding:5px;
   quotes: '\201C' '\201D';
}
.test6::before{
　　　　　position: relative;
	content:open-quote;
	color:blue;
	font-size: 30px ;
	font-family: cursive;
	}
.test6::after{
　　　　　position: relative;
	content:close-quote;
	color:blue;
	font-size: 30px ;
	font-family: cursive;
}

.test6{

background-color:silver;

padding:5px;

quotes: '\201C' '\201D';

}

.test6::before{

　　　　　position: relative;

content:open-quote;

color:blue;

font-size: 30px ;

font-family: cursive;

}

.test6::after{

　　　　　position: relative;

content:close-quote;

color:blue;

font-size: 30px ;

font-family: cursive;

}

classセレクタのtest6にQuotes:'\201C' '\201D';指定します。Quoteプロパティ番号を指定しています。
".test6::after"で擬似要素の終了引用符部分をcss編集していきます。
position:relative;で位置を移動する際の基準となる位置を元の位置を指定します。
content:close-quote;で終了引用符を指定します。
color:blue;で開始引用符の色を青に指定します。
font-size:30px;で開始引用符のサイズを30pxに指定します。
font-familiy:cursive;で筆記体系フォントに指定します。

Quoteプロパティ

Quoteプロパティで指定する必要があるプロパティ番号を表にしました。終了引用符が表示されないと行った場合は、Quoteプロパティでプロパティ番号が指定されていないといったことがあるかもしれません。そのような場合はQuoteプロパティで終了引用符のQuoteプロパティ番号を指定しましょう。

Webブラウザ表示	説明	Quote プロパティ番号
“	開始引用符(左Quote)	\201C
”	終了引用符(右Quote)	\201D
‘	シングル開始引用符(左シングルQuote)	\2018
’	シングル終了引用符(右シングルQuote)	\2019

Counter~順番をつける~

counterプロパティを指定してカウンタをつける

Counterプロパティを使うことによりHTML要素に連番をつけることができます。Counterプロパティを使用する際は、Counter-incrementで増減指定をします。beforeとContentプロパティを使って擬似要素としてHTML要素の前に連番を挿入します。

counterプロパティでは識別子として名前をつける必要があります。counterに識別子をつけることによって、識別子がついた物を一つのまとまりとしてみなします。今回は識別子として”chapter”という名前をつけます。ContentプロパティでCounter（chapter）を指定します。

HTML・CSSコード

<body>
  <h1>owlviewのサイトです。</h1>
  <h2>MarginとPadding</h2>
  <h2>Border</h2>
 <h2>Overflow</h2>
</body>

<body>

<h1>owlviewのサイトです。</h1>

<h2>MarginとPadding</h2>

<h2>Border</h2>

<h2>Overflow</h2>

</body>

h2{
  counter-increment: chapter;
}
h2::before {
  content: counter(chapter)'. ' ;
}

h2{

counter-increment: chapter;

}

h2::before {

content: counter(chapter)'. ' ;

}

HTML要素として<h2>タグを三つ挿入していきます。
CSSファイルでHTML要素h2を指定し、counterの値を1,2,3,と増減させる連番指定するcounter increment:chapterを指定します。chapterでなくnumberでも可。
CSSファイルでHTML要素h2を擬似用::beforeで指定し、contentプロパティを指定していきます。
counter(chapter)という指定をします。これによりcounterの識別子を"chapter"と指定を行い、一つのまとまりとみなします。
'.'ドットを指定します。連番の後に.ドットが入り見やすくなります。

Counter~"第○章"~

カウンタ”第”と”章”をつける

HTML・CSSコード

<body>
  <h1>owlviewのサイトです。</h1>
  <h2>MarginとPadding</h2>
  <h2>Border</h2>
 <h2>Overflow</h2>
</body>

<body>

<h1>owlviewのサイトです。</h1>

<h2>MarginとPadding</h2>

<h2>Border</h2>

<h2>Overflow</h2>

</body>

h2{
  counter-increment: chapter;
}
h2::before {
  content: "第"counter(chapter)”章”'. ' ;
}

h2{

counter-increment: chapter;

}

h2::before {

content: "第"counter(chapter)”章”'. ' ;

}

HTML要素として<h2>タグを三つ挿入していきます。
CSSファイルでHTML要素h2を指定し、counterの値を1,2,3,と増減させる連番指定するcounter increment:chapterを指定します。chapterはあくまでも識別子です。chapterでなくnumberなどでも適用できます。
CSSファイルでHTML要素h2を擬似用::beforeで指定し、contentプロパティを指定していきます。contentプロパティでは記述した順に擬似要素が挿入されていくので、まず”第”を指定します。その次にcounter(chapter)、”章”、'.'を指定します。

まとめ

content出来る事	cssコード
画像を表示	content:url(画像パス)
テキストを表示	content:"テキスト";
URLを表示	content: "URL ";
属性を指定する	content: attr(属性) ;
テキストに連番をつける	counter-increment: chapter; content: counter(chapter);

CSSのcontentプロパティの使い方

contentとは？

CSSの疑似要素って何？before・afterの使い方

contentできる事

設定できる値

テキストを表示

HTML・CSSコード

url~画像を表示~

HTML・CSSコード

attr~属性指定してURLを表示する~

HTML・CSSコード

open-quote~開始引用符を表示~

HTML・CSSコード

close-quote~終始引用符を表示〜

HTML・CSSコード

Quoteプロパティ

Counter~順番をつける~

HTML・CSSコード

Counter~"第○章"~

HTML・CSSコード

まとめ