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

擬似要素のbeforeとafterとは？

beforeとafterの説明

cssの擬似要素であるbeforeやafterを使う事によりHTML文書に直接書かなくてもコンテンツの前後に擬似コンテンツ(HTMLに書かれていない文字や写真や記号)を入れる事ができます。

CSSの擬似要素とは？

cssの擬似要素とはそもそもどのような意味があるのでしょうか。

擬似要素の意味

CSSの擬似要素・・・HTML内の<body>タグ、<h>タグ、<p>タグなどのように見えるが本物ではない要素です。HTML要素に見えるがHTML要素ではないCSSの要素です。

擬似・・・見た目が似ているけど本物ではないものの事。

要素(element)・・・HTMLの中で<body>タグ、<h>タグ、<p>タグにあたる部分の事。

before(指定した要素の前に擬似要素の追加)

cssの擬似要素beforeの説明

beforeを指定すればコンテンツの前に擬似コンテンツを挿入する事ができます。

つまり、HTML要素にCSSでbeforeを指定すると、指定したHTML要素の前に、見かけ上はHTML要素見えるcssで作成した要素が挿入されます。

beforeを指定する方法

after(指定した要素の後に擬似要素が追加)

cssの擬似要素afterの図解

afterを指定すればコンテンツの後に擬似コンテンツを挿入する事ができます。

つまり、HTML要素にCSSでbeforeを指定すると、指定したHTML要素の後ろに、見かけ上はHTML要素見えるcssで作成した要素が挿入されます。

afterで擬似要素を入れる方法

擬似要素を使う理由

どのような場合に擬似要素を使う必要があるのでしょうか。例えば、「HTMLを編集せずに要素を追加したい。」「ある要素の特定の部分に装飾を加えたい。」などの場合の時に擬似要素を使えばHTMLの文章構造を複雑にする事なく要素を付け加える事ができます。

メリット

HTML要素の特定の部分に装飾を加える事ができる
HTMLの構造が複雑にならずコンパクトにまとめる事ができる
SEO上のキーワードの強調をする事ができる

beforeとafterの書き方

beforeの書き方

css擬似要素のbefore・afterは基本的にcssファイルに記述します。

beforeとafterの基本的な書き方

before・afterの書き方

HTML要素::before{content:"挿入したい内容"}
HTML要素::after{content:"挿入したい内容"}

追記したいHTML要素を記述します。 (h,body,p,divなど)
コロン”：”を二つ記載します。
beforeまたはafterを記載します。
{content:"挿入したい内容"}を記載します。

HTML要素pタグにbeforeを使用

pタグ要素にcss擬似要素beforeを適用する

上記の外観はWebブラウザGoogleChromeでの表示画面です。”おはようございます”はHTML要素<p>要素です。おはようございます”の前に表示されている"♩"はcssの擬似要素beforeで挿入した要素となっています。

HTMLとCSSの記述

<body>
<p>おはようございます。</p>
</body>

<body>

<p>おはようございます。</p>

</body>

p::before{content:"♩"}

1	p::before{content:"♩"}

HTMLコードでは、<body>タグ内に<p>タグで”おはようございます。”と文字を表記しました。

CSSコードでは、HTML要素pタグに対してbeforeで挿入したい内容"♩"と記載しています。

コロン(:)の数はいくつ？

コロンの数はCSS2とCSS3で異なります。CSS3では擬似要素before・afterでの指定はコロン"::"二つ指定することになりました。CSS3はほとんどのwebブラウザで対応しているので問題ありません。CSS2では擬似要素before・afterでの指定はコロン":"一つでした。

beforeとafterの活用方法

beforeとafterを使用してどのように実用する事ができるのでしょうか。beforeとafterの使用例のコードと表示例を見ていきたいと思います。

1.文章を記号で囲む

擬似要素before・afterで見出しの前後に記号を入れる

”こんにちは”というテキストの前後に記号”◆”が表示されているのが分かります。

HTMLとCSSの記述

<body>
　<h1>こんにちは</h1>
</body>

<body>

　<h1>こんにちは</h1>

</body>

h1::before{content:"◆"}
h1::after{content:"◆"}

1 2	h1::before{content:"◆"} h1::after{content:"◆"}

htmlファイルに<body>タグ内にHTML要素<h1>タグで”こんにちは！”を記述します。
cssファイルにて、手前に記号を挿入したいHTML要素を”h1::berfore”で指定します。
{content:"◆"}に挿入したいコンテンツを記述します。
cssファイルにて、要素の後に記号コンテンツを挿入したいHTML要素を”h1::berfore”で指定します。
{content:"◆"}に挿入したい記号コンテンツを記述します。

2.見出しの下に英字を配置する

beforeを使用してcssの擬似要素を見出しの下に表示する

擬似要素afterを使用して見出しの下に英字を配置する方法についてご紹介します。上記の写真はWebブラウザの表示画面です。”見出しの作り方”は<h1>のHTML要素です。青文字で表示されている"~How to create headline?~"はcssの擬似要素となっています。

HTMLとCSSを記述

<body> 
<h1>見出しの作り方</h1> 
</body>

<body>

<h1>見出しの作り方</h1>

</body>

h1::after{
    content:"~How to create headline?~";
    font-size: 20px;
    color:blue;
    display: block;
}

h1::after{

content:"~How to create headline?~";

font-size: 20px;

color:blue;

display: block;

}

htmlファイルにHTML要素<h1>見出しタグで"見出しの作り方"を記述します。
style.cssファイルにてHTML<h1>タグに対しCSS擬似要素を後に入れる"::after"を記述します。
style.cssファイルにてcontent:"~How to create headline?~"でHTML要素の後に挿入するコンテンツを指定します。
font-size: 20pxは挿入するコンテンツ”~How to create headline?~"の文字のサイズを20pxに指定しています。
color:blue;は挿入するコンテンツ”~How to create headline?~"の文字の色を青に指定しています。
display: block;でブロックボックスを生成しHTML要素の下にブロックとして表示されるように指定しています。

3.ふきだしのデザイン

擬似要素beforeで吹き出しを作成

下に吹き出しの三角がくる吹き出しをデザインしていきます。

HTMLとCSSを記述

<body>
　 <h1>吹き出しを作るぞ。</h1>
</body>

<body>

　 <h1>吹き出しを作るぞ。</h1>

</body>

/*css装飾で吹き出し本体を作成する*/
h1{
	position:relative;
        background-color: #c0c0c0;
	padding: 20px;
}

/*beforeで三角部分を作成*/
h1::after{
	content:"";
	display:block;
	position:absolute;
	left:20px;
	bottom:-15px;
	border-top: 15px solid #c0c0c0;
	border-right:15px solid transparent;
	border-left:15px solid transparent;
}

/*css装飾で吹き出し本体を作成する*/

h1{

position:relative;

background-color: #c0c0c0;

padding: 20px;

}

/*beforeで三角部分を作成*/

h1::after{

content:"";

display:block;

position:absolute;

left:20px;

bottom:-15px;

border-top: 15px solid #c0c0c0;

border-right:15px solid transparent;

border-left:15px solid transparent;

}

吹き出しを作る際には、吹き出しの本体部分と吹き出しの三角部分の二つに分けて作成していきます。

吹き出しの本体部分は以下のような手順で作成します。

position:relative;は要素の位置を指定するpositionプロパティでrelative[相対的]に指定します。relative[相対的]を指定することにより、移動する際に元いた場所を基準として移動します。
background-color: #c0c0c0;で背景色をシルバーに指定します。
padding:20px;でコンテンツと枠線との間の間隔を20pxに指定しています。

吹き出しの下の三角部分を以下のような手順で作成を行います。

content:"";は挿入するコンテンツを空白に指定します。
display: block;でブロックボックスを生成しHTML要素の下にブロックとして表示されるように指定しています。
position:absolute;は要素の位置を指定するpositionプロパティでabsolute[親要素]に指定します。移動する際に基準を親要素、ウィンドウとします。
left:20px;で三角の位置を調整します。ウィンドウの左端から20pxに指定います。
bottom:-15px;で三角の上下の位置を調整します。h1要素の下枠線を基準としているので-15pxを指定することにより三角を表示させることができます。
border-top: 15px solid #c0c0c0;で三角形を作成するための要素を作成します。
border-right:15px solid transparent;で三角形を作成するための要素を作成します。
border-left:15px solid transparent;で三角形を作成するための要素を作成します。

4.疑似要素で画像を表示する

beforeで画像を挿入する

beforeで擬似要素の画像をHTML要素の前に表示しました。”画像を表示します。”というh1見出しの前に画像が挿入されているのがわかります。実際にコードの中身を見てみましょう。

HTMLとCSSを記述

<body>
  <h1>画像を表示します。</h1>
</body>

<body>

<h1>画像を表示します。</h1>

</body>

h1:before{
	content:"";
	display: inline-block;
	width: 70px;
	height: 70px;
	background-image:url(OWLVIEW250.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: top;
}

h1:before{

content:"";

display: inline-block;

width: 70px;

height: 70px;

background-image:url(OWLVIEW250.png);

background-repeat: no-repeat;

background-size: contain;

vertical-align: top;

}

content:" ";は挿入するコンテンツを空白に指定します。
display: inline-block;でブロックボックスを生成しインライン要素としています。
width:70px;で画像の横幅を調整します。
height:70px;で画像の縦幅を調整します。
background-image;で表示したい画像の指定をします。ここでは当サイトのロゴを表示しています。
background-repeat: no-repeat;で画像を連続しないように指定しています。
background-size:contain;で背景画像のサイズを背景領域に収まる最大サイズで指定します。
vertical-align: top;で縦方向の揃え位置を特定します。