ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】擬似要素を作成するbefore/afterの使い方を解説

【CSS】擬似要素を作成するbefore/afterの使い方を解説

HTML/CSS

2022/09/08

2024/06/03

CSS before after記事サムネイル

擬似要素は、高度なスタイリングを行うときに効果的な手法です。例えばテキストとテキストを重ねたり、背景を斜めにカットしたりなど、リッチなWebデザインの実装を効率よく行えます。

擬似要素には多くの種類がありますが、その中でもよく使用される擬似要素はbeforeとafterです。

この記事では、疑似要素beforeとafterの使い方を解説します。擬似要素を使いこなして、おしゃれなWebサイトを作成できるようになりましょう。

この記事で身につく内容
  • 疑似要素before/afterとは
  • before/afterの使い方
  • before/afterの違い
  • before/afterの実装例
  • before/after以外の擬似要素

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

before/afterとは

beforeとafterは、要素の前後に擬似要素を作成する指定方法です。

擬似要素とは、簡単に言えば「仮の要素」のことです。HTMLに記述せず、CSSで擬似的に作成される要素であるため、「擬似要素」と呼ばれています。

擬似要素はHTMLコードを変更せずに挿入することができるため、SEO的な影響を気にせずに文字などの要素を挿入することができます。

SEOとは?

Googleの検索結果で、Webサイトが掲載される順位を上げる方法のこと。

HTMLのタグを正しく扱えているかという指標が存在する。

擬似要素とはどのようなものかを理解したら、次は使い方を学びましょう。次の項目では、before/afterの使い方を詳しく解説します。

before/afterの使い方

疑似要素before/afterを使用するときの基本書式は、以下のとおりです。

p::before {
  content: "";
}

p::after {
  content: "";
}

要素やclass名、id名などのあとに::before::afterと記述します。

beforeとafterの前にはコロン(:)の記述が2つ必要です。

※コロンを1つだけ記述してもCSSは適用されますが、この書き方は非推奨です。コロンは2つ記述しましょう。

スタイルの中にはcontentの指定が必要です。content: "";の中身は空白でも大丈夫ですが、記号やテキストを表示したいときにはcontentのクオーテーションの中に表示したい内容を記述します。

contentのクォーテーションマークは、シングル('')でもダブル("")でも、どちらでも問題ありません。

 

before/afterの違い

beforeとafterの違いは、擬似要素が表示される位置にあります。

beforeは要素の直前、afterは要素の直後に表示されます。

出力結果を確認してみましょう。

 <p>テキスト</p>
p::before {
  content: "要素の直前に表示されます";
  color: red;
}

p::after {
  content: "要素の直後に表示されます";
  color: blue;
}

beforeとafterの違い

ZeroPlusgate50教材の動画

 

before/afterの実装例

before/afterをよく使うのは以下のような実装場面です。

before/afterの実装例
  • テキストを追加する
  • 要素を重ねて表示する
  • 背景色をおしゃれにする
  • 画像を表示する
  • 吹き出しを作る

テキストを追加する

beforeとafterでテキストを追加するには、content: "";の中にテキストを記述します。

<p>テキスト</p>
p::before {
  content: "テキストを追加します";
  color: red;
}

p::after {
  content: "テキストを追加します";
  color: blue;
}

beforeとafterの違い

 

画像を表示する

beforeとafterで画像を表示するには、2つの方法があります。

  • contentに画像のパスを指定する
  • 背景画像を指定する

以下のHTMLで解説します。

<div class="image"></div>

 


contentに画像のパスを指定する方法

contentに画像のパスを指定すれば、画像を表示できます。

.image {
  height: 300px;
  width: 300px;
}

.image::before {
  content: url(..//img/気球.jpg);
}

こちらの方法では、元の画像にheightとwidthを指定する必要があります。また、擬似要素自体にはheightとwidthは適用されないので気をつけましょう。

beforeとafterのcontent""内に画像パスを指定した表示結果

 

背景画像として表示する方法

.image::before {
  content: "";
  display: inline-block;
  background: url(../img/気球.jpg) 100% 100% / cover;
  height: 300px;
  width: 300px;
}

こちらの方法では、擬似要素そのものにheightとwidthを指定できます。擬似要素そのものにheightやwidthを指定したいときはdisplay: block;またはdisplay: inline-block;を指定しましょう。

before/afterに背景画像を指定した画像

 

要素を重ねて表示する

before/afterとpositionを併用することで、要素を重ねて表示することも可能です。

例えば、タイトルに英語を重ねるデザインを作成してみましょう。

<h1>タイトル</h1>
h1 {
  position: relative;
  font-size: 80px;
  margin-top: 30px;
  margin-left: 30px;
}

h1:before {
  content: "title";
  color:rgb(249, 205, 205);
  position: absolute;
  font-size: 100px;
  top: -5px;
  z-index: -1;
}

テキストとテキストを重ねて表示している画像

 

背景色をおしゃれにする

before/afterを使用すれば、背景をおしゃれにデザインできます。

例えば、背景色を斜めカットする実装をみてみましょう。

<div class="bg"></div>
.bg {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 50vh;
  background: #00a8be;
}

.bg::after {
  content: "";
  position: absolute;
  left:0;
  top: 0;
  transform: skewX(77deg);
  transform-origin: top left;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #ffbb1e;
}

擬似要素を使った背景斜めカットの画像

吹き出しを作る

before/afterを使うと、テキストを吹き出しで表示することも可能です。

<div class="content"></div>
.content {
  position: relative;
  background: #ffbb1e;
  width: 800px;
  padding: 20px;
  border-radius: 50px;
  margin-bottom: 30px;
}

.content::after {
  position: absolute;
  content: "";
  border-top: 15px solid #ffbb1e;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

擬似要素を使った吹き出しの画像

ZeroPlusgate50教材の動画

 

before/after以外の擬似要素

擬似要素の種類は、beforeやafter以外にも数多く存在します。

以下が擬似要素の一覧表です。

擬似要素意味
::backdrop全画面モードでの余白カラー
::first-letter最初の文字にスタイルを適用
::first-line最初の行にスタイルを適用
::markerリストの黒丸や番号にスタイルを適用
::part()一致するpart属性を持つシャドウツリー内の要素
::placeholderinputやtextareaのplaceholderにスタイルを適用
::selection選択した文書の一部にスタイルを適用
::stottedHTML内のスロットにある任意の要素

参考:CSSカスケーティングスタイルシート

beforeとafter以外の擬似要素を実務で使う場面は多くありませんが、HTMLとCSSだけでは困難な実装を行うときに便利です。参考までに覚えておきましょう。

まとめ

before/afterセレクタは擬似要素を作成したいときに使用します。擬似要素を使用すれば高度なスタイリングを行えるので、beforeとafterを使いこなせるようになっておきましょう。

before/afterまとめ

  • 擬似要素を作成するための指定方法
  • beforeは要素の直前、afterは要素の直後に表示される
  • CSSでテキストを追加する、要素を重ねるなどの高度なスタイリングが可能
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから