携帯サイトの作り方 第2回 番号キーで移動(2ページ目)

番号キーで移動させるリンクを作る方法

携帯電話には必ず「0」～「9」の数字キーと「#」・「*」キーがあります。 リンクを作るa要素に accesskey属性を加えると、これらのキーをページ内の特定のリンクに関連付けることができます。
例えば、下記のようにソースを記述すると、数字キーの「3」を押すだけで、このリンクをクリックしたことになります。

<a href="next.html" accesskey="3">リンク名</a>

accesskey属性の値には、対応するキーを（半角で）記述します。
「#」キーを押した際に sharp.html ページへ移動させたいなら、

<a href="sharp.html" accesskey="#">リンク名</a>

……のように記述します。
なお、accesskey属性を記述しただけでは、どのリンクがどのキーに対応しているのかが閲覧者には分かりません。 accesskey属性を使う際は、下記のように、対応するキーを一緒に表示させておきましょう。

[1] <a href="page1.htm" accesskey="1">ページ１</a>
[2] <a href="page2.htm" accesskey="2">ページ２</a>
[3] <a href="page3.htm" accesskey="3">ページ３</a>

こうすれば、以下のように表示されるため、どのリンクがどのキーでクリックできるのかが分かるようになります。

[1] ページ１
[2] ページ２
[3] ページ３

このaccesskey属性は、PCサイトでも有効です。（上記の3リンクで試してみて下さい。）
PC用ブラウザの場合は、「accesskey属性で指定されたキー」と「特定のキー」を組み合わせて使います。（下記参照）

• Windows用ブラウザでは、IE・Safariでは [Alt]＋[指定キー]で、Firefoxでは [Alt]＋[Shift]＋[指定キー]で、Operaでは [Shift]＋[ESC]＋[指定キー]で使えます。（※数字キーは、テンキーではない方を使って下さい）
• Mac用ブラウザでは、[Cmd]＋[指定キー]で使えます。（OperaはWindows版と同じキー）

番号キーでページ内を移動させる

ページ内を移動するリンクに、accesskey属性を使ってアクセスキーを指定してみましょう。

上図のサンプルサイトでは、[#]キーを押すことで「ページ中程にあるナビゲーション」に移動できます。 こうすると、ページの上部から離れた位置にあるナビゲーションでも、すぐ表示させられるようになり、便利です。
ソースは下記の通りです。

[#]<a href="#list" accesskey="#">マンガリストへ</a>

ページ中程にあるナビゲーション部分に「 <a name="list" id="list"></a> 」の記述があり、そこへジャンプするリンクを作っています。 そのリンクにaccesskey属性を加えることで、キーを押すだけで移動できるようにしています。
※詳しいソースは、サンプル携帯サイトのソースをご参照下さい。
※移動先としてa要素のname属性を使うのは望ましくありませんが、携帯端末によってはこの方法でしか移動できない機種があるため、この記述を使っています。 name属性とid属性には同じ値を記述して下さい。

番号キーでページを移動させる

ほかのページへ移動するリンクでも、頻繁に利用される可能性が高いなら、アクセスキーの指定を加えてみましょう。

上図のサンプルサイトでは、[1]キーや[2]キーで各ページへ移動できます。 頻繁に利用されるリンクにアクセスキーを指定すると、[↑][↓]キーでリンクを選択する手間が省け、時間の節約になります。
ソースは下記の通りです。

[1]<a href="omohide.html"  accesskey="1">おもひで</a>
[2]<a href="yakiniku.html" accesskey="2">焼き肉</a>

■備考：
accesskey属性は、リンク以外の要素にも付加可能です。 例えば、input要素で作る入力欄にaccesskey属性を付加すれば、特定のキーを押すことで指定入力欄にジャンプさせるようにもできます。

次に、リンクの文字を装飾する方法をご紹介いたします。
PCサイトと同じようにスタイルシートで装飾できますが、様々な携帯端末に対応させるには、記述方法に制限があります。