CSSの擬似要素を使って画像や線を作成する方法！擬似クラスとの違いも解説
「CSSの擬似要素を使って画像を配置する方法について知りたい。」
「擬似要素の使い方がいまいち分からない」
上記のような疑問を抱えていて、この記事にたどり着いた方もいるのではないでしょうか？
擬似要素を使って新しく要素を作る方法は独特なので、使い方に迷ってしまいますよね。
今回WEBCAMP MEDIAでは、CSSの擬似要素を使って画像や線を作成する方法について解説します。
- 擬似要素について
- 擬似要素一覧
- 画像を指定する方法
- 線を引く方法
- 三角形を作成する方法
以上の項目について解説します。
この記事を読むことで、擬似要素の種類と使い方について理解できるので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
擬似要素とは
擬似要素とは、セレクタで指定したHTML要素の一部分にスタイルを反映できます。
たとえば、pタグで「おはよう」という文を表示している場合、擬似要素を使うことで文中の1文字だけにCSSを指定できるのです。
擬似要素で有名なのが「::before」や「::after」が挙げられます。
擬似要素と擬似クラスの違い
擬似要素が一部分のみスタイルを反映するのに対して、擬似クラスは指定した要素全体にCSSを反映します。
擬似クラスには、マウスオーバーしたときの処理を行うhoverや、複数の要素を指定できるnth-childが挙げられます。
また、擬似要素を使うときは要素の前にコロンを二つ「::」入力し、擬似クラスにはコロンをひとつ「:」入力します。
以上の理由から、指定する要素の範囲と入力するコロンの数で擬似要素と擬似クラスを見分けることができます。
CSSで利用できる主な擬似要素一覧
CSSで主に利用される擬似要素は下記の4つです。
- ::before：指定したHTML要素の前に新たな要素を作成できる
- ::after：指定したHTML要素の前に新たな要素を作成できる
- ::first-letter：HTML要素の最初の文字にスタイルを指定する
- ::first-line：指定した要素に入力されている文章中の最初の行にスタイルを指定する
上記の中でも「::before」や「::after」は、Webサイトのタイトル横にアイコンとして使用したり、サブタイトルを入力するときに利用されます。
擬似要素を使って画像を指定する方
擬似要素に画像を表示させる方法は、contentプロパティとbackground-imageプロパティを使う方法の2通りあります。
contentプロパティで指定すると画像のサイズを変更できないので、サイズを変えたい場合はbackground-imageプロパティを利用しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
p::before {
content: '';
background-image: url(./test.png);
width: 30px;
height:30px;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<p>beforeを使って左に画像を入力する</p>
</body>
</html>display:inline-blockで横幅と縦幅を指定できる擬似要素を表示しています。
vertical-align: middleを使うと、pタグの文字の中心と同じ高さに画像を設定できます。
擬似要素で線を引く方法
CSSのborderを使うことでHTML要素に線を引くことができますが、要素のサイズに依存してしまうというデメリットが存在します。
擬似要素を使うことで、要素に依存せず自在に場所やサイズを指定できます。
今回は、擬似要素で下線を引く方法をサンプルコードを用いて解説します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
h2{
position:relative;
}
h2::after{
content:"";
position:absolute;
bottom:0;
left:0;
display:block;
width:190px;
height:3px;
background-color:skyblue;
}
</style>
</head>
<body>
<h2>下線を引くテスト</h2>
</body>
</html>h2タグにposition:relativeを使って、擬似要素の起点になる位置を指定します。
擬似要素にposition:absoluteを指定し、bottomとleftを0にすることでh2タグの左下に要素を配置できます。また、下線のサイズはwidthとheightで指定可能です。
CSSの擬似要素で三角形を装飾する方法
擬似要素に追加したCSSプロパティの使い方を工夫することで、タイトル横のアイコンを作成できます。
HTML要素の横に左向きの三角形を作成する方法を例に、アイコンの作り方を解説します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
p{
position: relative;
padding-left: 10px;
}
p::before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
border: 5px solid transparent;
border-left: 8px solid #555;
}
</style>
</head>
<body>
<p>下線を引くテスト</p>
</body>
</html>擬似要素に指定しているposition: absoluteは、position:relativeを起点に浮いている状態です。
なので、擬似要素を追加するpタグの左にpadding-leftを指定してアイコン用の空白を作っています。
三角形を作るには、borderで矢印の縦サイズを指定してtransparentで透明にします。そのあと、border-leftで矢印の横幅のサイズと色を指定することで右向きの矢印を作成できます。
まとめ
今回は、CSSの擬似要素を使って画像や線を作成する方法について解説しましたが、いかがでしたでしょうか？
擬似要素は、CSSを使って擬似的な要素を作成する方法です。
擬似要素の中でも、HTML要素の前後に新たにコンテンツを配置するbeforeとafterがよく利用されています。
擬似要素を使うことで、Webサイトをよりおしゃれにデザインできるので、この記事をきっかけにぜひ試してみてくださいね！
