ユーザーインターフェース関連のCSSプロパティ

Articles

CSS入門

この記事ではユーザーインターフェース関連のCSSプロパティについて説明します。

contentやcursor、pointer-events、resizeプロパティについて、利用用途や記述の仕方を学べます。

YouTube Video

プレビュー用のHTML

css-ui.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</html>

ユーザーインターフェース関連

`content`プロパティ

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

contentプロパティは、擬似要素（主に::beforeや::after）に対してコンテンツを追加するために使用されます。このプロパティは、要素の内部に直接表示されないテキストや画像、カウンターなどを定義する際に使われます。主な役割は、HTMLに直接記述しない装飾的なコンテンツや補助情報をスタイルシートで制御できる点です。

この例では、要素の前に"Note: "が、後ろに"(End)"が追加されます。それぞれは擬似要素の::beforeと::afterを使用しています。

`content`プロパティの値

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

contentプロパティには次のような値を指定できます。

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}

テキスト
- 文字列を直接ダブルクォート("")で囲んで指定し、テキストを追加します。

1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}

画像
- url()関数を使って画像を挿入できます。

 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}

カウンター
- counter()関数を使ってカウンターを表示します。

1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}

属性
- attr()関数を使ってHTML要素の属性値を表示できます。たとえば、title属性を表示することができます。

1/* None */
2.content-none::before {
3    content: none;
4}

none
- コンテンツを何も表示しないことを指定します。デフォルトの状態です。

使用上の注意

contentプロパティを利用する際には、次のような点に注意する必要があります。

contentプロパティは、通常の要素ではなく擬似要素にのみ適用されます。
DOMには追加されないため、JavaScriptで直接操作することはできません。
レイアウトの影響を与える場合があるので、装飾や補足情報の表示に使うのが一般的です。

`cursor`プロパティ

cursorプロパティは、要素の上にマウスポインターを置いたときに表示されるカーソルの種類を指定するために使用されます。さまざまなカーソルスタイルを指定でき、ユーザー体験を向上させるためにインタラクティブな要素に適用することがよくあります。

主なカーソルタイプ

カーソルの種類として、次のような値を指定できます。

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }

`default`

defaultは、通常の矢印カーソル（ブラウザの標準のカーソル）です。

`pointer`

pointerは、リンクの上にカーソルを置いたときに表示される手の形のカーソルです。

`text`

textは、テキストを選択できるエリアで表示されるI字形のカーソルです。

`move`

- `move`は、要素をドラッグ可能な場合に使用される十字形のカーソルです。

`crosshair`

crosshairは、精密な選択を行うための十字線カーソルです。

`not-allowed`

not-allowedは、使用できない領域や操作が禁止されている場合のカーソルです。

`help`

helpは、ヘルプ情報を提供できる要素の上に置いたときに表示される疑問符付きのカーソルです。

`wait`

waitは、処理中の状態を表す砂時計や円形カーソルです。

`progress`

progressは、処理中の操作を表すカーソルです。ただし、ユーザーが他の操作を行える状態を示します。

`grab`

grabは、ドラッグ可能な要素を掴むためのカーソルです。

`grabbing`

grabbingは、要素をドラッグ中の状態を示すカーソルです。

`resize`

resizeは、ウィンドウや要素をリサイズできる場合に使用されるカーソルです。方向によって異なる種類があります。

n-resize: 上方向のリサイズカーソルです。
s-resize: 下方向のリサイズカーソルです。
e-resize: 右方向のリサイズカーソルです。
w-resize: 左方向のリサイズカーソルです。
ne-resize: 右上方向のリサイズカーソルです。
nw-resize: 左上方向のリサイズカーソルです。
se-resize: 右下方向のリサイズカーソルです。
sw-resize: 左下方向のリサイズカーソルです。

カスタムカーソル

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

url() を使ってカスタムカーソルを指定することも可能です。

この例では、custom-cursor.pngがカーソルの画像ファイルです。もしその画像が利用できない場合は、autoでブラウザのデフォルトカーソルが表示されます。

まとめ

cursor プロパティは、ユーザーが要素上でどのカーソルを表示するかを指定します。
用途に応じた多様なカーソルスタイルがあり、カスタムカーソルも設定可能です。
インタラクティブな要素や制限された操作に応じて、適切なカーソルスタイルを選ぶことで、より使いやすいUIを提供できます。

`pointer-events`プロパティ

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

pointer-eventsプロパティは、要素がマウスやタッチ、スタイラスなどのポインタデバイスに対するイベントをどのように処理するかを制御するために使われます。通常、要素がユーザーからクリックやホバーされる場合、その要素がポインタイベントを受け取りますが、このプロパティを使うことで、その挙動を変更できます。

pointer-events-autoクラスでは、pointer-eventsプロパティにautoを指定しており、通常のクリックやホバーイベントが処理されます。要素がクリック可能であるため、クリックするとメッセージが表示されます。
pointer-events-autoクラスでは、pointer-eventsプロパティにnoneを指定しており、要素はポインタイベントを受け取りません。cursorプロパティにpointerを設定していても、マウスカーソルは変わらず、要素の下にある他の要素がクリック可能になります。

値の種類

pointer-eventsプロパティには、要素がポインタイベントを受け取るかどうか、またはどのように受け取るかを指定します。次の値を指定できます。

`auto`

autoはデフォルト値で、要素は通常どおりポインタイベントを受け取ります。

`none`

noneを指定すると、要素はポインタイベントを受け取りません。要素はクリック、ホバーなどのインタラクションを無効にしますが、その要素の下にある他の要素はポインタイベントを受け取ることができます。

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;

これらの値は、主にSVG要素に対して使用されます。それぞれの値は、要素の特定の部分（塗りつぶし、ストロークなど）がポインタイベントに反応するかを制御します。通常の HTML 要素ではあまり使用されません。

使い方のポイント

pointer-eventsプロパティの使い方として以下のような例があります。

無効化したい要素の選択
- none値は、ボタンやリンクなどの要素を一時的に無効化したい場合に便利です。
重ねた要素での使用
- positionプロパティにabsoluteを指定した場合やz-indexプロパティで要素を重ねる場合、上にある要素のpointer-eventsプロパティにnoneを設定することで、下の要素にポインタイベントを送ることができます。

`resize`プロパティ

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

resizeプロパティは、要素をユーザーがどの方向にリサイズ（サイズ変更）できるかを指定するためのCSSプロパティです。このプロパティを使用することで、要素がドラッグによって縦や横にリサイズできるようにしたり、リサイズを無効にすることができます。

値の種類

resizeプロパティには、要素のリサイズ可能な方向を指定します。次の値を指定できます。

`both`

bothを指定すると、要素の縦方向・横方向の両方にリサイズを可能にします。

`horizontal`

horizontalを指定すると、要素の横方向（幅）のみリサイズを可能にします。

`vertical`

verticalを指定すると、要素の縦方向（高さ）のみリサイズを可能にします。

`none`

noneを指定すると、要素のリサイズを無効化します。これはデフォルト値です。

`inherit`

inheritを指定すると、親要素のresizeプロパティの値を継承します。

注意点

要素をリサイズ可能にするためには、resizeプロパティと一緒にoverflowプロパティを設定する必要があります。リサイズ可能な要素にはスクロールバーが必要な場合があり、通常は overflow: auto を設定します。
リサイズはブロック要素（divやtextareaなど）で使われることが一般的です。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。ぜひYouTubeチャンネルもご覧ください。

YouTube Video

3Dアニメーション関連のCSSプロパティフロート関連のCSSプロパティ

ユーザーインターフェース関連のCSSプロパティ

YouTube Video

プレビュー用のHTML

ユーザーインターフェース関連

contentプロパティ

contentプロパティの値

使用上の注意

cursorプロパティ

主なカーソルタイプ

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

カスタムカーソル

まとめ

pointer-eventsプロパティ

値の種類

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

使い方のポイント

resizeプロパティ

値の種類

both

horizontal

vertical

none

inherit

注意点

YouTube Video

`content`プロパティ

`content`プロパティの値

`cursor`プロパティ

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

`pointer-events`プロパティ

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

`resize`プロパティ

`both`

`horizontal`

`vertical`

`none`

`inherit`