疑似要素afterやbefore
擬似要素とは、HTMLの要素を擬似的にCSSで設定できるもので
HTMLコードを汚すことなく様々な表現ができるので大変に便利です。
また検索エンジンは疑似要素をコンテンツの中身として見ませんからSEOを気にせずタイトル名がつけられたりします。
キーワードにこだわらなくても良いので要素の装飾などユーザーサイドにたった幅広い表現をすることができます。
今回はそんな中でもよく使われる疑似要素afterやbeforeについてまとめてみました。
afterやbefore使い方
例えば以下のようにh1タグで囲まれた要素があるとします。
<h1>セキセイインコは可愛いな その選び方と飼い方</h1>
これにCSSを使ってafterやbeforeの働きを見てみます。
HTMLに書き込まずCSSに書き込むのでHTMLの記述は実にシンプル。
CSSの書き方は
セレクタ｛
プロパティ：値
｝
でしたね。
ちなみにafterやbeforeの書き方ですが。
例えばpタグで囲まれた要素の前や後にコンテンツを置きたい場合には
指定するタグや名前に
::before
::after
または
:before
:after
を付け加えます。
例えば以下のようなフォ－マットに必要事項を書き入れます。
<h1>タグであれば
h1::before {
content:’内容’
}
となり
h1::before がセレクタ、プロパティはcontent：でその後ろに’（アポストロフィー）で囲み、そこに値（ここではコンテンツ）を書きます。
<p>タグで後ろに内容を付け加えたいのであれば
p::after{
content:’内容’
}
などと記述します。
なお（セレクタと擬似要素指定の間は:(コロン)が１つか2つ付きます。
CSS3ではコロンが2つになりますがそれ以前のバージョンCSS2 などではコロンが１つです。
CSS3のほうが最新ですが。
CSS2やそれ以下のバージョンもまだ広く使われていますのでとりあえずはコロンを一個にしておいたほうが良いかもしれません。
ちなみにCSSの書き方は
セレクタ｛
プロパティ：値
｝
でしたね。
試しに
<h1>セキエイインコは可愛いなああ</h1>
の前と後ろに^^;を付けてみます７．
CSSに以下のように記述します。
@charset "UTF-8";
h1:before{
content: '^^;';
color: red
}
h1:after{
content: '^^;';
color: red;
}
h1タグの前に赤色で^^;をつける。
同じ様に後ろに赤色で^^;をつける。
ということにしました。
するとブラウザに以下のように表示されます。
またキーワード的には意味不明でも目立つように英語なんか入れてみたいというような場合。
afterやbeforeを使うとキーワードを気にせずに格好をつけることができます^^;
例を上げてみます。
上に表示させたいのでbeforeを使います。
また色を赤にし。
フォントサイズを２倍にしました。
ちなみに単位をemにしてあります。
復習をしておくと。デフォルトで16pxのとき1emですが。
emは絶対値でなく画面が違ったりしても柔軟位大きさを伸縮することができます。
また改行するようにdisplay: blockを書き込んでいます。
更に真ん中に整列するように
h1タグの方に
h1{text-align:center;
と記述しました。
全体のCSSは以下。
h1:before {
content:'happy parrot';
color: red;
font-size: 2em;
display: block;
}
h1{text-align:center;
}
すると以下のブラウザ表示されます。
同じCSSでbeforeをafterに変えた場合は以下のようになります。
やり方がわかったところで今度は画像を上に貼り付けてみます。
画像を入れる
content: url(画像のパス）;
という形で記述をします。
CSSを以下のように記述してみました。
前後に開業するために display: block;を入れておきます。
またtext-align:center;を記述し、中央に寄せてみます。
h1:before {
content: url(https://maliajoy.com/wp-content/uploads/
2019/05/2fe36fdb7c1d5f4d0ff10f0727043bf9.jpg);
display: block;
}
h1{text-align:center;
}
するとブラウザ表示では以下のようになりました。
position:absoluteを使う
before/afterでposition: absoluteをつかって絶対配置にするのもありですね。
つまり重ね合わせるやり方です。
この場合、疑似要素を使わなくてもできますが。
疑似要素を使わない場合
その場合例えば
htmlでは。
親要素divタグに名前をつけ。
画像を記述し。
次に絶対配置をしたいｐタグにも名前をつけます。
<div class="parent">
<<img src="インコ３().jpg" alt="インコ">
<p class="absolute">慣れてくるともっとかわいいよ</p>
そのうえでcssは
親要素のポジションをposition:relative;とし
背景を緑とし。
幅500px,高さを2000pxにしました。
.parent{
position:relative;
background: green;
width: 500px;
height:2000px;
}
.absolute{
position: absolute;
top: 0;
left: 0;
background: skyblue;
width: 300px;
height:85px;
font-size: 2em
}
すると以下のようにブラウザ表示されました。
疑似要素を使ってposition: absoluteを記述
今度は
画像ではなくて「インコは可愛い」をpタグを使ってHTMLに記述をし。
さらに擬似要素を使って「慣れてくるともっとかわいいよ」絶対位置で書いてみます。
ちなみに疑似要素を使わない場合には親要素にposition:relative;と指定してあげないといけなかったんですが。
before/afterを使うとその必要がなくなります。
なのでHTMLは実にシンプルです。
<p>
インコは可愛いよ
</p>
CSSでは。
pタグの設定で
疑似要素を絶対位置に置くためにposition: relative;を記述し。
内側に余白を入れ。
背景を赤。幅300px高さ500pxとしました。
また文字は2倍の大きさに設定しました。
p{
position: relative;
padding: 1em;
background: red;
width: 300px; height:500px;
font-size: 2em
更に疑似要素 p:beforeに。
position: absolute;をまず記述し。
次にコンテンツを「慣れてくるともっとかわいいよと書き入れます。
それと今回は下と左端を絶対位置にするために
bottom: 0; left: 0;としました。
幅・高さは200px正方形とし。
文字の色を白にし。
背景は緑。
すべてのCSSは以下。
p {
position: relative;
padding: 1em;
background: red;
width: 300px;
height:500px;
font-size: 2em
}
p:before{
position: absolute;
content: '慣れてくるともっとかわいいよ;';
bottom: 0;
left: 0;
color: white;
padding: 1em;
background: green;
width: 200px;
height:300px;
}
すると以下のようにブラウザ表示されます。
この様に疑似要素を使うとTHMLもCSSもシンプルになります^^;
疑似要素でテキストの前に画像を表示
CSSに記述をするだけで画像を表示することもできます。
HTMLにはこれだけ。
<h1>
インコは可愛いよ
</h1>
CSSには以下のように記述をしました。
h1:before{
content: url("インコ３().jpg");
display: block;
}
疑似要素で画像を表示するには
content: url(“画像パス”);
で記述をします。IRLのあとは（””）とカッコで囲んだ中にさらにクオーテーションマークで囲みその中に画像の場所を指定します。
文字の場合は
content:’コンテンツ’とアポストロフィーでコンテンツを囲目ばいいだけですが。
画像のパスを入れるときにはカッコとクオーテーションマークを使えないといけないので付け忘れに注意したいものです。
なお
display: block;
を入れますが。
それは入れないと文字が横に回り込むので。
画像と文字を縦に並べるために記述をしたものです。
ブラウザ表示は以下。
なお疑似要素内にCSSに記述した画像ですが。
疑似要素では画像サイズを変えることができません。
width:◯◯pxとかheight:◯◯pxと書いても変更することはできませんので注意が必要です。
最初から画像をウエブ上にある無料画像編集ソフトなどで（おすすめはこれ）リサイズしておけばいいので。
問題はないと思いますが。
疑似要素自体は大きさを変えられますから
画像を背景として使えば大きさは変えられます。
疑似要素の背景画像の大きさを変えることで画像の大きさを変える
先ほどと同じHTML
<h1>
インコは可愛いよ
</h1>
CSSを以下のように変更します。
h1:before{
content: '慣れるともっとかわいい';
color:white
display: inline-block;
width:400px;
height: 400px;
background-image:url("インコ３().jpg");
background-size:contain;
vertical-align:middle;
}
content: ‘慣れるともっとかわいい’;
疑似要素に入るコンテンツを指定します。
今回は画像を背景に入れますので。
何も入れない場合は’’を空にします。
今回はテキストを入れたので、ついでに文字の色を白くしました。
color:white
display: inline-block;
疑似要素の高さと幅を指定するためにはそれができない初期値inlineではなく
blockかinline-blockにします。
今回の記述ではinline-blockにしましたが。
そうすると文字が横に流れます。
background-size:contain;
背景画像の値をcontainにすると画像の縦横比を維持した状態で広がります。
vertical-align:middle;
要素と画像を横並びさせる際、これを指定しておくときれいに並べることができます。
ブラウザ表示は以下。
アイコンフォントーFont AwesomeをCSSの疑似要素で使う方法
HTMLを使ったアイコンの使い方については以下など。
Font Awesomeで指定したアイコンを表示させるためには一般的にHTMLに例えば以下のように
<p><i class="fab fa-adn fa-5x "></i>インコは可愛い</p>
アイコンコードを貼り付けます。
すると
インコは可愛い
とアイコンが表示されます。
<i class=”fab fa-adn”></i>はHTMLコードで、
このページで選んだアイコンのページの一番上にあリます。
これを貼り付けただけでブラウザ上にアイコンを表示させることができます。
ただしfont Awesomeを使う場合はアイコンの場所を呼び出すためにheadタグ内に以下のリンクを張っておかなくてはなりません。
（または自分のサーバー上にダウンロードしておきます。）
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
詳しい説明は上記記事などをご覧ください。
もちろん疑似要素を使ってCSSに書き込むこともできます。
今回は疑似要素を使ってやってみますが。
その前に。アイコンコードの場所ですが。
font Awesomeでフォントを選ぶと上の方に以下のようなものが出ています。
右側にあるのがアイコンのHTMLコードで。
これをコピペして貼っていくことでアイコンを表示させることができます。
左にあるのがユニコードと言って。
そのアイコンに割り当てられた番号です。
HTMLではHTMLコードを貼り付けますが。
CSSではこのユニコードを使ってアイコンを指定していきます。
ユニコードとは？
コンピューターは数字でしか理解できませんので。
数値と文字との対応表が必要ですが。
ユニコードはアイコンに割り当てられた番号と「実際にコンピュータさんが扱う数字」の対応表の一つです。
なのでCSSでそのアイコンのユニコードを記述することでそのアイコンがどんなものなのかをコンピューターに理解させます。
疑似要素before/afterを使ってアイコンを表示させるには
CSSを使う場合、HTMLだけで表記する場合に比べると少し面倒です。
例えば以下のようにHTMLを記述します。
<h1>インコは可愛い</h1>
この見出し1タグの前にアイコンを付けるとして疑似要素を使ってCSSに書き込む場合。
例えば以下のように記述をします。
h1:before {
font-family:"Font Awesome 5 Brands";
content: '\f170';
color: red;
font-weight: 900;
}
CSSの記述について説明をします。
まず表示するのが最新のFont Awesome５のアイコンですので
その様にフォントファミリーを指定します。
font-family:”Font Awesome 5 Brands”;
これはFont Awesome 5 のアイコンを使っていてそのアイコンはブランド系だよ、という意味です。
中の値はクオーテーション‐マーク””で囲みます。そして最後にセミコロン；を付けます。
値の一番後ろについている Brandsですが。
これは企業のロゴなどブランド系のアイコンであることを意味しています。
爆弾とか、チェックマークなどブランド系でない場合はFreeと記述をします。
Freeと記述してもアイコンが表示されない場合は、加えたいアイコンがブランド系のアイコンである場合が考えられますので。
差し替える必要があります。
見分け方としては。ブランド系のアイコンのHTMLコードでは一番最初がfabとなっています。ブランド系でないものはfasになっています。
<i class=”fab fa-adn”></i>（ブランド家）
<i class=”fas fa-arrow-up”></i>（そうでないもの）
それで区別をしてください。
まあ左端にBrand stayleと書かれているのでそれで見ればいいだけなんですが^^;
また
content:
ですが。アイコンの指定にはユニコードを使います。
content: '\f170';
アポストロフィー’’で囲んだ中の一番前にバックスラッシュ
\
が付きます。
contentプロパティの値であるアイコンはバックスラッシュ＋ユニコードをアポストロフィーで囲むことで指定します。
font-weight: 900;
font-weightプロパティは、フォントの太さを指定する際に使用します。400が標準の太さです。
Font Awesome５のアイコンを使用する場合にはこれを指定する必要があると言われています。
入れなくてもほとんどのアイコンは表示されますが一部アイコンはそのようにしないと表示されないとのことです。
なので一応記述することが推奨されています。
solidタイプ（塗りつぶし系）のアイコンでで900、
regularタイプ（アウトライン系）のアイコンで400程度の値が適当と言われています。
あと、色を赤でつけてみました。
color: red;
以上CSSの記述に関する説明でした。
すると以下のようにブラウザ表示されます。
これをブランド系でないアイコンにしてみます。
爆弾アイコンの場合はclassが
<i class=”fas fa-bomb”></i>と
fasとなっていますからブランド系アイコンではないことがわかります。
その場合はfont-familyの一番最後をFreeと記述します。
h1:before {
font-family:"Font Awesome 5 Free";
content: '\f1e2';
color: red;
font-weight: 900;
}
すると以下のようにブラウザ表示されます。
リストデザインに活用
アイコンをリストデザインに活用すると見栄えがよくなります。
以下のリストの例でやってみます。
ulとli（番号なし）またはolとli（番号あり）がありますがやることは少し違います。
リストの復習も兼ねて少し詳しくやってみます。
ulとli（番号なし）
まずulとli（番号なし）で記述をしてみます。
<h1>日本で飼われているインコって？<h1> <ul> <li>セキセイインコL</li> <li>ボタンインコ</li> <li>オカメインコ</li> <li>コザクラインコ</li> </ul>
ブラウザ表示は以下。
味も素っ気もないですね^^;
アイコンを使うためにやることとしては。
まずデフォルトで出てくるこの黒丸を消します。
消すためには以下のHTMLを書き加えるんでした。
list-style-type: none!important;
またそれやアイコンを記述する場所を作るためにli:beforeというliの擬似要素を作ります。
またpositionプロパティを使ってアイコンの位置を調整します。
詳しい使い方は以下など。
h1タグの部分だけCSSの記述は以下。
h1:before {
font-family: "Font Awesome 5 Free";
content:'\f520';
color: pink;
background: skyblue;
}
さきほど詳しく説明したようにアイコン指定をするにはcontentプロパティにはアイコンのユニコードを使います。
カラスのアイコンにしてみました。
そして今回は色はピンク、背景を水色にしてみました。
すると以下のようになります。
ピンクの鳥のアイコンが見出しに付きました。
次にリストに対するCSSを書き込みますが。
この場合ulタグが親要素になります。
そこに全体の装飾やpositionを指定します。
親要素にポジションを指定しておかないと小要素のpositionが効かなくなるんでしたね。
なので子要素である疑似要素でposition：absoliteを使うため、position: relative;を加えます。
親要素のみのCSS記述。
ul {
border: dotted 5px red;
padding: 2em;
position: relative;
olor: gold;
position: relative;
}
まず外枠の設定をしました。
{border: ボーダースタイル 太さ 枠の色;}
などと書くのが一般的です。
今回は破線の枠で太さは5px、色は赤にしました。
内側に余白を2emとし。何もしなければ左側にピッタリとくっついてしまうのを少し離しました。
positionをrelativeに指定しました。
positionについてはこれだけではブラウザ表示には現れませんが。
小要素のposition設定を有効にします。
また背景を銀色にし。文字を金色にしてみました。
親要素のみを変更した場合のブラウザ表示は以下。
子要素liの記述
リスト間の高さを調整し、絶対位置からの位置を調整。区切り線を付けて区別をしやすくすることと。丸の部分を無くします。
ul li {
line-height: 1.5;
padding: 0.5em 0 0.5em 2em;
border-bottom: solid 2px red;
list-style-type: none!important;
}
line-heightプロパティは行の高さを指定するプロパティ
paddingプロパティは、上下左右の余白の幅を指定します。
値が一個だと上下左右の余白の幅をそれで指定できますが。
それぞれの幅を値を増やすことで上下左右それぞれの幅を指定することができます。
今回は上下左右の数値をすべて変えてみました。
border-bottomはアンダーラインで、タイプはsolid(線)・色を赤にしてみました。
またlist-style-type: none!important;を記述することでデフォルト設定の黒丸を消します。
その上で丸があった部分にアイコンを配置するために擬似要素を使います。
ul li:before {
font-family: "Font Awesome 5 Free";
content: '\f520';
position: absolute;
left: 1em;
color: yellow;
background: red;
}
疑似要素beforeの記述
については今回詳しく書いてありますので詳細は省きますが。
ul li:before {
font-family: “Font Awesome 5 Free”;
content: ‘\f520’;
position: absolute;
left: 1em;
color: yellow;
background: red; }
position: absolute;
left: 1em;
だけ。
左端からのアイコンまで1emだけ間を空けました。
疑似要素last-of-type
ul li:last-of-type {
border-bottom: none;
}
疑似要素
last-of-type
は途中で別の種類の要素が入る場合にはそれを数えずに、 指定した種類の要素のみを数えて。
最後に来る要素に指定したスタイルを適用の対象するというものです。
つまり最後の要素だけこうしなさいと指定するもので。
アンダーラインは最後のリストには不要ですので。
入れないように指定しました。
全体として以下のようなCSS記述となります。
ul {
border: dotted 5px red;
background: silver;
padding: 2em;
}
ul li {
line-height: 1.5;
padding: 0.5em 0 0.5em 2em;
border-bottom: groove 2px red;
list-style-type: none!important;
}
ul li:before {
font-family: "Font Awesome 5 Free";
content: '\f520';
position: absolute;
left: 1em;
color: yellow;
background: red;
}
ul li:last-of-type {
border-bottom: none;
}
ブラウザ表示は以下のようになります。
終わりに
疑似要素が使えるようになると表現の幅が広がりますね。
ただアポストロフィーだとか、コロンだとかバックスラッシュだとかクオーテーション‐マークだとか。
ちょとでも間違えるとブラウザ表示されませんので。
慣れるまで大変です。
それと目に見えないもので重要なのが半角スペースですね。
全角にしてしまってたりするとうまく行かなくてどこが間違っているんだろうなどと悩んだことが私にはありました。
今回最後にlast-of-type という疑似要素について少し触れましたが。
擬似要素には他にも様々なものがあります。
これらについてはまた別記事で解説をしていきます。
この記事へのコメントはありません。