疑似要素 :before :after の使い方

本日は、デザインにおいて無限の可能性(大げさ?)を秘めた疑似要素 :before, :after を使ってみよう!の巻です。

疑似要素 :before, :after とは?

htmlに手を加えずに、要素の前(:before)と後ろ(:after)にフェイク(疑似)の要素を追加出来るというものです。
これを極めますと、画像を一切使用せず疑似要素だけで作られたアイコンなど、かなり凄い事が出来るようです。

今回はbodyタグに:before, :afterの擬似要素を使い、ヘッダーとフッター部分に色をのせて境界線を作ってみます。
このサイトのヘッダーとフッター部分の薄いグレーの色の部分です。
ちなみにヘッダー部分を:before、フッター部分を:afterで指定しています。

ソースをご覧下さい。

ヘッダー、フッター共通部分はまとめて記述します。
改めて、フッター部分をmarginの数値を変えて位置調整しています。

content: ” “; → ” “の中が空のcontentプロパティですが、
擬似要素を使用する場合、contentプロパティは必ずセットで記述するのがルールです。
記述が無いと動作しませんので、空でも必ず記述して下さい。
他に、

  • content: ” “;の” “の中にテキストを入れれば、テキストが表示される。
  • 画像を表示させたい時は content:url(“画像のURL”)
  • content: open-quote;開始引用符 , content: close-quote; 終了引用符でエレメントの前後に引用符を付ける。

などもあります。

:before, :afterで作るエレメントはインライン要素ですので、高さや幅を指定したい場合は display: block; でブロック要素にします。

margin-top: と margin-bottom: でヘッダー、フッターそれぞれの範囲に色が載るよう、調整します。その際、firebugでバランスを見ながら数値を決めるとと簡単です。

いかがでしょうか?
これならすぐにでも取り入れられそうです。

他にも面白い使い方があれば、ぜひ投稿して下さい!

カテゴリー: study, 勉強会 | タグ: , | 投稿日: | 投稿者:
かおりんご

かおりんご について

マルチメディアスクールWAVE立川校卒業。 タカハシ先生と愉快な仲間達と共に倶楽部りんごを結成、絶賛修行中。 WAVE名物だったライブ授業、りんごでは毎週4時間みっちりやってます! ネットで何でも学べる時代ですが、やはりライブで学ぶことに勝るものはありませんね。 りんご結成時には活動拠点を探して東奔西走。運営、スケジュール管理をやっています。 好きなもの: overflow:hidden、SVG、ライブトレース、流行り物(笑)、ねこ、幕末etc。

疑似要素 :before :after の使い方」への3件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.