2023.04.14スポンサーリンクこんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの10回目です。前回はこちら、初回はこちら。アピールエリアに動く矢印を設置しました。一般的なファーストビューって、メッセージ性のある文字や画像、動画が出てきて、その下部にスクロールダウンを促す要素があることが多いですよね。当サイトのファーストビューは、スクロールダウンを促さないと、内容的に反射でブラウザバックされかねないため、スクロールダウンを促す要素の設置は必須です。いうわけで、動く矢印とリンクボタンを設置していきましょう。動く矢印のCSSコードです。子テーマのstyle.cssに追記します。}}ここでは、CSSの擬似要素とanimationプロパティを使用して、動く矢印を設置しています。次項から一つずつ解説していきます。CSSの擬似要素って?CSSの擬似要素とは、セレクタに付加できるキーワードで、本来はHTMLである要素を、擬似的にCSSで作成するものです。CSSで指定した特定のHTML要素に対し、何かしらのスタイルを指定する使い方をします。具体例を見てみましょう。以下のHTML要素(あいうえお)の最初の文字にだけCSSのスタイルを適用させたい場合です。<div><p>あいうえお</p></div>この場合は、以下の方法が考えられます。CodePen.これで「あいうえお」の「あ」だけ文字色を変更することができます。変更したい部分を<span></span>で囲む方法は、コードが複雑で分かりづらくなり、非効率的と言わざるを得ません。同じことを効率的に行えるのが、擬似要素を使った方法なのです。ここでは「::first-letter」という擬似要素を使用します。これは、指定した要素の最初の文字にスタイルを適用するCSS擬似要素です。「p」というセレクタ名の直後に擬似要素である「::first-letter」を付加します。CodePen.これによって、最初の方法と同様の結果が得られます。CSSの擬似要素「::before」と「::after」CSSの擬似要素には、「::before」と「::after」というものもあります。これはそれぞれ、特定のHTML要素の直前と直後に別の要素を挿入できる擬似要素です。例として、先程のHTML要素の直前に「わをん」という文字列を挿入してみます。CodePen.できましたね。矢印を描画するにはこの「::before」または「::after」を使用します。スポンサーリンク擬似要素「::before」を使って矢印を描画する今回は擬似要素「::before」を使って、矢印を描画していきます(「::after」でも構いません)。擬似要素「::before」を使用した、矢印を描画するCSSを見てみましょう。}」の中に、「border-bottom」と「border-left」というプロパティがあるのがお分かりいただけるでしょうか。これによって擬似的に矢印の線を描画しています。直接的に矢印を描画するプロパティが存在しないためです。rotate(-45deg);」によって左に45°回転させているわけです。他のプロパティで矢印の位置等を調整しています。その結果できあがった矢印がこちらです。これで完成ではありません。実際に現在設定されている矢印は何やら出てきたり消えたりしながら動いていますし、当記事の前の方では、animationプロパティを使用していると述べましたよね。いうわけで、次回はそちらについて解説していきます。LinkedInスポンサーリンクsho好きに生きる。「まずはこちら!」の追加こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの6回目です。前回はこちら、初回はこちら。アピールエリアの設定(3)こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの11回目です。前回はこちら、初回はこちら。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」の2回目です。WordPressの便利なプラグインの紹介です。子テーマのインストールこんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの7回目です。前回はこちら、初回はこちら。あかつきちゃんのイラスト2枚目こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの5回目です。前回はこちら、初回はこちら。あかつきちゃんのイラストこんにちは。サイト開発担当のshoです。今回からしばらく、これまでに行ったサイトの改変についてまとめようと思います。それでは行ってみよー!あかつきちゃんのイラス...サイト開発これまでのサイト開発まとめ(4)モバイル用ハンバーガーメニューのデザイン変更こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの4回目です。前回はこちら、初回はこちら。モバイル用ハンバーガーメニューの作成こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの3回目です。前回はこちら、初回はこちら。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自分の生き方プロフィール春眠shoサイト開発担当。絵はある程度、Webデザインは初心者。結局何のブログ?注意書きお問い合わせSearch。