大阪・兵庫・京都・奈良のホームページ制作、ECサイト制作、ランディングページ制作、WEB集客なら安心の「リエイト」へ

06-7662-8688
定休日 土日祝
受付時間 10時〜18時

homepage

ホームページ制作

ホームページ制作2017.08.30

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

img

適切に理解することでホームページ制作をラクにしてくれる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

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

リエイト情報

株式会社リエイトでは、累計500件以上のホームページを制作してきた実績と信頼で
企業様のパートナーとして、課題を一緒に解決していきたいと思います。
ホームページのことで分からないことがあればリエイトへお気軽にご相談ください。
担当が丁寧に対応致します。

ディレクター担当:後藤 涼也
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
『ホームページを優秀な営業マンに育てましょう!』
株式会社リエイト 総合窓口
〒556-0011 大阪市浪速区難波中2-10-70 なんばパークスタワー 19階
TEL: 06-7662-8688 FAX: 06-7662-8701
Email: info@re-eight.com
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

関連記事

RELATED ARICLE

img