【CSS】Positionプロパティを理解して要素を自在に配置!

Cocoonでは、リンク用のブログカードが簡単に表示できます。このカードには、カラーラベルの表示/非表示が選べるようになっているのですが、この表示位置を変えたい時にはどうしたらいいでしょう?

左側に表示されるラベルを右側に移動させたいな…とか、枠の外側に表示したいな…という、ちょっとした変更…。

調べてみると、これを叶えるためにはCSSのpositionプロパティを使いこなすことが肝心だということがわかってきました。

positionプロパティを覚えると、ブログカードに限らず、サイトに表示するあらゆる要素の配置を自在に操ることができるというのです。

ということで、今回のテーマは「CSSのpositionプロパティ」です (^^)/

positionプロパティが使われる場面

ウェブサイトで素敵なボックスデザインに出会い、その構造を紐解くと「あ、ここでもposition使ってる!」ということが多いです。

まずは、こちら
合わせて覚えたい:擬似要素

カラー表示してあるラベルの位置に注目してください。

ブロックの補足表示として使われるラベル。構造的には、本体とラベルはそれぞれ別のボックスになっていて、2つを組み合わせて作られています。

Box1(本体)+ Box2(ラベル)

Box1に対してBox2をどう配置するかを指定するのにpositionプロパティが使われます。

ラベルに限らず、positionの使い方を覚えると要素を好みの位置に配置できるようになり、デザインの幅が広がります。CSSでオリジナルのデザインを試したい場合はぜひ押さえておきたいプロパティです。

その他のサンプル

ほかにも、positionを使って下の図のようなデザインを作ることも可能です。

サンプルで使ったコードは、この記事の一番下でご紹介しています。⇒ サンプルコードを見る

合わせて覚えたい! 擬似要素の ::before と ::after

擬似要素は、指定した要素の特定部分にスタイルを設定できるものです。

擬似要素にも色々と種類があるので、代表的なものをあげてみます。

擬似要素簡単に言うと…働き
::before指定した要素の直前に、子要素を入れることができます。
::after後ろ指定した要素の最後に、子要素を入れることができます。
::first-line最初の行段落の最初の行にスタイルを設定します。
::first-letter1文字目要素の1文字目にのみスタイルを設定します。

今回の記事で目標にしているデザインは、親ボックス&子ボックス が必要です。

そこで使いたいのが、::before::afterです。

この2つの擬似要素は、要素の前か後ろに擬似的な要素(子要素)を作るものです。

HTMLには書かれていない要素を作り出し、スタイルを設定することができます。

今回の記事はpositionプロパティがメインなので擬似要素の詳細は省略しますが、positionを使ううちに「便利なものだな」と感じると思います。

CSSの参考にと色々なサイトを巡ると、セレクタで「::before」「::after」という書き方と、「:before」「:after」というように、「:」の数が2つの時と1つの時があります。

現在では、afterとbeforeに使われる「:」の数は「::after」と「::before」の2つ使いが正解です。(CSS3以降)

正確には、hoverのような疑似クラスは1つ。beforeとafterのような疑似要素は2つです。

【CSS】positionプロパティとは?

それでは、詳しく【position】プロパティを見ていきたいと思います。

CSSのpositionプロパティは、要素(ボックス)の配置方法を指定するプロパティです。

ちょっとわかりづらいですよね…

わかるような、わからないような…

「要素の配置方法を宣言して、移動の基準点を決める」と言い換えられます。

positionは宣言をしているだけなので、実際に位置を決めるのは、top、right、bottom、leftプロパティです。

つまり実際に使う際は、

  1. position配置方法 を指定して基準点を決める。
  2. toprightbottomleftを使って具体的な 位置 を指定する。

という形でスタイルを組み立てます。

基準をどこにするかが決まれば、あとは

どれだけ移動させるか指定すればいいのだ!

positionの値

positionプロパティには5つの値があります。

働き
static初期値。通常のフローに従って配置されます。
relative本来の表示位置を基準にします。(相対位置指定)
absolute親要素を基準にします。(絶対位置指定)
fixed
(今回は省略)
ウィンドウを基準にします。
画面をスクロールしても位置は固定されます。
sticky
(今回は省略)
スクロールする親要素に対して相対的配置を指定します。

一気に全部を覚えるのは大変ですし、今回は「ボックス内に別の要素を自在に配置する」という目的があるので、fixedとstickyについては省略します。

もう少しわかりやすいように、図を使ってみましょう。

1. static

staticは初期値なので、position指定が無い場合はこちらの設定になっています。

通常、要素はコード記述の順番通りに上から垂直方向に配置されていきます。(通常フロー)
top、right、bottom、leftプロパティは指定できません。

2. relative

relativeを指定したボックスは通常フロー通りに配置された上で、本来そのボックスが表示される位置を基準として相対配置されます。

relativeを設定しただけでは変化はなく、top、right、bottom、leftプロパティを使って位置を特定できます。

また、このあと登場するabsoluteとの組み合わせでも使われます。

position指定なし = static
<p class="box-blue">
青色ボックス
</p>

<p class="box-red">
赤色ボックス
</p>

<p class="box-green">
緑色ボックス
</p>

CSSにはposition指定をしません。

/*3つのボックスに共通項目*/
.box-blue,
.box-red,
.box-green{
padding: 10px; /* 余白 */
width: 200px; /*ボックス幅*/
}

.box-blue{
background-color: #dbdbff; /*背景色*/
}

.box-red{
background-color: #ffcccc; /*背景色*/
}

.box-green{
background-color: #cff99d /*背景色*/
}

青色ボックス

赤色ボックス

緑色ボックス

通常フローでは、コードに書かれた順に上から「青→赤→緑」のボックスが垂直方向に配置されていきます。

relative を指定してみる

赤色ボックスにrelative指定した場合の表示を見てみましょう。

分かりやすいよう、新しいクラスを追加してrelativeと位置を指定しました。

<p class="box-blue">青色ボックス</p>

<p class="box-red box-rel">赤色ボックス</p>

<p class="box-green">緑色ボックス</p>
.box-rel{
position: relative;
top:10px;
left:30px;
}

赤いボックスは、もともと表示されるはずだった位置を基準に移動します。

青色ボックス

赤色ボックス

緑ボックス

3. absolute

absoluteは、通常フローから外れたうえで、親要素を基準として絶対配置されます。

直近の親要素にposition指定がある場合は(static以外)その親要素が基準になります。

親要素にpositionの指定が無い場合は、ウィンドウの左上が基準になります。

最終的な位置はtop、right、bottom、leftで指定した場所になります。

『通常フローから外れた』というのは、『浮いた状態になる』と解釈するとわかりやすいです。

positionabsoluteを指定したことで、そのボックスが「ふっ」と浮き上がり、どこにでも配置できる状態になるわけです。

そのうえで、親要素を基準として「上を10px、左を30px移動する」という具合に配置します。

position指定なし

<div>で作った親要素の中に、3つのボックスを入れてみましょう。コードは入れ子構造になるように記述します。

<div>
 <p class="box-blue">青色ボックス</p>
 <p class="box-red">赤色ボックス</p>
 <p class="box-green">緑色ボックス</p>
</div>

青色ボックス

赤色ボックス

緑色ボックス

このコードではdivは「箱」の役割だけです。配置の指定もないので、中のp要素は記述した順に垂直方向に配置されていきます。

absolute を指定してみる

それでは、要素にabsoluteを指定してみましょう。

親要素にrelative指定なし

まず、親要素にrelative指定が無い場合です。この場合はウィンドウの左上が基準になります。

赤色ボックスに新しいクラスを追加し、配置用のCSSを設定します。

<div>
 <p class="box-blue"> 青色ボックス </p>
 <p class="box-red box-abs"> 赤色ボックス </p>
 <p class="box-green"> 緑色ボックス </p>
</div>
.box-abs{
position: absolute;
top: 10px;
left: 30px;
}

親要素への指定がないので、基準はウィンドウの左上になります。

親要素にrelative指定あり

relativeとabsoluteを組み合わせた使い方です。

親要素のdivにクラスparentを追加し、CSSでrelativeを設定します。

<div class="parent">
 <p class="box-blue">青色ボックス</p>
 <p class="box-red box-abs">赤色ボックス</p>
 <p class="box-green">緑色ボックス</p>
</div>
/*親要素*/
.parent{
position: relative;
}

分かりやすいように、親要素にボーダーを表示しています。absoluteを指定した赤色ボックスは、親要素の左上を基点として移動しています。

青色ボックス

赤色ボックス

緑色ボックス

ここまでのまとめ

positionを使って配置方法と基準点を決めることで、要素を思いのままに配置できることがわかってきました。

特にボックスデザインを考える場合は、次の3つをセットで覚えましょう。

  1. 親要素にはposition:relative;を指定する。
  2. 子要素にはposition:absolute;を指定する。
  3. 子要素はtoprightbottomleftを使って表示位置を指定する。

ラベル付きボックスを作ってみよう

ここで思い出していただきたいのが、最初に見てきたサンプルボックスたちです。

みんな、メインボックス(親要素)と、もうひとつのボックス(子要素)との組み合わせで構成されていましたね。

そしてもうひとつ思い出したいのが擬似要素です。擬似要素の::before::afterは、要素の中に擬似的な子要素を作り出すものでした。

擬似要素を使えば、ひとつの要素に親と子が作れるのです。

どうですか?ボックスの上にピタッとラベルが貼り付いたデザインが作れそうな気がしてきませんか?

こうなるはず!

とりあえず作ってみる

細かいデザインはゆっくり考えるとして、とにかくチャッチャと試してみたいと思います。

<div class="label-box">
ここは本体部分です。
</div>

HTMLはとってもシンプルです。
親要素になるdivにクラス名label-boxを追加しておきます。

/*--- 親要素 ---*/
.label-box{
   position: relative; /*配置方法*/
   border: 2px solid #ccc; /*ボックスの外枠*/
   padding: 2.5em 1em 1em 1.5em; /*ボックス内余白*/
   width: 80%; /*ボックスの幅*/
}

/*--- 子要素 ---*/
.label-box::before{
   position: absolute; /*配置方法*/
   top: 0; /*上からの距離*/
   left: 0; /*左からの距離*/
   content: 'LABEL'; /*ラベル内文字*/
   padding: 2px 15px;
   font-size: 14px;
   background-color: #f39800; /*ラベル背景色*/
   color: white; /*ラベル内文字色*/
   font-weight: bold;
}

 完成!

ここは本体部分です。
【 ::before & ::after の使い方 】
  • セレクタの後ろに::beforeまたは、::afterを記述します。
  • ::before::afterを使う時は、contentをセットで使います。
  • contentには、擬似要素で表示するテキストを指定します。

contentの書き方 ⇒ content: "●●●"; 

  • 「●●●」の部分に表示するテキストを入力します。
  • contentを忘れると擬似要素は表示されません。
    表示するものが無くても必ず記述し、「”~”」の中は空白にします。

ラベルの配置を右側に変えてみる

それでは、ラベルの位置を右端に変えてみましょう。

::beforeで指定しているleftrightに変えるだけです。

 完成!

ここは本体部分です。ラベルは右側に表示します。
.label-box{
   position: relative;
   border: 2px solid #ccc;
   padding: 2.5em 1em 1em 1em;
   width: 80%;
}
.label-box::before{
   position: absolute;
   top: 0;
   right: 0; /* ←leftから変更しました */
   content: 'LABEL';
   padding: 0 15px;
   font-size: 14px;
   background-color: #f39800;
   color: white;
   font-weight: bold;
}

微調整してみる

「外枠のラインが気になるぜ!」

よぉ~く目を凝らすと、ラベルの外側にグレーの外枠が見えてます。本体の外枠ですね。

borderプロパティで枠線の幅は2pxを指定しているので、ラベルを外側に向けて2px移動させれば隠せるはず。

基点よりも外側に向けて移動させる場合は負の値を指定します。

 完成!

ここは本体部分です。基点より外側に向けてチョットだけ移動させます。
.label-box{
   position: relative;
   border: 2px solid #ccc;
   padding: 2.5em 1em 1em 1em;
   width: 80%;
}
.label-box::before{
   position: absolute;
   top: -2px; /* 負の値も使えます */
   right: -2px; /* 負の値も使えます */
   content: 'LABEL';
   padding: 0 15px;
   font-size: 14px;
   background-color: #f39800;
   color: white;
   font-weight: bold;
}

親要素よりも外側に表示してみる

ラベルを本体の外側に表示する場合は、ラベル自身の要素::beforeに[高さ=heigth]を指定し、その高さ分を上に移動させます。

 完成!

ここは本体部分です。ラベルは右側に表示します。基点より外側に向けて移動させます。
.label-box{
   position: relative;
   border: 2px solid #ccc;
   padding: 2.5em 1em 1em 1em;
   width: 80%;
}
.label-box::before{
   position: absolute;
   height: 26px; /* 子要素の高さ */
   top: -26px; /* 高さの分を上に移動 */
   right: -2px;
   content: 'LABEL';
   padding: 0 15px;
   font-size: 14px;
   background-color: #f39800;
   color: white;
   font-weight: bold;
}

Cocoonブログカードのラベル位置を変えるには?

ここまでpositionプロパティの使い方を見てきましたが、ここまでを理解できれば、最初の疑問も解決できるはずです。

「Cocoonのブログカードのラベルって、右側に変えられるの?

ブログカードのラベルに付けられたクラス名がわかれば、そのクラスに対してスタイルを追加すれば、ラベルを右側に変えることは可能だということになります。

デベロッパーツールを使って確認したクラス名はコチラです。⇒.blogcard-label

そして、こちらがラベルを右側に表示するためのカスタマイズ用CSSコードです。

/*----- Cocoonブログカードのラベル位置調整 -----*/
.blogcard-label{
left: auto; /*テーマでの設定をリセット*/
top: -15px; /* お好みに微調整 */
right: 16px; /* お好みに微調整 */
}

なぜleft:auto;があるのか?

Cocoonが設定している元のleft指定が残っているので、rightを追加すると相乗効果でラベルが幅いっぱいに広がってしまいます。
そのためカスタマイズのCSSにはleft: auto;を追加してリセットしています。

[参考]デザインサンプルのコード

サンプルに使ったボックスのコードを置いておきます。

マスキングテープで留めたメモ

こちらのデザインは、段落ブロック用です。

<p class="box-mstape">
ここにテキスト
</p>

WordPressで使う場合、段落ブロックに直接テキストを入力し、ブロックの[高度な設定]で追加CSSクラスにbox-mstapeと入力します。

/* マステ&メモ*/
.box-mstape {
  position: relative;
  display: inline-block;
  min-width: 270px;
  min-height: 100px;
  margin: 2em 0 2em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 40px 2em;
  background-color: #fff6e6;
  color: #ed86b4;
  text-align: center;
}
.box-mstape::after {
  position: absolute;
  content: "";
  top: 15px;
  left: 10px;
  width: 30%;
  height: 35px;
  margin: -35px auto 10px 35%;
  background: rgb(230,120,159,.23);
}
  • サイト全体で使う場合は[追加CSS]に追加しておきます。
    • ダッシュボード→[外観]→[カスタマイズ]
  • 特定の記事でのみ使う場合は[カスタムCSS]に記述します。
    • 記事作成画面の下にある[カスタムCSS]欄に貼り付けます。

黒板風ボックス

こちらのデザインは、段落ブロック用です。

<p class="box-blackbord">
ここにテキスト
</p>

WordPressで使う場合、段落ブロックに直接テキストを入力し、ブロックの[高度な設定]で追加CSSクラスにbox-mstapeと入力すれば適用されます。

/* 黒板風Box */
.box-blackbord{
	position: relative;
	margin: 2em auto;
	padding: 1em 1.5em;
	width: 90%;
	min-height: 100px;
	background: #202020;
 	color: #fff;
	border: 8px solid #b2771f;
}
.box-blackbord::before {
	position: absolute;
	content: '';
	right: 10px;
	bottom: 0;
	border: solid 3px #ededed; /*チョーク(白)*/
	width: 20px;
	border-radius: 3px 2px 0 2px;
}
.box-blackbord::after {
	position: absolute;
	content: '';
	bottom: 0;
	right: 40px;
	border: solid 3px #ffff6b; /*チョーク(黄色)*/
	width: 15px; 
	border-radius: 8px 5px 2px 5px;
}
  • サイト全体で使う場合は[追加CSS]に追加しておきます。
    • ダッシュボード→[外観]→[カスタマイズ]
  • 特定の記事でのみ使う場合は[カスタムCSS]に記述します。
    • 記事作成画面の下にある[カスタムCSS]欄に貼り付けます。

おしゃれ見出し

Webフォントを使って、よりオシャレ度アップするのも面白いと思います。

<p class="box-deco1">
ここにテキスト
</p>

WordPressで使う場合、段落ブロックに直接テキストを入力し、ブロックの[高度な設定]で追加CSSクラスにbox-deco1と入力します。

.box-deco1 {
	position: relative;
	margin: 1rem auto;
	padding: 0.5rem 1rem;
	border: 3px solid #ffc107;
	background-color: #ffc107;
	font-size: 24px;
	color: #000;
	font-weight: 900;
	width: 90%;	
}

.box-deco1::before {
	position: absolute;
	content: '';
	top: -9px;
	left: -9px;
	width: 100%;
	height: 100%;
	border: 3px solid #000;
}
  • サイト全体で使う場合は[追加CSS]に追加しておきます。
    • ダッシュボード→[外観]→[カスタマイズ]
  • 特定の記事でのみ使う場合は[カスタムCSS]に記述します。
    • 記事作成画面の下にある[カスタムCSS]欄に貼り付けます。
タイトルとURLをコピーしました