目次ボタン：CSSデザイン・アニメーション

記事の概要

この記事では、目次ボタンのデザインとアニメーションに関するCSSとJavaScriptコードが提供されています。まず、CSSコードではボタンの通常のスタイルやアクティブな状態のスタイル、ホバー状態のスタイルなどが詳細に設定されています。ボタンにはFont Awesomeアイコンが表示され、ボタンがアクティブな状態でクリックされたときにはスタイルが変更されます。

また、記事では目次のスタイルも提供されており、初期状態では画面上部から非表示に配置され、アニメーションを用いて表示される際にスタイリングが変更されます。

JavaScriptコードではボタンのクリックイベントに対して、ボタンのスタイル変更と目次の表示/非表示切り替えのロジックが提供されています。

このコードを使用することで、目次ボタンをクリックした際にスタイリッシュなアニメーションとデザインが適用され、目次の表示/非表示を切り替えることができます。

HTMLコード

ボタン

<button id="toggle-button" class="nomal-style"></button>

CSSコード

ボタン

/* 通常のボタンスタイル */
button#toggle-button {
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 135px; 
  transform: translate(-50%, -50%);
  width: 230px;
  height: 40px;
  border-radius: 15px;
  text-shadow: 1px 1px #000;
  color: rgb(160, 160, 128);
  border: solid 2px;
  border-left-color: rgb(192, 192, 192);
  border-top-color: rgb(192, 192, 192);
  border-right-color: rgb(64, 64, 64);
  border-bottom-color: rgb(64, 64, 64);
  cursor: pointer; /* マウスカーソルをポインターに変更 */
  box-shadow: rgb(96, 96, 96) 0px 4px 0 1px;
  background-image: linear-gradient(to right, cadetblue, cadetblue 50%, rgb(250, 250, 250) 50%, rgb(250, 250, 250)); /* 背景にグラデーションを設定 */
  background-size: 200% 100%; /* 背景画像サイズ */
  background-position: right bottom; /* 背景画像の位置 */
  transition: ease .5s, background-position 0.5s; /* アニメーション効果 */
}

/* ボタンがアクティブな状態（クリック中）のスタイル */
button#toggle-button:active {
  background-image: linear-gradient(to right, cadetblue, cadetblue 50%, cadetblue 50%, cadetblue); /* 背景のグラデーションを変更 */
  background-size: 200% 100%;
  background-position: right bottom;
  transition: ease .5s, background-position 0.5s;
  width: 207px; /* ボタンの幅を0.9倍に縮小（計算値） */
  height: 36px; /* ボタンの高さを0.9倍に縮小（計算値） */
  box-shadow: rgb(130, 130, 130) 0px 4px 0 6.75px; /* ボックスシャドウの色と拡がりを変更 */
  font-size: .9em; /* フォントサイズを0.9倍に縮小 */
  color: #fff; /* テキストカラーを変更 */
}

/* active-styleクラスが適用された時のスタイル */
button#toggle-button.active-style {
  background-image: linear-gradient(to right, rgb(250, 250, 250), rgb(250, 250, 250) 50%, cadetblue 50%, cadetblue);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: ease .5s, background-position 0.5s;
  color: #fff;
}

/* ホバー状態のスタイル */
button#toggle-button:hover {
  opacity: .8; /* ホバー時の透明度を0.8に変更（デフォルト値は1） */
}

/* active-styleクラスが適用された時のホバー状態のスタイル */
button#toggle-button.active-style:hover {
  background-position: left bottom; /* 背景画像の位置を変更 */
  color: rgb(160, 160, 128); /* テキストカラーを変更 */
}

/* 疑似要素beforeでボタン内にFont Awesomeアイコンを表示 */
button#toggle-button.nomal-style::before {
  content: '\f518';
  font-family: 'font awesome 6 free';
  font-weight: 600; /* フォントの太さ ※solidの場合、600以上に指定しないとアイコンが表示されない */
  color: khaki; /* フォント色 */
  margin-right: 5px; /* 右に余白 */
}

/* 疑似要素afterでボタン内にテキストを表示 */
button#toggle-button.nomal-style::after {
  content: 'Contents OPEN';
  font-family: 'Marcellus';
  font-weight: 400;
}

/* active-styleクラスが適用された時にアイコンを変更 */
button#toggle-button.active-style::before {
  content: '\f02d';
  font-family: 'font awesome 6 free';
  font-weight: 600;
  color: khaki;
  margin-right: 5px;
}

/* active-styleクラスが適用された時にテキストを変更 */
button#toggle-button.active-style::after {
  content: 'Contents CLOSE';
  font-family: 'Marcellus';
  font-weight: 400;
}

/* nomal-styleのボタンがホバー状態のスタイル */
button#toggle-button.nomal-style:hover {
  background-position: left bottom; /* 背景画像の位置を変更 */
  color: #fff; /* テキストカラーを変更 */
}

/* active-styleのボタンがホバー状態のスタイル */
button#toggle-button.active-style:hover {
  background-position: left bottom; /* 背景画像の位置を変更 */
  color: rgb(160, 160, 128); /* テキストカラーを変更 */
}

目次

/* 初期状態 */
.table-of-contents {
    position: fixed;
    top: calc(-100% - 100px);  /* 初期位置は画面上部から非表示 */
    left: 20px;
    transition: top 0.5s ease;  /* 位置変更にアニメーションを適用 */
    background: aliceblue;
    min-width: 336px;  /* 最小幅 */
    max-height: 40vh;  /* 最大高さは画面高さの40%まで */
    overflow-y: scroll;  /* 縦のスクロールバーを表示 */
    z-index: 1;
    opacity: .3;  /* 透明度を初期状態で0.3に設定 */
}

/* before要素（"Contents"） */
.table-of-contents::before {
    content: 'Contents';
    background: antiquewhite;
    border: solid 1px dimgray;
    border-radius: 0 0 7px 7px;
    text-align: center;
    display: block;  /* ブロック要素として表示 */
    position: relative;  /* 相対位置指定 */
    top: -17px;  /* 上に17pxずらす */
}

/* 目次が表示されたときのスタイル */
.table-of-contents.visible {
    top: 50%;  /* 画面縦中央に配置 */
    transform: translateY(-100%);  /* 要素100%分、上に移動 */
    margin-top: -37px;  /* 上に37px（ボタン高さ分）ずらす */
    opacity: 1;  /* 透明度を100%に */
}

JavaScriptコード

// ボタン要素を "toggle-button" というIDで取得
var button = document.getElementById("toggle-button");

// ボタンがクリックされたときのイベントリスナーを追加
button.addEventListener("click", function() {
    // もしボタンが "nomal-style" クラスを持っている場合
    if (button.classList.contains("nomal-style")) {
        // "nomal-style" クラスを削除
        button.classList.remove("nomal-style");
        // "active-style" クラスを追加
        button.classList add("active-style");
        // 目次を表示
        tableOfContents.classList.add("visible");
    } else {
        // それ以外の場合
        // "active-style" クラスを削除
        button.classList.remove("active-style");
        // "nomal-style" クラスを追加
        button.classList.add("nomal-style");
        // 目次を非表示
        tableOfContents.classList.remove("visible");
    }
});

// 目次要素を "table-of-contents" というクラスで取得
const tableOfContents = document.querySelector(".table-of-contents");

おわりに

この記事では、ボタンのCSSデザインとスムーズなアニメーションを実現するためのCSS・JavaScriptを使用したユーザーインタラクションの実装方法に焦点を当てました。ボタンの状態別スタイルや目次の表示／非表示切り替えなど、設定について詳細に説明しました。これを利用して、自身のウェブサイトやブログに目次ボタンを導入してみてください。