HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

贈り物に頭を悩ませている方へお薦め〔リンベルの上質カタログギフト [PR]

● ユーザーの操作性

フォーム入力では、 通常はTABキーを押すことで、入力欄を移れるようになっており、 スペースキーで入力モードに移れます。また、選択項目では十字キーで選択できます。 これらの機能を制御したり拡張したりすることで、 閲覧者の操作性を良くするための要素が有ります。

LABEL要素

フォームで使用するボタン要素には、その要素の属性により項目(ラベル)を付けられますが、 テキスト入力やチェックボックス、ラジオボタン、選択メニューにはそういった属性が在りません。
例えば、下のようにラジオボタンが並んでいたりすると、 その項目がどちらの選択肢(ボタン)を指しているのか見分けづらいでしょう。
No. 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1
これは、記事のレイアウトによる、視覚による判断においては容易に解決できるかも知れませんが、 例えば、音声ブラウザなどでは、INPUT要素のどちら側にある文字がその項目となっているのかは判別出来ないでしょう。
もし、これらの項目(ラベル)が、 ページのリンク(クリックするとカーソルが自動で移動する)のような関係にあればそういったこともないでしょう。
LABEL』要素はこのような要素と項目を関連づけるために利用します。 ラベル要素により関連づけられた文字列等は、そのラベル部分が要素と同じ動作をするなど、 要素と関連がある動きをします。



性別:

<LABEL>

<INPUT type="text" name="fname">
</LABEL><BR>
<LABEL>

<INPUT type="text" name="lname">
</LABEL><BR>
性別:
<LABEL>
<INPUT type="radio" name="sex" value="Male"> 男性
</LABEL>
<LABEL>
<INPUT type="radio" name="sex" value="Female"> 女性
</LABEL><BR>

LABEL要素に挟まれた文字列とINPUT要素は、独立した要素ではなく、 LABEL要素によって関連づけられた一つの内容となります。 (Opera・IE未対応、IEは下の『for』属性には対応してます。Netscapeは共に対応していますが、INPUT要素には何の動きもありません。)
この方法は、表を使用するなどして、文字列とINPUT要素をLABEL要素で挟めない場合が在ると思われます。 その場合には『for』属性を使用し、要素と文字列を関連づけます。


<TABLE style="margin:0.5em 2em ; border:3px solid silver">
<TR>
<TD colspan="2"><LABEL for="fname">お名前</LABEL></TD>
</TR>
<TR>
<TD><LABEL for="fname">名 </LABEL></TD>
<TD><INPUT type="text" id="fname"></TD>
</TR>
<TR>
<TD><LABEL for="lname">姓 </LABEL></TD>
<TD><INPUT type="text" id="lname"></TD>
</TR>
<TR>
<TD rowspan="2">性<BR>別</TD>
<TD><INPUT type="radio" name="sex" value="Female" id="Female">
<LABEL for="Female">女性</LABEL></TD>
</TR>
<TR>
<TD><INPUT type="radio" name="sex" value="Male" id="Male">
<LABEL for="Male">男性</LABEL></TD>
</TR>
</TABLE>

for』はそのラベルを他のフォームなどで使用する要素と関連づけます。
属性の値は関連づける要素の『id』属性と同じ値にします。 『for』属性を用いることで、 ある要素に対して、複数のLABEL要素を関連づけることができます。

FIELDSET要素・LEGEND要素

FIELDSET』要素を使うことによりフォームに関する要素を、 テーマ別に分類した表現をすることが出来ます。
分類された要素が、どのように表現されるかは各ブラウザによりますが、 フォーム入力をより解りやすく出来るのではないでしょうか。
FIELDSET』要素に、必要と思われる説明は、 『LEGEND』要素によって記述します。

個人情報 姓: 名:
性別: 男性 女性
住所:
趣味・趣向 何に興味がある?
Windows Linux HTML CSS javascript CGI PHP Word Excel AutoCADLT
感 想 当サイトはどうよ?
良い まあ良い 別に・・・ 駄目 駄目駄目
その他ご意見がありましたら、下の空欄にご記入下さい

上のフォームはFIELDSET要素とLEGEND要素を使っただけのものです。 これにスタイルシートを使用し、 色やフォントスタイル、レイアウト等を設定し、さらにはスクリプトを加えるなどして、 より自由に表示することが可能でしょう。
(以下のソースは『個人情報』の欄のみです。)

<FIELDSET>
<LEGEND>個人情報</LEGEND>
姓:<INPUT name="lname" type="text" size="10">
名:<INPUT name="fname" type="text" size="10"><BR>
性別:
<INPUT type="radio" name="sex" value="Male"> 男性
<INPUT type="radio" name="sex" value="Female"> 女性<BR>
住所:<INPUT name="address" type="text" size="45"><BR>
</FIELDSET>

要素にフォーカスを合わせる

ウェブページ上で、ある要素の機能を利用するためには、閲覧者がその要素をポイントする必要があります。
例えば、閲覧者がA要素によるリンクを使用するためには、 その要素の内容となっている記事をポイントする必要がありますし、 TEXTAREA要素による入力欄に文字を入力するためには、閲覧者がそこにカーソルを置く必要があります。
このように要素にフォーカスを合わせる(利用可能状態にする)方法は、 マウス等のポインティングデバイスで要素をポイントしてフォーカスし、クリックしてアクティブにするか、 キーボードの操作で要素から要素へと移動し(通常、Tabキーで可)、 目的の要素をフォーカスしたら、キー操作によってアクティブにする(通常、ENTERキーで可)などの方法があります。

タブの移動を制御する

閲覧者がキーボード操作でページを読む際に、要素がフォーカスを受ける順番を設定することが出来ます。
設定したい要素に『tabindex』属性を記述し、 値に番号振ることで、移動順序を設定できます。 番号は『1』から『32767』で頭に『00』をい入れても設定可能です。
フォーカスを受ける順番は、まず、『tabindex』属性が設定されている要素で、 正の値(1以上)を持つ要素が優先され、移動順は、小さい値から大きい値という順番です。 この値は、連続している必要も、『1』からなど特定の値から始まる必要もないようです。
もし、同一の値を持つ要素があった時は、記事が出現する順番(上から)になります。
tabindex』属性をサポートしていない要素や、 値が『0』である要素はその後に回され、同様に、記事が出現する順番(上から)になります。 ただし、選択不能が設定されている要素や『-1』など負の値が設定されている要素は、 移動の対象にはなりません
なお、『tabindex』属性をサポートしている要素は、 A、AREA、BUTTON、INPUT、OBJECT、SELECT、TEXTAREAとなります。

[Tab]キー押せば、tabindex属性の数値順にフォーカスされ、 [Shift+Tab]キーで『tabindex』の逆順にフォーカスされます。
(ただし、IEの標準的な設定です。この設定はブラウザに依存しますので、この限りではありません。)

アクセスキー(ショートカットキー)

閲覧者がキーボード操作でページを読む際に、要素をフォーカスするためのキーを設定することが出来ます。 設定したい要素に『accesskey』属性を記述し、 値としてフォーカスするためのキーを設定します。
accesskey』属性をサポートする要素は、 A、AREA、BUTTON、INPUT、LABEL、LEGEND、TEXTAREAとなります。
注意:ある要素に対するアクセスキーを押したとき、それがフォーカス(選択)になるのか、 アクティブ(実行)になるのかはブラウザによって異なるようです。
例えば、A要素に設定されたアクセスキーを押したとき、リンクが選択されるのか、ページが開かれるのか、 ラジオボタンに設定されたアクセスキーを押したとき、ラジオボタンが選択されるのか、変更されるのかなどです。
アクセスキーの呼び出し方は、閲覧者のシステムによって異なりますが、 通常、Windowsでは、[alt]キー(装飾キー)を押しながらアクセスキーとなります。 (MacOSでは、[cmd]キーを押しながらアクセスキーらしいです。)
また、IEでは[ALT+F]はファイルメニュー、[ALT+E]は編集メニューなど、 ブラウザのメニューにショートカットキーが割り当てられていますが、 ページにアクセスキーが在る場合はアクセスキーが優先されます (・・・閲覧者の反感を買わないよう注意するべきかもしれません)
アクセスキーの表示方法はブラウザによりますが、要素に割り当てられているアクセスキーを、 閲覧者に分かるように表示しておくことが必要でしょう。

以下に、『tabindex』属性と『accesskey』属性を 設定したフォーム(もどき)を設置してあります。
『再読込』ボタンを押し[Tab]キーを押すと、『tabindex』順に、 カーソルが『アドレス』に飛び、もう一度押すと『再読込』ボタンに飛びます。
いくつかの場所にアクセスキーを設定してありますので、そちらもお試しください。
(tabindex属性とaccesskey属性はOperaでは未対応)


ページを保存(tabindex=3)
ページを印刷(tabindex=5 / キー(p)でアクセス)


左(l) 右(r)
tabindex=6

<BUTTON type="button" value="reload" onClick="location.reload(true)" tabindex="1">
再読込します(tabindex=1)
</BUTTON><BR>
<A tabindex="3" href="javaScript:document.execCommand('SaveAs')">ページを保存</A>(tabindex=3)<BR>
<A tabindex="5" href="javaScript:print()" accesskey="p">ページを印刷</A>(tabindex=5 / キー(p)でアクセス)<BR>
</P>
<P>
<LABEL for="acces" accesskey="f">キー(f)でアクセス</LABEL>
<INPUT tabindex="4" type="text" name="text1" id="acces" value="tabindex=4">
<INPUT tabindex="2" type="text" name="text2" value="tabindex=2"><BR>
<INPUT type="radio" name="radio" value="left" accesskey="l"> 左(l)
<INPUT type="radio" name="radio" value="right" accesskey="r"> 右(r)<BR>
<INPUT tabindex="6" type="submit" name="submit" onClick="alert('何も起きません(^^')">tabindex=6<BR>

入力フォームは閲覧者の声を聞く重要な窓口の一つです。
閲覧者が入力しやすいように簡潔に、それでいて見やすいように作る必要があるでしょう。 また、パソコンに不慣れな人でもわかるように作る必要もあるでしょう。 たとえば、装飾によってボタンや入力欄を背景と一体化するなどの装飾は、 きれいなページになる一方で閲覧者に混乱を生じさせるおそれがあることを意識すべきでしょう。
ここに入力欄があったりする=>

Operaでは普通に見える・・・。

<<前へ  |上へ|  次へ>>
123456789101112131415

パソコンのウイルス対策大丈夫ですか?どれかひとつは入れておきたい対策ソフト
マカフィー・ストア シマンテックストア ウイルスバスター公式トレンドマイクロ・オンラインショップ

TOP] [HOME

更新日時:2014/08/09