ご相談・お問い合わせご相談・お問い合わせ 電話0120-800-804

ホームページ制作をラクにするCSSの疑似要素についてまとめ

Webサイト
ホームページ制作をラクにするCSSの疑似要素についてまとめ

適切に理解することでホームページ制作をラクにしてくれるCSS。CSS3により追加された複雑な構造のプロパティには目が行きがちですが、意外と疑似クラスの使い方を理解されていない方は多いのではないでしょうか。疑似クラスは、HTMLを編集しなくても特定の要素に別の要素をくっつけたり、複雑な条件指定を行って特定の要素だけにスタイルを適用することができたりと、使い方をマスターすればさまざまな場面で活きてきます。ここでは、そんな疑似クラスのうち、よく使うものを何種類かご紹介いたします。

:before疑似クラス、:after疑似クラス

:before疑似クラスや:after疑似クラスは、特定の要素の前後に、別の要素を追加するのに利用します。
例えば、以下のように指定すると、aタグの前に「■」という記号が表示されます。

a:before {
content:’■ ‘;
}

これはもっとも簡単な使い方の例ですが、応用として、ボタン画像の矢印などを表示させたい場合などにも活用できます。

.button {
position:relative;
}

.button:after {
content:”;
display:block;
background:url(arrow.png);
position:absolute;
top:50%;
right:10px;
width:10px;
height:10px;
margin-top:5px;
}

上記のように記述することで、ボタンの矢印を表現することができます。
ポイントとしては、contentプロパティがない:before疑似クラス、:after疑似クラスは利用できませんので、空要素であってもcontentを記述する必要があるということです。
また、直接的に疑似クラスの件とは関連はありませんが、position:absolute;を適用した要素で、top:50%;と画像の高さの半分のネガティブマージンを与えてやることで、天地中央に画像を配置することを実現することができますので、覚えておきましょう。

:first-child疑似クラス、:last-child疑似クラス

セレクタにより選択された最初もしくは最後の要素のみにスタイルを適用したい場合に利用する疑似クラスです。
:first-child疑似クラスは最初の要素のみに、:last-child疑似クラスは最後の要素のみに適用されます。
リストなどの連続した要素で、最初や最後の要素のみに違ったスタイルを当てたいというような場合に有効な手法となります。

たとえば、以下のように記述した場合、リストタグの最初と最後には余白が当たらないような表現を実現できます。

li {
margin:20px 0;
}

li:first-child, li:last-child {
margin:0;
}

:nth-child疑似クラス

さきほど紹介した疑似クラスは、最初と最後に限定した疑似クラスでしたが、nth-child疑似クラスを利用することで、任意の要素にスタイルを適用させることができます。
たとえば、5番目のリストのみ、フォントサイズを大きくしたいという場合、以下のような記述を行います。

li:nth-child(5) {
font-size:120%;
}

:nth-childは計算式を指定することも可能で、以下のような指定も可能です。

li:nth-child(n+5) {
font-size:120%;
}

li:nth-child(-n+5) {
font-size:120%;
}

前者は5個目以降の要素にスタイルを適用、後者は5個目までの要素にスタイルを適用する場合の構文となります。

さらに、整数や計算式以外にも、「奇数」「偶数」という指定のしかたも可能です。

li:nth-child(odd) {
font-size:120%;
}

li:nth-child(even) {
font-size:120%;
}

前者は奇数の場合にスタイルを適用、後者は偶数の場合にスタイルを適用する場合の構文となります。

計算式の書き方にはほかにもパターンが存在します。
もしこれ以外のパターンを適用したいという場合は、以下のサイトも参考にしてみてください。

:nth-childの使い方 | CSSPRO
http://csspro.digitalskill.jp/チュートリアル/nth-childの使い方/

疑似クラスを利用したCSS制作をマスターしよう

このほかにも、CSSにおいて利用できる疑似クラスはかなりの数が存在しています。
以下のサイトに、CSSにおいて利用できる疑似クラスが一覧で紹介されていますので、必要に応じて活用しましょう。

疑似クラス (Pseudo-classes) – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

疑似クラスは、一般的なセレクタの書き方と異なるため、最初はとっつきずらい印象がありますが、慣れてしまえばさまざまなことに活用することができる汎用性の高い要素です。
是非、あなたのホームページ制作の際の選択肢のひとつとするべく、積極的に活用し、使い方を覚えておくことをおススメいたします。

ReEight MAGAZINE

いいねして最新情報をチェック!

矢印アイコン
無料サイト診断サービス

WEBサイトに関してお困りなことはありませんか?

私たちは制作だけではなく、SEO、マーケティング、ブランディング、など
WEBに関して総合的な知見を持ち合わせており、
WEBサイトを最大限に活用するためのノウハウを蓄積しております。
御社が抱えている事業課題を私たちならきっと解決できると考えています。

お気軽にお問い合わせください。

フォームでのお問い合わせ

メールご相談・お問い合わせ

お電話でのお問い合わせ

電話
0120-800-804受付時間10:00〜18:00

WEBサイトに関することなら
お気軽にお問い合わせください。

フォームでのお問い合わせ

お見積り依頼やご相談・ご質問は
お問い合わせフォームをご活用ください。

メールご相談・お問い合わせ

お電話でのお問い合わせ

お急ぎの方や詳しく話を聞きたい方は
お電話ください。

電話
0120-800-804受付時間10:00〜18:00
サイトマップ プライバシーポリシー Copyright © re-eight.inc. All Right Reserved.