CSSのpositionと擬似要素について

CSSの課題

• Fjord Boot Campの課題で難しかったポイントを整理します。

positionの扱い方

positionといえば、「要素の位置を決めるプロパティ」のことですね。

値として、以下の４種類があります。

• static
• absolute
• relative
• fixed

また、positionはtop、left、right、bottomというプロパティをセットで使用します。

1. positionで基準を決定する
2. top、left、right、bottom で数字を調整する

というイメージです。

staticについては、初期値であることやtopなどを指定しても効かないため、ほとんど使用しません。

また、fixedは画面からの位置を固定する場合に用い、ヘッダーなどに使用することが多いです。

恐らく、誤解しやすいといえば、relativeとabsoluteの使用方法ですね。

まず、relativeは「本来の表示位置を基準とした相対的位置」を示します。

See the Pen relative by Tomo (@tomomik9) on CodePen.

指定ありの方のパラグラフは本来の位置(ブロック要素なので指定なしのパラグラフの下)に比べて、少しずれていますね。

これは、position:relativeを設定し、top:20pxとleft:20pxを指定したからです。

absoluteはどうでしょう。absoluteは、「親要素を基準」に、絶対的な位置を指定します。

See the Pen CSS absolute by Tomo (@tomomik9) on CodePen.

要素2が要素1より上に来ているのは、要素2のクラスにposition:absoluteを記載し、親要素からの絶対的な位置を設定したためです。

親要素にposition:relativeを設定するのを忘れないようにしましょう。

このabsoluteをうまく使えば、親要素の画像の上にラベルをつけたり、表現の幅が広がりますね。

擬似要素の使い方

CSS3のセレクタはかなりの数に上りますは、その中でも擬似要素は使えると非常に便利ですね。

• E::before
• E::after

E要素の前あるいは後にコンテンツを挿入します。

See the Pen before and after by Tomo (@tomomik9) on CodePen.

注意点は、挿入コンテンツがインライン要素であることです。

本題の課題

これらの知識を総動員して、アイコンをCSSだけで作りました。もちろん、課題の一部です。

ポイントは、

1. 擬似要素を使い、見出しの前と後に空のコンテンツ(content:"")を作ります。
2. 空のコンテンツはインライン要素なのでdisplay:blockに直し、色や幅を設定します。インライン要素の場合、空ではコンテンツとしてスペースの確保ができない状態になります。

見出しの前と後ろ(ブロック要素なので縦に並んでますね)に色がついたコンテンツが２つ確認できますね。

1. それぞれの領域にborder-rightで右側に同じ大きさのボーダーをつけます。

1. 位置を動かすために、見出しを親要素として、擬似要素にpositionを設定します。

最終的にはこのようなアイコンが作成されます。

See the Pen CSS PRACTICE by Tomo (@tomomik9) on CodePen.

最後に

インライン要素とブロック要素は以下の記事がおすすめです。

saruwakakun.com

また、セレクタについてはこのまとめがわかりやすいです。

wp-e.org

以上となります！