擬似要素を使いこなそう！CSSのbefore/afterの使い方【初心者向け】
初心者向けにCSSで書く:before,:after擬似要素の使い方を解説しています。htmlでリストを作った際などはデザインの幅が広がる重要な知識になりますので、ぜひ使えるようになっておくと良いでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSで書く::before,::aterの使い方を解説している記事になります。
全くの初心者という方が今すぐ覚える必要のある知識ではありませんが、サイト制作をする上で重要なものになりますので今覚えておくと良いでしょう。
文頭に固定で何か文字を置いたり、リストで並べた際に役に立つはずです。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回は疑似要素の中から、beforeとafterを使ってみよう。
田島メンター！！疑似要素というのは何ですか～？
セレクタの後ろに追加で記述して、その要素の一部分にスタイルを適用させることができるものなんだ。今回使うbeforeとafterは、要素の前や後に文字や画像を入れる疑似要素だね。
なるほど、そんなこともできるんですね。よろしくお願いします！
before/afterとは
beforeとafterは、セレクタに追加して条件を指定する擬似要素です。擬似クラスが要素全体にスタイルを適用するのに対して、擬似要素は要素の一部分にスタイルを適用します。
「before」は要素の前、「after」は要素の後ろに追加の要素を入れることができます。
見出しの前に同じ記号を付けたり、画像を挿入したい時などにも活用できます。
before/afterの書き方
before/afterは以下のように記述します。
要素::before {content:挿入する内容;} 要素::after {content:挿入する内容;}
content:の部分には挿入したい内容を入力します。
contentに文字や記号を挿入する場合は、それらを“”で囲って入力します。
contentに画像や音声を挿入する場合は、url(対象へのパス)を入力します。
同じ要素に対してbeforeとafterの両方を指定することも可能です。
CSS3からbefore・afterなどの擬似要素には::(ダブルコロン)を使用しますが、コロンが1つの場合でもほとんどのブラウザで正常に機能するようになっています。
サポートブラウザ
「::before, ::after擬似要素」をサポートするブラウザは以下の通りとなっています。
- Chrome
- Firefox3.5~
- Safari4~
- IE8~
- Opera6~
before/afterの基本的な書き方だよ。
セレクタの後ろに”::before”、”::after”のように追記して、contentの値に入れたい文字や画像を指定するんですね。
beforeとafterは同じ要素に両方適用させることもできるんだ。次は実際にコンテンツを挿入して、画面で確かめてみよう。
実際にbefore/afterを書いてみよう
次のHTMLファイルにbefore/afterを適用します。
(※htmlとcssファイルが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h3>見出しの前に記号を入れる</h3>
<p>段落の前に画像を入れる</p>
</body>
</html>
CSS
h3::before {content:"◆";}
p::before {content:url(photo1.png);}
ここでは<h3>の見出しの前に記号”◆”が入るように記述し、<p>の段落の前には同じディレクトリ内にアップロードしている画像ファイル「photo1.png」が入るようにパスを設定しています。
画面ではこのように表示されます。
見出しの前に”◆”が、段落の文章の前には画像ファイルが挿入されました。
次に、beforeとafterを同じ要素に同時に使用した場合の例です。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h3>見出しの前と後ろに記号を入れる</h3>
<p>段落の後に画像を入れる</p>
</body>
</html>
CSS
h3::before {content:"◆";}
h3::after {content:"◆";}
p::after {content:url(photo1.png); }
ここでは<h3>の見出しの最初と最後に「◆」の記号を入れ、段落の後に画像を挿入するように設定しています。
画面ではこのように表示されます。
見出しの前後に記号が入り、段落の文章の後に画像が表示されるようになりました。
コロンの数について
疑似要素には、:before/:afterと::before/::afterという2種類の実装方法があります。
css2では、:before/:afterのように、コロンを1個記載します。
css3では、::before/::afterのように、コロンを2個記載します。
css3の方が最新のcssですので、すべて、::before/::afterと記載するということも可能です。
::before/::afterに関しては、主要ブラウザは対応しています。
ただし、css3の一部の文法は主要ブラウザに対応していないものもある点に注意する必要があります。
以上、CSSで書く::before/::after擬似要素の使い方を解説しました。
文章の前後の表現の幅が広がるはずです。もちろんデザイン的にも非常に見やすい見た目になるはずなので、ぜひ自分でも試してみてください。
他にもアニメーションをつけたり、hoverを指定したりなどスタイルをあてることもできるので、ぜひ表現の幅を広げていきましょう。
before/afterを使った部分をドラッグなどで選択してみよう。どうなっているかな？
あれ、追加した文字や画像が選択範囲に入ってませんね。
疑似要素で追加された部分はサイトの内容としては取り扱われず、検索エンジンにも認識されないようになっているんだ。大事なキーワードなどでは使わない方がいいね。
あくまで装飾や表現方法として利用するのがよさそうですね。ありがとうございました！
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
