CSS

波紋のアニメーションでセレクタを目立たせる

年月を選択する部分にふわっと波がひろがるアニメーションを付けてみました。

コードの詳細解説

/* == 波紋がふわっと広がるアニメーション == */


/* -- 出力したカレンダーのスタイル -- */
.mannaka {
    background-color: #d7f3fd;   /* カレンダーの背景色 */
    max-width: 720px;   /* カレンダーの最大幅 */
    width: 100%;   /* カレンダー要素の幅を親要素の100%に */
}
.entry-content table {
    display: table;   /* カレンダーが幅いっぱいに広がる */
    z-index: 2;   /* 重なりの配置（波紋より前面に出してクリックの邪魔させない） */
}

/* -- テキストの指定「select month」 -- */
.hamon-hirogaru {
    position: relative;   /* 相対位置指定 */
    display: inline-block;   /* インラインブロック要素として表示 */
    margin: 0;   /* マージンを0に */
    text-decoration: none;   /* テキストの下線を削除 */
    color: #333;   /* テキストの色*/
    outline: none;   /* アウトラインを削除 */
    font-size: 15px;   /* フォントサイズ */
    z-index: 3;   /* 重なりの配置（数字が大きいほど前面） */
    pointer-events: none;   /* マウスイベントを無効化 */
}

/* -- 波紋アニメーションのスタイル指定 -- */
.hamon-hirogaru:after {
    display: block;   /* ブロック要素として表示 */
    position: absolute;   /* 絶対位置指定 */
    top: calc(50% + 20px);   /* 上からの位置を計算して指定 */
    left: 50%;   /* 左からの位置を中央に */
    width: 50%;   /* 幅を50%に */
    height: 100%;   /* 高さを100%に */
    border-radius: 50%;   /* 形を円状に */
    transition: opacity linear 0.8s;   /* 透明度 */
    content: '';   /* これが無いと波紋は現れない */
    z-index: 1;   /* 重なり配置 */
}

/* "hamon-hirogaru"クラスの疑似要素「::after」に「pulseMotion」アニメーションを適用 */
.hamon-hirogaru:after {
    animation: pulseMotion 2.8s linear infinite;
}

/* -- アニメーションの動きを指定（時間の経過で波紋のスケールを大きくしています。） -- */
@keyframes pulseMotion {
    0% {
        transform: translate(-50%, -50%) scale(1, 1);   /* アニメーション開始時の波紋のスケール（1x） */
        background-color: rgba(170, 143, 123, 0.4);   /* アニメーション開始時の背景色 */
    }
    100% {
        transform: translate(-50%, -50%) scale(6.5, 6.5);   /* アニメーション終了時の波紋のスケール（6.5x）
        background-color: rgba(170, 143, 123, 0);   /* アニメーション終了時の背景色 */
    }
}
/* この↑アニメーションはhamon-hirogaruクラスの疑似要素 ::after に適用されています。*/
/* したがって、hamon-hirogaru要素がページ内に存在する限り、無限に繰り返されます。*/

補足

インラインブロック要素

display: inline-block; スタイルは、要素を「インラインブロック要素」として表示するためのものです。これにより、要素はテキストの流れに従って行内に配置されつつも、ブロック要素のように幅や高さを設定できるようになります。具体的な意味は次の通りです：

インラインブロック要素: インラインブロック要素は、行内要素（テキストなど）とブロック要素（div や p など）の中間的な役割を果たします。行内要素のように、隣接する要素と横に配置され、一行に複数の要素を配置できます。しかし、ブロック要素のように、幅や高さを設定でき、改行を含むブロックのような配置も可能です。
テキストと要素の組み合わせ: このスタイルは、テキストと要素（例: リンクやボタン）を横並びに配置したい場合に便利です。要素がブロック要素の場合、改行が挿入されてしまうため、横に並べることが難しい場合があります。しかし、インラインブロック要素を使用すると、要素は横に配置されつつ、幅や高さを調整できます。

具体的なコード例として、display: inline-block; スタイルが適用された要素は、行内に配置されるため、隣接する要素と同じ行に表示される一方で、その要素自体の幅や高さを設定できるようになります。このスタイルを使用することで、要素のデザインや配置を細かく制御できます。

calc(% + px)

top: calc(50% + 20px); この指定関数は、要素の上からの位置を計算して指定するためのものです。以下は詳細な説明です：

top プロパティ :
top プロパティは、要素の上からの位置を指定するために使用されます。このプロパティは、要素の上端が親要素の上端からどれだけ離れているかを設定します。
calc() 関数 :
calc() 関数は、算術演算を使用して値を計算するために使用されます。この場合、calc(50% + 20px) は、現在の要素の親要素に対する上からの位置を、親要素の高さの中央に配置するように計算しています。
- 50%: この部分で親要素の高さの中央を表します。要素が親要素の高さに対して中央に配置されるようになります。
- + 20px: これは追加のオフセットを指定しています。50% に 20px を加えることで、要素が中央から上に20ピクセルのオフセットで配置されます。

したがって、このスタイルを使用することで、要素は親要素の中央から上に20ピクセル離れた位置に配置されます。このようなスタイルを使うことで、要素の位置を細かく調整できます。

適用させたHTMLのコード例

前ページでご紹介したカレンダーに適用させました。良かったら、data-archive-urlの部分をご自身のブログのアドレスに置き換えてご利用ください~

<div id="menubar">
  <!-- アーカイブか、カレンダーか -->
  <div class="hatena-module hatena-module-archive" data-archive-type="calendar" data-archive-url="https://<!-- 自分のURL -->/archive">
    <div class="hamon-hirogaru1 hamon-hirogaru2 hatena-module-title"><!-- 任意のタイトル --></div>
    <div class="mannaka hatena-module-body"></div>
  </div>
</div>