【CSS】擬似要素の使い方について
このまま学習を続けて、本当に実務で通用するのか不安な方へ。
そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
擬似要素の使い方について解説していきます。
特に「::before」と「::after」は仕事でもよく使うので、しっかりと学習していきましょう！
目次
1. 擬似要素とは？
擬似要素（ぎじようそ）とは、CSSにおいて特定の要素の一部や特定の状態をスタイル付けすることができる機能です。
擬似要素はセレクタに対して、「::擬似要素名」を指定することで使用します。
主な擬似要素は以下の通りです。
- ::before: 要素の内容の前にコンテンツを挿入するために使用します。
- ::after: 要素の内容の後にコンテンツを挿入するために使用します。
- ::first-line: 要素内の最初の行にスタイルを適用します。
- ::first-letter: 要素内の最初の文字にスタイルを適用します。
今回は、擬似要素の中でも特によく使用する「::before」と「::after」について詳しく解説していきます。
2. ::before
「::before」を使用することで、要素の直前にコンテンツを追加できます。その際、必ず「content」プロパティの設定が必要になります。「content」プロパティに設定する値は下記の通りです。
| 表示の種類 | 設定例 | 備考 |
|---|---|---|
| テキスト | content=”・”; | 追加するテキストを設定します。 |
| 画像 | content=”../img/icon.png”; | 追加する画像のパスを設定します。 |
| その他 | content=””; | 値は設定せず空の状態にします。 |
それぞれの使用例についてご紹介します。
テキストを追加する場合
「Webデザイン」というHTMLテキストの直前に「・」を追加します。
■HTML
<p class=”sample”>Webデザイン</p>
■CSS
.sample::before {
content: “・”;
}
■表示
画像を追加する場合
「お問い合わせはこちら」というHTMLテキストの直前にアイコン画像を追加します。
■HTML
<p class=”sample”>お問い合わせはこちら</p>
■CSS
.sample::before {
content: “../img/icon.png”;
}
■表示
スタイルを追加する場合
「詳細を見る」というボタンの右端に黒いラインを引きます。
■HTML
<a class=”sample” href=””>詳細を見る</a>
■CSS
.sample::before {
content: “”;
width: 40px;
height: 1px;
background-color: #000;
position: absolute;
top: 20px;
right: -20px;
}
■表示
3. ::after
「::after」を使用することで、要素の直後にコンテンツを追加できます。その際、「::before」と同じく必ず「content」プロパティの設定が必要になります。
また、「::before」と「::after」は同時に使うことができます。
使用方法については、「::before」と同様です。
4. まとめ
実務でよく使用する、擬似要素「::before」と「::after」の使い方について解説してきました。
「::before」と「::after」は、要素の内容の前後にコンテンツを挿入できる便利な機能です。
コーディングを行う際にはうまく活用していきましょう！
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
