ひしもち 
ポートフォリオサイトのデザインカンプ作りと、くりきんとんの更新作業に手一杯で、ブログの更新が滞ってしまいましたが、地道に活動を続けています。
この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いたものです。記事の内容は、2015年3月31日に書かれています。
擬似要素というものを初めて知った時の驚きと感動をつづっています。
デザインをしながら、「これってCSSで装飾できるものなのかな？」と思う部分をネットで調べたりしているうちに、「擬似要素」という優れものにたどり着きました。
よく使われているのは「:before」とか「:after」とかってやつですね。オシャレなサイトのオシャレな装飾がどうやって出来てるのか覗いてみると、カナリの頻度で見かけます。
floatの解除にも使われたりするのですが、今の私にとっては、「CSS装飾の要」という感じです！
「:before」「:after」を使うと、HTMLでは記述されていない要素を、指定した要素の前後に追加することができます。
つまり、HTMLをいじらずに、文字や画像などの情報を追加することが出来ますよ！ということ。
これを利用して、要素の前後に装飾を付け足すことができるんです。
ツールチップなどに使われるような吹きだしの形や、かの有名なリボン見出しなんかを作るのには、擬似要素のborderが使われているようです。
また、positionプロパティとのあわせ技で擬似要素を斜めに配置すれば、ページに斜めの区切りを入れたり、背景画像を斜めに配置することも出来るようです！（私はこれがやりたかったので調べていました）
擬似要素を極めた者は、CSSだけでアイコンを描いたりもします！(@@;
まだまだ勉強中なのでここで詳しく説明することが出来ないのですが、擬似要素の使い方を学べばCSSによる装飾の幅が広がることは間違いありませんね。すごいぜ擬似要素！
私もちょっとずつ練習して、スマートな装飾ができるようになりたいです。