擬似要素について
HTMLとCSSでコーディングをいていて、beforeやafter、hoverなどの擬似要素を使う機会が最近よくあったので、それについて書いていきます。
擬似要素とは
cssで擬似要素を使うと、あたかもhtmlを追加したかのように見せることができます。
例えば、
こんなh1要素があったとしましょう。
cssで
h1::before {
content: "いつか";
}
こんな記述を加えると
このように文字が加わります。
h1::after {
content: "、3年以内には";
}
先ほどはbeforeでしたが、afterにすると
h1要素の後に文字が加わります
具体的な活用例
先ほど取り上げた擬似要素の活用例をみていきます。
横棒を追加する
擬似要素を使えば、こんな横棒を追加することが出来ます。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>パリに行ってみたい</h1>
</body>
</html>
CSS
h1 {
color: #59A592;
display: flex;
align-items: center;
}
h1:before {
border-top: 1px solid;
content: "";
flex-grow: 0.04;
margin-right: 1rem;
}
h1 {
display: flex;
align-items: center;
}
この2つを要素に指定することで、
要素の前の棒線が、このように上下中央に揃います。
h1:before {
border-top: 1px solid;
content: "";
flex-grow: 0.04;
margin-right: 1rem;
}
棒線は、中身が空のcontentにborder-topが適応されていることによって成り立っています。
flex-grow: 0.04;
ここを調節すると線の長さが伸びます。
flex-grow・・・0.04
flex-grow・・・1
margin-right: 1rem;
これは、擬似要素と要素の間隔を表しています。
emは、文字の大きさ(font-size)を1とした大きさの割合です。
font-sizeが16pxの場合は、1remは16pxとなります。
画像やコードのタイトルをうっすらと表示させる
こんな感じの画面を作ることが出来ます。
これは、このようなHTMLと
<div class="img"><img src="スタバ.png"></div>
このようなCSSによって構成されています。
.img {
position: relative;
}
img {
width: 30%;
}
.img:before {
position: absolute;
top: 5px;
left: 6px;
color: #fff;
background-color: rgba(0,0,0,0.9);
content: "Starbacks";
}
.img {
position: relative;
}
一番外側のdiv要素のクラスであるimgを基準位置として
.img:before {
position: absolute;
top: 5px;
left: 6px;
color: #fff;
background-color: rgba(0,0,0,0.9);
content: "Starbacks";
}
タイトルの位置を調整しています。
アイコンを表示させる
擬似要素を使ってこんなアイコンを表示させることが出来ます。
Font Awesomeを使用しています。
FontAwesomeについては、以前こちらの記事に書きました。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>要チェック！</h1>
</body>
</html>
CSS
h1:before {
font-family: FontAwesome;
content: '\f00c';
padding-right: 5px;
color: rgba(255,204,204,1)
}
content: '\f00c';
これは、FontAwesomeの公式ページにある
このユニコードをコピペしました。
バックシュラッシュ( \ )は、Macの場合、option + ¥ によって生成されます。
コメントボックスを作る
Lineなどのチャットアプリで使えそうな、このようなコメントボックスを作ることも出来ます。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="good-morning">おはよう!</h1>
</body>
</html>
CSS
.good-morning {
position: relative;
background-color: rgba(0,0,0,0.1);
width: 300px;
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
}
.good-morning::before {
position: absolute;
content: '';
border-top: 20px solid rgba(0,0,0,0.1);
border-right: 20px solid transparent;
border-left: 20px solid transparent;
top: 100%;
left: 50%;
transform: translate(-50%);
}
.good-morning {
position: relative;
background-color: rgba(0,0,0,0.1);
width: 300px;
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
}
このコードのみだと
こうなります。
これに、擬似要素を付け加えていきます。
.good-morning::before {
position: absolute;
content: '';
border-top: 20px solid rgba(0,0,0,0.1);
border-right: 20px solid transparent;
border-left: 20px solid transparent;
top: 100%;
left: 50%;
transform: translate(-50%);
}
position: absolute;
top: 100%;
left: 50%;
ここでは位置調整をしています。
しかし、
このように、三角形が少しずれてしまうため(中心にこないため)
transform: translate(-50%);
を用いて調整します。
三角形は、この3行で作っています。
border-top: 20px solid rgba(0,0,0,0.1);
border-right: 20px solid transparent;
border-left: 20px solid transparent;
transparentは透明という意味ですが、試しに色を付けてみると
border-top: 20px solid rgba(0,0,0,0.1);
border-right: 20px solid rgba(0,0,0,0.5);
border-left: 20px solid rgba(0,0,0,0.9);
こうなります。
よって、
border-right: 20px solid rgba(0,0,0,0.5);
border-left: 20px solid rgba(0,0,0,0.9);
右と左のボーダーの色を透明にすることで、コメントボックスの三角形を作ることが出来ます。
しかし、なぜ三角形ができあがるのでしょうか？
試しに、こんなボックスを作ってみます。
HTML
<div class="box"></div>
CSS
.box {
height: 100px;
width: 100px;
border-top: 20px solid rgba(0,0,0,0.2);
border-right: 20px solid rgba(0,0,0,0.5);
border-left: 20px solid rgba(0,0,0,0.9);
border-bottom: 20px solid rgba(0,0,0,0.7);
}
そして、
width: 0;
このように幅を0にしてみると・・・
こうなります。
三角形が出来ました。
さらに高さを0にすると
height: 0;
こうなります。
そして、border-bottomを無くすと
border-bottom: 20px solid rgba(0,0,0,0.7);
先ほどの図形が出来上がります。
左右のボーダーを透明にすることで、
border-right: 20px solid transparent;
border-left: 20px solid transparent;
上手いこと下向きの三角形が出来上がりました。
参考にしたサイト
サルワカ (https://saruwakakun.com/html-css/basic/before-after)
株式会社アテンド (https://www.attend.jp/desine_170220)
