before,afterで簡単ピン刺しおしゃれデザインのやり方【疑似クラスとの違いも】
目次
最近疑似要素便利だなーと思うのでまとめてみました。
知識があり、ピン刺し実現させたい方、目次で本編へどうぞ！
知識がありすぎて全部解るのに来てしまった方、目次から「終わりに」だけでも見て下さい！
また、本記事に埋め込まれているプログラミングコードが見づらい場合は、枠内の右上の雲のアイコンを押して、JSFiddleのサイトをつかって確認してみて下さい。
疑似要素とは？
ｃｓｓを弄り始めた方、無料ブログでちょくちょく弄っている方、beforeとかafterとかみたことありませんか？
そうですアレの事です。
雑に説明するとこんな感じになります。間違ってたらすみません。
| 疑似要素 | 仕様例 | 説明 | 注意 |
|---|---|---|---|
| ::before | 下記参照 | 指定した要素の開始タグ直後にbeforeという要素を足してくれる。 | あたかもhtml要素を足してくれるけど、文字として認識されないので、ドラッグもできないし、googleにも認識されないからＳＥＯ効果はない。 |
| ::after | beforeとほぼ同じなので省略 | 指定した要素の閉じタグ寸前にafterという要素を足してくれる。 | before見てね |
| ::first-letter | 下記参照 | 要素の最初の文字に対してスタイルをつける。 | 最初の文字の前にimgタグとかがあるとうまく適応されないから注意。 インライン要素には適応できない |
| ::first-line | 下記参照 | 要素の最初の行に対してスタイルをつける | インライン要素には適応できない |
◆::before使用例◆
◆::first-letter使用例◆
◆::first-line使用例◆
こんな感じでＣＳＳからより深い条件で要素内のスタイルを指定できる機能ですね。
before、afterはちょっと特殊で、htmlタグをcssから生成しているかのようにふるまうので、こいつが大変便利なのです。
疑似クラスとの違いは？
疑似クラスとは、:hoverとかのやつです。
マウスがのっかった時のスタイルを指定するやつですね。
このようなものがあります。
| 疑似クラス | 説明 |
|---|---|
| :link | 未訪問リンクのスタイルを指定します。 |
| :visited | 訪問済みリンクのスタイルを指定します。 |
| :hover | ユーザーの操作で要素にカーソルなどが乗った際のスタイルを指定します。 a:hoverでは“カーソルは乗っているがクリックはされていない状態”です。 |
| :active | ユーザーの操作で要素がアクティブになった際のスタイルを指定します。 a:activeでは“クリックされてから離されるまでの状態”です。 |
こちらはＨＴＭＬクイックリファレンスより（他に便利なものもたくさんあります）
疑似要素はより細かい要素へのスタイル指定、
疑似クラスは、ユーザーの動作の伴った要素へのスタイル指定のことですね。
：：と：（コロン一つと二つ）があるけど違いは？
これ最初は疑問に思いましたが、単純に：：（コロン二つ）が疑似要素、：（コロン一つ）が疑似クラスを表しています。
今は：（コロン一つ）でも疑似要素として読み込んでくれるブラウザも多いそうですね。
ちなみに疑似クラスと疑似要素は重ね掛けできます。
参考になるか解りませんが以前の記事でチラッと触れております。
:hover::after疑似クラスとか疑似要素
深く触れませんが、疑似クラスのスタイル指定はちょっとだけ特殊な感じがします。
こんな感じに、動作を加えた要素とは違う、他の要素へのスタイル適応も出来ます。
before,afterで簡単ピン刺しおしゃれデザイン【本編】
それではピン刺ししていきましょう。
木の板にケンジくんの写真をピンでさします。
完成品はこれです。
それでは初めて行きましょう。
木の板画像と、ケンジ君はこちらで用意しておきました。
タブを切り替えてコードを見てみて下さい。
一番親要素のdivに木の画像が貼ってあり、その子要素のdivにimg要素が入っているだけです。
先にＣＳＳで見栄え的に少し影をつけています。
ここからＨＴＭＬは一切変更しません。
ピンを用意（背景透明だと直よし）
先に差し込むピンを用意しておきます。
ヒバナさんからお借りしますよー
こいつ使いましょう！
背景も透明で素晴らしいです！
このピンのアドレスは、https://it-ohuzake.tokyo/wp-content/uploads/2017/08/pin.pngですね。
やる方はどこかに自分で保存して、そのアドレスを参照してください。
ＣＳＳで要素に疑似要素をつける
さてｃｓｓで疑似要素をつくっておきます。
今回はbeforeを使って作ってみますね。
セレクタの後ろに::beforeをつけるんでしたよね。
こんな感じに
.kenzikun::before
ＣＳＳタブで疑似要素がついている事を確認してください。
中身を入れないと現れないのでcontentプロパティのみ入れております。
これを実行すると、beforeというＨＴＭＬ要素がkenzikun要素の中に出来ているのです。(実際に成型されるＨＴＭＬです)
疑似要素に背景を設定
この疑似要素にプロパティを設定していきますが、今回はbefore要素の背景にピン画像を当てはめる事にします。
なのでcontentプロパティは空でＯＫ
こんな感じの文をつけたします。
ＣＳＳタブを見て下さい。
ピンを手前に表示させるためにもabsoluteを使っております。今回は要素がないので、裏に回ってしまい背景画像が出てきません。
位置を整える
あとは位置を整えるだけです。
まずケンジくんの画像を真ん中へもっていきます。
ＣＳＳの.kenzikunとResultを見て下さい
やりやすいのでポジションはrelativeにしております。（いつかpositionについても解説します）
最後にピンの位置を整えて完成です。
ＣＳＳの.kenzikun::beforeとResultを見て下さい
意外に簡単でしたよね！
今回はbefore要素を使っただけなので、after要素も使えば、ピンを二つ指すこともできます。
こんな感じに
終わりに
今回は疑似クラスを用いることで写真をピンでとめているような、オシャレなデザインを実現する事が出来ましたね。
私も日々奮闘していますが、技術レベルは低くてもアイデア次第で面白いデザインが作れるようになるのがいいですよね。
絵だって誰でも書くことはできますが、良し悪しは別の場所にありますからね。
