CSSセレクタはスタイルを適用する対象を指定するもの。
疑似要素は、新しい HTML 要素を追加したように見せられるセレクタです。
LPのイメージ画像、サイトヘッダ画像、動きのある背景など、使い方次第で様々な表現が可能になります。
見た目の為の装飾要素をcss側で制御する事で「HTMLは目的となる情報だけを記載、装飾や調整はcssで行う」というHTML本来の構成に沿う上でも役立ちます。
css 疑似要素
css 疑似要素とは、新しい HTML 要素を追加したかのように動作するものを指し、ダブルコロン :: で表します。
| sample | 疑似要素 | 作動 | 説明 / 注意点 |
|---|---|---|---|
| 1 ⇒ | ::beore | 指定要素の前に追加 | プロパティ content: 必須 |
| 2 ⇒ | ::after | 指定要素の後に追加 | プロパティ content: 必須 |
::first-line | 指定要素の最初の行 | 最初の行が親要素の幅以下である事 | |
::first-letter | 指定要素の最初の１文字 | 指定要素がテキストで始まっている事 | |
| 3 ⇒ | ::marker | リスト<li>, <summary> の記号を装飾 | list-style: none; 以外 |
::placeholder | <input>, <textarea> のプレイスホルダーテキストを装飾 | プレイスホルダーテキストを設定している場合 | |
| 4 ⇒ | ::selection | テキスト選択時の装飾 | user-select: none; 以外 |
css 疑似要素のサンプル
boxの上端にイメージ画像を配置 (::before)
<style>
section {
text-align: center;
padding-bottom: 30px;
margin: 30px 0;
border: solid 1px #000;
}
section::before {
content: "";
aspect-ratio: 5 / 1; /＊画像の横縦比＊/
display: block;
width: 100%;
margin-bottom: 30px;
background: url("img.jpg") 0 0/cover no-repeat;
}
@media screen and (max-width: 〇〇px){
section::before {
aspect-ratio: 横 / 縦;
background-image: url("img-sp.jpg"};
}
}
</style>
<section>
<p>
これだけで <section> 上端に<br>
イメージ画像が設置できます
</p>
</section>これだけで <section> 上端に
イメージ画像が設置できます
レスポンシブで画像を変えたいなら、
SP用画像に合わせメディアクエリを入れればOK
イメージ画像をcss側で設置管理するので<picture>で画像を配置するより、HTMLコードもスッキリ。レスポンシブも調整しやすくなります。
とってもラクチンですよ^^v
content: に直接「画像url」を入れる事も可能ですが、画像が元サイズのままになってしまいます。
Boxに合わせて可変にしたい場合は、background にするのがお勧めです。
背景のコーナーを三角にカットする(::after)
<style>
p {
position: relative;
padding: 20px 4%;
background-color: #00A494;
}
p::after {
content: "";
aspect-ratio: 1 / 1; /＊三角BOXの横縦比＊/
position: absolute;
bottom: -1px;
right: -1px;
display: block;
width: 50px;
margin-bottom: 1.5em;
background-color: #fff;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
</style>
<p>背景に変化が付けられます。</p>
<p>
内容が増減しても<br>
三角のサイズも比率も同じまま
</p>背景に変化が付けられます。
内容が増減しても
三角のサイズも比率も同じまま
背景BOX自体に clip-path をかけると、内容量やレスポンシブで三角のサイズや傾斜が変わってしまいます。
疑似要素 + aspect-ratio なら幅も縦横比も固定。
位置もサイズも自由に変えられて、幅をvwや%で設定すればレスポンシブ対応もOK。border や画像にするより設定もメンテナンスも簡単です^^v
※ bottom: right: を 0 にすると微妙にずれる事があるので、１pxはみ出させています。
リスト行頭マークを装飾(::marker)
よく耳にするのは ::beore で置き換えてしまうやり方。
全く変えてしまうには良いのですが、色を変える程度なら ::marker の方がシンプルに設定できます。
<style>
ul li { list-style: square; }
li::marker { color: red; }
li.large::marker { font-size: 1.2em; }
li.bold::marker { font-weight: bold; }
</style>
<ul>
<li>赤のスクエアマーク</li>
<li class="large">少し大きめの赤スクエア</li>
</ul>
<ol>
<li>赤文字番号付きリスト</li>
<li class="bold">太字番号付きリスト</li>
</ol>- スクエアマークを赤に変更
- スクエアマークを少し大きめの赤に変更
※あまり大きくすると位置が合わなくなります
- 番号を赤文字に変更
- 番号を赤太字に変更
色と多少の装飾しかできませんが、 ::beore での変更よりかなり少ない設定で済みます。
少しだけ変えたいときにお勧めです^^
テキスト選択時の装飾(::selection)
あまり目立つ部分ではありませんが、テキストを選択した際の表示を変更することができます。
<style>
.select-bg::selection {
background-color: #FDD;
}
.select-col::selection {
text-decoration: underline;
color: red;
}
</style>
<ol>
<li>特に設定しない場合の選択はこんな感じ</li>
<li class="select-bg">
::selection で背景の色を変える
</li>
<li class="select-col">
::selection で赤文字+アンダーラインにする
</li>
</ol>下のテキストを選択してみてください。
- 特に設定しない場合の選択はこんな感じ
- ::selection で背景の色を変える
- ::selection で赤文字+アンダーラインにする
指定可能なのは背景や文字関係の一部のプロパティだけですが、小技としてサイトの雰囲気に合わせる事ができます。
ちょっと凝りたい時などに^^