ユーザー操作に関するCSS
更新日：2026-08-02
今回は、
- マウスを乗せたとき
- 入力欄を選択したとき
- ボタンを押せない状態にしたとき
など、ユーザーの操作に反応するCSSを学びます。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
├── index.html
└── css/
└── style.css
ユーザー操作とは？
Webサイトでは、見るだけでなく、ユーザーが操作する場面があります。
例えば、
- ボタンにマウスを乗せる
- 入力欄をクリックする
- チェックボックスを選ぶ
- 送信ボタンを押す
などです。
CSSでは、こうした操作の状態に合わせて見た目を変えることができます。
よく使う状態
代表的なものは以下です。
:hover:focus:active:disabled:checked
これらは、HTMLの要素が「今どんな状態か」を表します。
hover
hover は、マウスカーソルが乗っている状態です。
.button:hover {
background-color: #1d4ed8;
}
ボタンにマウスを乗せたときだけ、背景色を変えることができます。
.button {
background-color: #2563eb;
color: white;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
transition: 0.3s;
}
.button:hover {
background-color: #1d4ed8;
}
transition を一緒に使うと、色の変化がなめらかになります。
focus
focus は、入力欄などが選択されている状態です。
例えば、テキストボックスをクリックしたときに発生します。
.input:focus {
border-color: #2563eb;
outline: none;
}
実際の例です。
<input class="input" type="text" placeholder="名前を入力">
.input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
}
.input:focus {
border-color: #2563eb;
outline: none;
}
outline について
ブラウザでは、入力欄を選択すると外側に線が表示されることがあります。
これは outline です。
outline: none;
と書くと消すことができます。
ただし、完全に消すだけだと、どこを選択しているかわかりにくくなります。
そのため、消す場合は代わりに、
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
のように、選択中であることがわかる見た目を用意するのがおすすめです。
active
active は、ボタンなどを押している瞬間の状態です。
.button:active {
transform: scale(0.96);
}
押した瞬間に少し小さくすると、クリック感が出ます。
.button {
transition: 0.2s;
}
.button:active {
transform: scale(0.96);
}
disabled
disabled は、ボタンや入力欄が無効になっている状態です。
<button class="button" disabled>
送信できません
</button>
.button:disabled {
background-color: #ccc;
cursor: not-allowed;
opacity: 0.6;
}
cursor: not-allowed; を指定すると、マウスカーソルが禁止マークのようになります。
checked
checked は、チェックボックスやラジオボタンが選択されている状態です。
<input type="checkbox" class="check">
.check:checked {
accent-color: #2563eb;
}
accent-color を使うと、チェックボックスやラジオボタンの色を変更できます。
cursor
cursor は、マウスカーソルの形を変えるプロパティです。
よく使うものは以下です。
cursor: pointer;
cursor: default;
cursor: not-allowed;
cursor: text;
例えば、クリックできるボタンには pointer を使います。
.button {
cursor: pointer;
}
ユーザーに「ここはクリックできる」と伝えるために重要です。
まとめ
今回は、ユーザー操作に関するCSSを学びました。
:hoverはマウスが乗った状態:focusは入力欄などが選択された状態:activeは押している瞬間:disabledは操作できない状態:checkedは選択されている状態cursorでマウスカーソルの形を変えられる
CSSは、見た目を整えるだけでなく、ユーザーに「操作できる」「選択中」「押せない」などを伝える役割もあります。