【CSSだけで実装】JS不要！コピペで使えるインタラクティブUIパーツ5選

プロジェクト

こんにちは！かたすけです。

「Webサイトにもう少し動きをつけたいな…でも、JavaScriptを書くのはまだ難しそう…」

Web制作の学習を進めていると、そんな風に感じることはありませんか？

実は、多くの人がJavaScriptが必須だと思っているようなリッチな動きも、CSSだけで実装できてしまうことが多々あります。CSSのポテンシャルを最大限利用すれば、あなたのサイトはもっと魅力的で、ユーザーにとって使いやすいものになります！

この記事では、Web制作初心者の方でもコピペですぐに試せる、CSSだけで作るインタラクティブなUIパーツを5つ厳選してご紹介します。

この記事を読み終える頃には、あなたは「CSSってこんなことまで出来るんだ！」と驚き、CSSをもっと好きになっているはずです。

紹介するインタラクティブUIパーツ

  1. ふわっと表示されるツールチップ
  2. クリックで開閉するアコーディオンメニュー
  3. タブ切り替えコンテンツ
  4. おしゃれなカスタムチェックボックス
かたすけ
かたすけ

では、早速見ていこう！

これから紹介するコードを、自分のエディタにコピペして、実際に確認しながら読んでくださいね！エディタの準備ができていない方はこの記事へ！↓

【完全版】もう迷わない！ウェブ制作初心者のためのVS Codeインストールガイド
ウェブ制作の第一歩は、使いやすいツール選びから！この記事では、初心者向けに人気の無料テキストエディタ「VS Code」の魅力と、Windows・Macそれぞれのインストール方法を徹底解説。HTML/CSSの学習を快適にスタートさせましょう。
katasuke-web.com
2025.09.13

ふわっと表示されるツールチップ

アイコンや専門用語にマウスカーソルを乗せたとき、補足説明がふわっと出てくるUIです。ユーザーを助ける親切な機能を、CSSだけで簡単に実装できます。

どんな時に使える？

  • サイト内のアイコンの説明
  • 専門用語の簡単な解説
  • 入力フォームの補足情報

HTMLコード

<div class="tooltip-container">
  ホバーしてね
  <span class="tooltip-text">これがツールチップです！</span>
</div>

CSSコード

.tooltip-container {
  position: relative; /* ツールチップの位置の基準点になる */
  display: inline-block;
  cursor: pointer;
  border-bottom: 1px dotted #333;
}

.tooltip-text {
  /* ① 最初は非表示に */
  visibility: hidden;
  opacity: 0;

  /* ② 見た目のスタイリング */
  width: 160px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  
  /* ③ 位置の指定 */
  position: absolute;
  z-index: 1;
  bottom: 125%; /* 親要素の上側に配置 */
  left: 50%;
  margin-left: -80px; /* 中央揃えにするためのテクニック */

  /* ④ ふわっと表示させるための準備 */
  transition: opacity 0.3s ease;
}

/* 矢印（吹き出しのしっぽ）の作成 */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* 親要素にホバーしたときにツールチップを表示 */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

✨ ポイント解説

このコードの魔法は、親要素(.tooltip-container)にposition: relative;を、子要素であるツールチップ(.tooltip-text)にposition: absolute;を指定している点です。これにより、ツールチップは親要素を基準に自由な位置に配置できます。

普段はopacity: 0;で見えなくしておき、親要素が:hoverされた時だけopacity: 1;に変化させます。transitionプロパティが、この変化を「ふわっ」とした滑らかなアニメーションに見せてくれているのです。

クリックで開閉するアコーディオンメニュー

FAQ（よくある質問）ページで大活躍する、クリックで項目が開閉するUIです。「クリック」という動作が入るためJavaScript必須と思われがちですが、「チェックボックスハック」というテクニックを使えばCSSだけで実現可能です。

どんな時に使える？

  • FAQページ
  • Q&Aコンテンツ
  • 折りたたみ式の詳細メニュー

HTMLコード

<div class="accordion">
  <input type="checkbox" id="accordion-1" class="accordion-input" />
  <label for="accordion-1" class="accordion-label">質問1：これはCSSだけで動きますか？</label>
  <div class="accordion-content">
    <p>はい、これは「チェックボックスハック」というテクニックを使い、CSSだけで実装されています。</p>
  </div>
</div>

CSSコード

.accordion-input {
  display: none; /* チェックボックス本体は隠す */
}

.accordion-label {
  display: block;
  padding: 15px;
  background: #f0f0f0;
  cursor: pointer;
  font-weight: bold;
}
.accordion-label::after {
  content: '▼';
  float: right;
}

.accordion-content {
  /* 最初はコンテンツを閉じておく */
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}

/* チェックボックスがONになったら（:checked）... */
.accordion-input:checked + .accordion-label::after {
  content: '▲';
}

.accordion-input:checked ~ .accordion-content {
  /* ...隣接するコンテンツを開く */
  max-height: 200px; /* 十分な高さを指定 */
  padding: 15px;
  border-top: 1px solid #ddd;
}

✨ ポイント解説

これがチェックボックスハックです！

  1. <input type="checkbox">本体はdisplay: none;で見えなくします。
  2. <label>のfor属性と<input>のidを紐付けることで、ラベルをクリックするとチェックボックスがON/OFFされるようにします。
  3. :checked疑似クラスと隣接兄弟セレクタ(+) や一般兄弟セレクタ(~) を使います。「チェックボックスがON(:checked)になったら、その弟要素である.accordion-contentのスタイルを変えなさい」という命令をCSSで書いているのです。
  4. コンテンツの開閉はmax-heightを0から任意の値に変化させています。display: none;からblock;に変える方法だとtransitionが効かないため、max-heightを使うのが滑らかなアニメーションを実装するコツです。

タブ切り替えコンテンツ

省スペースで多くの情報を見せることができるタブUI。これもチェックボックスハックの応用である「ラジオボタンハック」で実装できます。

どんな時に使える？

  • 商品やサービスの詳細情報の分類
  • 料金プランの切り替え
  • ギャラリーのカテゴリ分け

HTMLコード

<div class="tabs">
  <input type="radio" id="tab1" name="tab-group" class="tab-input" checked>
  <label for="tab1" class="tab-label">タブ1</label>
  
  <input type="radio" id="tab2" name="tab-group" class="tab-input">
  <label for="tab2" class="tab-label">タブ2</label>

  <div class="tab-content" id="content1">コンテンツ1の内容です。</div>
  <div class="tab-content" id="content2">コンテンツ2の内容です。</div>
</div>

CSSコード

.tab-input { display: none; }
.tab-content { display: none; } /* 全てのコンテンツを一旦非表示 */

.tab-label {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #f0f0f0;
}

/* 選択されているタブのスタイル */
.tab-input:checked + .tab-label {
  background: #fff;
  border-bottom: 1px solid #fff;
}

/* 選択されているタブに対応するコンテンツだけを表示 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}

✨ ポイント解説

アコーディオンとの違いは、<input type="checkbox">の代わりに<input type="radio">を使っている点です。name属性を同じにしたラジオボタンは、グループ内で1つしか選択できません。この性質を利用して、1つのタブが選ばれたら他のタブは非選択状態になる、というタブUIの挙動を実現しています。

おしゃれなカスタムチェックボックス

ブラウザが用意するデフォルトのチェックボックスは、サイトのデザインに合わないことが多いですよね。これもCSSだけで、サイトのトンマナに合ったおしゃれなデザインに作り変えることができます。

どんな時に使える？

  • 同意確認のチェックボックス
  • アンケートフォーム
  • 設定画面のON/OFFスイッチ

HTMLコード

<label class="custom-checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  利用規約に同意する
</label>

CSSコード

.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.custom-checkbox input {
  display: none; /* 元のチェックボックスは隠す */
}
.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 3px;
  margin-right: 8px;
  position: relative;
}

/* チェックマークの作成 */
.checkmark::after {
  content: "";
  position: absolute;
  display: none; /* 最初は非表示 */
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* チェックされたらスタイルを変更 */
.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
  border-color: #2196F3;
}
.custom-checkbox input:checked ~ .checkmark::after {
  display: block; /* チェックマークを表示 */
}

✨ ポイント解説

ここでも、元の<input>を隠すのがポイントです。代わりに空の<span>要素（.checkmark）を用意し、それをCSSで四角いボックスのようにデザインします。

チェックが入ったかどうかは:checkedで判定し、チェックが入ったら背景色を変えたり、非表示にしていた::after（チェックマーク✔）を表示させたりすることで、カスタムデザインを実現しています。

まとめ：CSSの可能性は無限大！

いかがでしたか？

今回ご紹介した5つのUIパーツは、すべてHTMLとCSSだけで作られています。

  • :hover や :checked などの疑似クラス
  • ::before や ::after などの疑似要素
  • transition や transform などのアニメーション関連プロパティ
  • そして、チェックボックス（ラジオボタン）ハック

これらのテクニックを組み合わせるだけで、JavaScriptを使わなくてもWebサイトを豊かに、そしてインタラクティブにすることができます！

まずはこの記事のコードをコピペして、あなたのサイトで試してみてください。そして、色やサイズ、アニメーションの速度などを自分なりにカスタマイズしてみましょう。そこから、CSSのさらなる面白さと奥深さに気づくはずです。

他にも、すぐに実践できるプロジェクト記事を複数書いているので、ぜひ見ていってくださいね！

タイトルとURLをコピーしました