From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/css/css_basic_user_interface/index.html | 74 +++++++++++++ .../index.html | 119 +++++++++++++++++++++ 2 files changed, 193 insertions(+) create mode 100644 files/ja/web/css/css_basic_user_interface/index.html create mode 100644 files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html (limited to 'files/ja/web/css/css_basic_user_interface') diff --git a/files/ja/web/css/css_basic_user_interface/index.html b/files/ja/web/css/css_basic_user_interface/index.html new file mode 100644 index 0000000000..c8e3a80d85 --- /dev/null +++ b/files/ja/web/css/css_basic_user_interface/index.html @@ -0,0 +1,74 @@ +--- +title: CSS 基本ユーザーインターフェイス +slug: Web/CSS/CSS_Basic_User_Interface +tags: + - CSS + - CSS 基本ユーザーインターフェイス + - Reference + - 概要 +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +
{{CSSRef}}
+ +

CSS 基本ユーザーインターフェイス (CSS Basic User Interface) は CSS のモジュールの一つで、ユーザーインターフェイスに関する表示や機能を定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+ +
+ +

ガイド

+ +
+
cursor プロパティでの URL 値の使用
+
カスタムカーソルを生成するために {{CSSxRef("cursor")}} プロパティに URL を使用できる方法を説明します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}} 
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}} 
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}初回定義
diff --git a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..98b56ee788 --- /dev/null +++ b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,119 @@ +--- +title: cursor プロパティでの URL 値の使用 +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +tags: + - CSS + - Gecko + - Guide + - NeedsUpdate + - Reference +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +
{{cssref}}
+ +

Gecko 1.8 は CSS の{{CSSxRef("cursor")}} プロパティで、 URL の値を Windows と Linux で対応しています。 Mac の対応は Gecko 2 (Firefox 4) で追加されました。これによって任意の画像を、 Gecko が対応している画像形式ならば何でも、マウスカーソルとして指定することができます。

+ +

構文

+ +

基本 (CSS 2.1) の基本的な記述は次の通りです。

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
+ +

つまり、0個以上の URL が (カンマ区切りで) 指定されることがありますが、 auto や pointer などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。

+ +

例えば次のような値が有効です。

+ +
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+ +

始めに foo.cur を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、 bar.gif を読み込もうとし、どちらも利用できない場合は auto が使用されます。

+ +

Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
+
+ +

これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。

+ +
.foo  {
+  cursor: auto;
+  cursor: url(cursor1.png) 4 12, auto;
+}
+
+.bar  {
+  cursor: pointer;
+  cursor: url(cursor2.png) 2 2, pointer;
+}
+
+/* IE では 'auto' や 'pointer' で代替されますが、個別に設定する必要があります */
+
+ +

初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。

+ +

制限

+ +

Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。

+ +
+

Note: Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。

+
+ +

Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。

+ +

(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。)

+ +

Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。

+ +

カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。

+ +

ブラウザーの互換性

+ +

Microsoft Internet Explorer 6.0 も cursor プロパティに対応しています。しかし、次の制限があります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザー最初期バージョン形式 (例)X-Y座標有効範囲
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows および Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 から、 Safari (Mac) は .cur に対応しています。
-- cgit v1.2.3-54-g00ecf