１０　ユーザインタフェース

１０．１　　カーソル　()

マウスカーソルの形状を指定する際に使用します。

記述例

<div style="cursor:url('3dsmove.cur'), auto">url</div>
<div style="cursor:auto">auto</div>
<div style="cursor:default">default</div>
<div style="cursor:none">none</div>
<div style="cursor:context-menu">context-menu</div>
<div style="cursor:help">help</div>
<div style="cursor:pointer">pointer</div>
<div style="cursor:progress">progress</div>
<div style="cursor:wait">wait</div>
<div style="cursor:cell">cell</div>
<div style="cursor:crosshair">crosshair</div>
<div style="cursor:text">text</div>
<div style="cursor:vertical-text">vertical-text</div>
<div style="cursor:alias">alias</div>
<div style="cursor:copy">copy</div>
<div style="cursor:move">move</div>
<div style="cursor:no-drop">no-drop</div>
<div style="cursor:not-allowed">not-allowed</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:ew-resize">ew-resize</div>
<div style="cursor:ns-resize">ns-resize</div>
<div style="cursor:nesw-resize">nesw-resize</div>
<div style="cursor:nwse-resize">nwse-resize</div>
<div style="cursor:col-resize">col-resize</div>
<div style="cursor:row-resize">row-resize</div>
<div style="cursor:all-scroll">all-scroll</div>
<div style="cursor:zoom-in">zoom-in</div>
<div style="cursor:zoom-out">zoom-out</div>

カーソルを重ねると形状が変わります。

独自のカーソルを URL で指定するときは、指定したファイルが存在しない場合に備えて、auto や help などのキーワードを最後に指定する必要があります。指定しないと独自のカーソルにはならず、auto になります。

記述例

<div style="cursor:url('existFile.cur')">cursor</div>
<div style="cursor:url('notExistFile.cur'), help">cursor</div>
<div style="cursor:url('notExistFile.cur'), cursor:url('existFile.cur'), help">cursor</div>

１０．２　　IMEの状態　(ime-mode)

テキスト入力時のIMEの状態を指定します。

ただし、廃止予定となっていますので、使用すべきではありません。

記述例

<form action="#">
  <label>auto<input type="text" name="name" style="ime-mode:auto;"></label><br>
  <label>active<input type="text" name="name" style="ime-mode:active;"></label><br>
  <label>inactive<input type="text" name="name" style="ime-mode:inactive;"></label><br>
  <label>disabled<input type="text" name="name" style="ime-mode:disabled;"></label><br>
</form>

active は最初から日本語入力モードになります。inactive と disabled は最初は英数字入力モードです。inactive は日本語入力モードに変更できますが、disabled は変更できません。

１０．３　　アウトライン　(outline)

アウトライン（輪郭線）を指定します。

アウトライン（輪郭線）は、ボーダー（境界線）とは異なり要素の外側に描かれ、上下左右の概念もありません。また、領域も持ちませんので隣接する他の領域のアウトラインと重なることがあります。

記述例

  <span style="border:solid 10px rgba(255,0,0,0.3)">■■■■■■■■■■</span>
  <span style="border:solid 10px rgba(0,255,0,0.3)">□□□□□□□□□□</span>

  <span style="outline:solid 10px rgba(255,0,0,0.3)">■■■■■■■■■■</span>
  <span style="outline:solid 10px rgba(0,255,0,0.3)">□□□□□□□□□□</span>

下の例の枠にマウスを重ねてみてください。ボーダーは表示することによってレイアウトが崩れることがありますが、アウトラインはそういうことがありません。

したがって、アウトラインはデザインのためというよりは、ユーザーの注意を引くためのユーザーインターフェイス用の要素であるといえます。

記述例

スタイルシート
  input#d1:hover {
    border:10px solid rgba(255,0,0,0.3);
  }
  input#d2:hover {
    outline:10px solid rgba(0,255,0,0.3);
  }

ボディ
  ボーダー　　：<input id="d1" type="text"><br>
  アウトライン：<input id="d2" type="text"><br>
  <br>
  上の枠にマウスを重ねてみてください。

<input type="text" name="param1" value="double" style="outline-style:double;">　
<input type="text" name="param2" value="dashed" style="outline-style:dashed;"><br><br>
<input type="checkbox" name="check" style="outline-style:dotted;">dotted
<input type="checkbox" name="check" style="outline-style:dashed;">dashed
<input type="checkbox" name="check" style="outline-style:double;">double

スタイルシート
  input {
    outline-style:solid;
  }

ボディ
<input type="text" name="param1" value="orange" style="outline-color:orange;">　
<input type="text" name="param2" value="yellow" style="outline-color:yellow;"><br><br>
<input type="checkbox" name="check" style="outline-color:red;">赤（red）
<input type="checkbox" name="check" style="outline-color:green;">緑（green）
<input type="checkbox" name="check" style="outline-color:blue;">青（blue）

スタイルシート
  input {
    outline-style:solid;
  }

ボディ
<input type="text" name="param1" value="3px" style="outline-width:3px;">　
<input type="text" name="param2" value="5px" style="outline-width:5px;"><br><br>
<input type="checkbox" name="check" style="outline-width:thin;">thin
<input type="checkbox" name="check" style="outline-width:medium;">medium
<input type="checkbox" name="check" style="outline-width:thick;">thick

スタイルシート
  input {
    outline-style:solid;
  }

ボディ
<input type="text" name="param1" value="3px" style="outline-offset:3px;">　
<input type="text" name="param2" value="5px" style="outline-offset:5px;"><br><br>
<input type="checkbox" name="check" style="outline-offset:1px;">1px
<input type="checkbox" name="check" style="outline-offset:3px;">3px
<input type="checkbox" name="check" style="outline-offset:5px;">5px

スタイルシート
      input {
        outline-style:solid;
      }

ボディ
<input type="text" name="param1" value="inset 5px blue" style="outline:inset 5px blue;">　
<input type="text" name="param2" value="outset 5px green" style="outline:outset 5px green;"><br><br>
<input type="checkbox" name="check" style="outline:groove 5px red;">チェック１
<input type="checkbox" name="check" style="outline:ridge 5px blue;">チェック２
<input type="checkbox" name="check" style="outline:double 5px green;">チェック３