ホームぺージ関連HTML初心者講座HTML中級者講座カメラ・写真関連失敗と経験その他

アフィリエイト広告を利用しております。
参考サイトの記載がある場合はそちらの方がより詳しく記載説明がされているのでぜひそちらもご覧ください。
そのままコピペしても反映されないものもあります。サイトごとに変えないといけない箇所がありますので修正してください。

CSS HTML

JavaScript不要！CSSだけで作るインタラクティブなUI

近年、WebサイトのUIデザインはますますインタラクティブで魅力的なものになっています。
しかし、インタラクティブな動作を実現するにはJavaScriptが必須だと思っていませんか？
実は、CSSだけで十分に実現できることも多いのです！
この記事では、CSSだけで作れるいくつかのインタラクティブなUIデザインを紹介します。
コードをコピペするだけで使えるので、ぜひ試してみてください！

1. ホバーで動くカード

カードのホバー効果は、よく使われるデザインの1つです。CSSだけで、カードがふわっと浮き上がるアニメーションを作ることができます。

Hover Me!

This is an interactive card.

HTMLコード
1
2
3
4
<div class="hover-card">
  <h3>Hover Me!</h3>
  <p>This is an interactive card.</p>
</div>
CSSコード
1
2
3
4
5
6
7
8
9
10
11
12
13
.hover-card {
  width: 300px;
  padding: 20px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 
.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

2. タブ切り替え

タブの切り替えは、ナビゲーションやコンテンツ整理によく使われるパターンです。CSSの :checked 擬似クラスを使えば、JavaScriptなしで実現できます。

This is the content for Tab 1.
This is the content for Tab 2.
HTMLコード
1
2
3
4
5
6
7
8
<div class="tabs-horizontal">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1">Tab 1</label>
  <input type="radio" id="tab2" name="tab">
  <label for="tab2">Tab 2</label>
  <div class="content" id="content1">This is the content for Tab 1.</div>
  <div class="content" id="content2">This is the content for Tab 2.</div>
</div>
CSSコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* タブ全体のスタイル */
.tabs-horizontal {
  margin: 0 auto;
}
 
/* 横並びのタブ */
.tabs-horizontal label {
  display: inline-block;
  width: 50%; /* 各タブを均等に */
  padding: 10px 20px;
  text-align: center;
  cursor: pointer;
  background: #f0f0f0;
  border: 2px solid #ddd;
  font-weight: bold;
  transition: background 0.3s;
  border-radius: 5px 5px 0px 0px;
  padding: 10px 20px 10px 20px !important;
  border-bottom: initial;
}
 
/* ラジオボタンを非表示 */
.tabs-horizontal input[type="radio"] {
  display: none;
}
 
/* 選択されたタブのスタイル */
.tabs-horizontal input[type="radio"]:checked + label {
  background: #cf5f5f;
  border: 2px solid #cf5f5f;
  border-bottom: initial;
}
 
/* コンテンツのデフォルトは非表示 */
.tabs-horizontal .content {
  display: none;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-top: none;
}
 
/* 選択されたタブに対応するコンテンツを表示 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

3. アコーディオンメニュー

コンテンツを縦に展開・収納できるアコーディオンメニューは、動きのあるUIの定番です。

This is the content for Section 1.
This is the content for Section 2.
HTMLコード
1
2
3
4
5
6
7
8
9
<div class="accordion">
  <input type="checkbox" id="section1">
  <label for="section1">Section 1</label>
  <div class="content">This is the content for Section 1.</div>
 
  <input type="checkbox" id="section2">
  <label for="section2">Section 2</label>
  <div class="content">This is the content for Section 2.</div>
</div>
CSSコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.accordion input[type="checkbox"] {
  display: none;
}
 
.accordion label {
  display: block;
  padding: 10px;
  background: #6a11cb;
  color: white;
  border: 1px solid #ddd;
  cursor: pointer;
}
 
.accordion .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f9f9f9;
  padding: 0 10px;
}
 
.accordion input[type="checkbox"]:checked + label + .content {
  max-height: 100px;
}

4. ローディングスピナー

Webアプリでよく見かけるローディングスピナーも、CSSだけで簡単に作れます。

HTMLコード
1
<div class="spinner"></div>
CSSコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #6a11cb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
 
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

CSSだけでここまでのインタラクティブなUIを実現できることに驚きませんか？
JavaScript不要で軽量かつ簡単に実装できるのが魅力です。
今回紹介したコードはすべてコピペしてそのまま使えます。
デザインをカスタマイズして、自分のWebサイトにぜひ活用してください！

【Amazon】ちゃんと知っておきたい人のHTML/CSS完全入門: HTML習得の最短講座！1日３０分で楽しく学ぼう！ Kindle版

おすすめ記事

1
クラシックエディタ用のプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤 ...
2
クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない？ この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
3
Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた
アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

-CSS, HTML
-

S