過去バージョン

「その他」の CSS プロパティとは

CSS のプロパティは数百種類あり、本サイトでは主要なカテゴリ（色 / フォント / レイアウト / テキスト / 背景 / ボーダー）に分類しています。本ページではそれ以外のカテゴリに属する、よく使われる「便利系プロパティ」をまとめます。

1. cursor — マウスカーソル形状

.btn      { cursor: pointer; }       /* 指マーク */
.loading  { cursor: wait; }          /* 砂時計 */
.help     { cursor: help; }          /* クエスチョン付き */
.disabled { cursor: not-allowed; }   /* 禁止マーク */
.resize   { cursor: nwse-resize; }   /* リサイズ矢印 */
.grab     { cursor: grab; }          /* つかむ手 */

/* カスタム画像 */
.custom { cursor: url('cursor.png'), auto; }

2. opacity — 透明度

.faded   { opacity: 0.5; }  /* 半透明 */
.invisible { opacity: 0; }  /* 完全透明（でもイベントは取れる） */

/* hover で フェード */
.btn { transition: opacity 0.2s; }
.btn:hover { opacity: 0.7; }

opacity は要素全体（子要素含む）を透過させます。0（完全透明）〜 1（不透明）。子要素だけ別の透明度にしたい場合は rgba() や background-color の alpha を使います。

3. visibility — 表示 / 非表示

.hidden  { visibility: hidden; }  /* 場所は残るが見えない */
.gone    { display: none; }       /* 場所も消える */
.show    { visibility: visible; }

4. overflow — はみ出し処理

.box-visible { overflow: visible; }  /* デフォルト、はみ出して表示 */
.box-hidden  { overflow: hidden; }   /* はみ出し部分を隠す */
.box-scroll  { overflow: scroll; }   /* 常にスクロールバー */
.box-auto    { overflow: auto; }     /* 必要なときだけスクロールバー */

/* 縦横別 */
.box { overflow-x: auto; overflow-y: hidden; }

/* テキスト切り詰め（…表示） */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. z-index — 重なり順

.modal   { position: fixed; z-index: 1000; }
.tooltip { position: absolute; z-index: 100; }
.header  { position: sticky; z-index: 50; }
.content { position: relative; z-index: 1; }

z-index はpositioned 要素（position: static 以外）でのみ効きます。値が大きいほど手前。負の値も可。スタッキングコンテキストの概念と合わせて学習が必要です。

6. filter — フィルタエフェクト

.blur      { filter: blur(5px); }
.gray      { filter: grayscale(100%); }
.bright    { filter: brightness(1.5); }
.dark      { filter: brightness(0.5); }
.contrast  { filter: contrast(1.5); }
.invert    { filter: invert(1); }
.sepia     { filter: sepia(1); }
.shadow    { filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5)); }

/* 複数組み合わせ */
.fancy { filter: grayscale(50%) blur(2px) brightness(1.2); }

7. transition — なめらかな変化

.btn {
  background: blue;
  transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
  background: red;
  transform: scale(1.05);
}

/* 全プロパティを対象に */
.all { transition: all 0.3s; }

8. transform — 変形

.rotate    { transform: rotate(45deg); }
.scale     { transform: scale(1.5); }
.translate { transform: translate(20px, 50px); }
.skew      { transform: skew(20deg, 0); }

/* 複数組み合わせ（順序で結果が変わる） */
.combo { transform: translate(50px, 0) rotate(30deg) scale(1.2); }

/* 3D */
.flip { transform: rotateY(180deg); }

9. animation — アニメーション

@keyframes slidein {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.item {
  animation: slidein 0.5s ease-out;
}

/* 短縮プロパティ: name duration timing-function delay iteration direction */
.bounce {
  animation: bounce 1s ease-in-out infinite alternate;
}

10. CSS カスタムプロパティ（変数）

:root {
  --main-color: #3498db;
  --spacing: 1rem;
  --max-width: 1200px;
}

.button {
  background: var(--main-color);
  padding: var(--spacing);
}

.container {
  max-width: var(--max-width);
}

/* テーマ切替 */
[data-theme="dark"] {
  --main-color: #2980b9;
  --bg: #1e1e1e;
}

その他知っておくと便利

関連

• cursor — マウスカーソル形状
• opacity / visibility / display — 表示制御
• overflow — はみ出し制御
• z-index — 重なり順
• transition / transform / animation — 動き
• カスタムプロパティ — CSS 変数