これまでのサイト開発まとめ（10）アピールエリアの設定（2）

サイト開発

2023.04.142023.04.24

こんにちは。サイト開発担当のshoです。

今回は「これまでのサイト開発まとめ」シリーズの10回目です。前回はこちら、初回はこちら。

アピールエリアに動く矢印を設置しました。

動く矢印の設置
CSSの擬似要素って？
CSSの擬似要素「::before」と「::after」
擬似要素「::before」を使って矢印を描画する

動く矢印の設置

一般的なファーストビューって、メッセージ性のある文字や画像、動画が出てきて、その下部にスクロールダウンを促す要素があることが多いですよね。

特に当サイトのファーストビューは、スクロールダウンを促さないと、内容的に反射でブラウザバックされかねないため、スクロールダウンを促す要素の設置は必須です。

というわけで、動く矢印とリンクボタンを設置していきましょう。

まずは動く矢印のCSSコードです。子テーマのstyle.cssに追記します。

.appeal-content {
  padding-top: 70px;
  position: relative;
  text-align:center;
}

.appeal-content::before {
	display: inline-block;
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	border-bottom: solid 4px #060E1C;
	border-left: solid 4px #060E1C;
	transform: rotate(-45deg);
	bottom: 7%;
	right: 0;
	left: 0;
	margin: auto;
	animation: scroll_1 4s 0s forwards,scroll_2 3.5s 2s infinite none
}

@keyframes scroll_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scroll_2 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

ここでは、CSSの擬似要素とanimationプロパティを使用して、動く矢印を設置しています。

次項から一つずつ解説していきます。

CSSの擬似要素って？

CSSの擬似要素とは、セレクタに付加できるキーワードで、本来はHTMLである要素を、擬似的にCSSで作成するものです。

CSSで指定した特定のHTML要素に対し、何かしらのスタイルを指定する使い方をします。

具体例を見てみましょう。

例えば、以下のHTML要素（あいうえお）の最初の文字にだけCSSのスタイルを適用させたい場合です。

<div>
<p>あいうえお</p>
</div>

この場合は、以下の方法が考えられます。

See the Pen Untitled by sho (@sho_codepen) on CodePen.

これで「あいうえお」の「あ」だけ文字色を変更することができます。

しかし、変更したい部分を<span></span>で囲む方法は、コードが複雑で分かりづらくなり、非効率的と言わざるを得ません。

同じことを効率的に行えるのが、擬似要素を使った方法なのです。

ここでは「::first-letter」という擬似要素を使用します。これは、指定した要素の最初の文字にスタイルを適用するCSS擬似要素です。

「p」というセレクタ名の直後に擬似要素である「::first-letter」を付加します。

See the Pen 擬似要素2 by sho (@sho_codepen) on CodePen.

これによって、最初の方法と同様の結果が得られます。

CSSの擬似要素「::before」と「::after」

CSSの擬似要素には、「::before」と「::after」というものもあります。

これはそれぞれ、特定のHTML要素の直前と直後に別の要素を挿入できる擬似要素です。

例として、先程のHTML要素の直前に「わをん」という文字列を挿入してみます。

See the Pen Untitled by sho (@sho_codepen) on CodePen.

できましたね。

さて、矢印を描画するにはこの「::before」または「::after」を使用します。

擬似要素「::before」を使って矢印を描画する

今回は擬似要素「::before」を使って、矢印を描画していきます（「::after」でも構いません）。

改めて、擬似要素「::before」を使用した、矢印を描画するCSSを見てみましょう。

.appeal-content {
  padding-top: 70px;
  position: relative;
  text-align:center;
}

.appeal-content::before {
	display: inline-block;
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	border-bottom: solid 4px #060E1C;
	border-left: solid 4px #060E1C;
	transform: rotate(-45deg);
	bottom: 7%;
	right: 0;
	left: 0;
	margin: auto;
	animation: scroll_1 4s 0s forwards,scroll_2 3.5s 2s infinite none
}

「.appeal-content::before { }」の中に、「border-bottom」と「border-left」というプロパティがあるのがお分かりいただけるでしょうか。

これによって擬似的に矢印の線を描画しています。直接的に矢印を描画するプロパティが存在しないためです。

つまり幅と高さが40pxである空の「content」に対して、「solid 4px #060E1C」の「border-bottom」と「border-left」を適用し、「transform: rotate(-45deg);」によって左に45°回転させているわけです。

また、他のプロパティで矢印の位置等を調整しています。

その結果できあがった矢印がこちらです。