ホームページ作成/HTML・スタイルシート(CSS)の基礎

ショートカットキーでリンクやボタンを操作可能にする(2ページ目)

多くのソフトウェアには便利なショートカットキーが用意されています。慣れると非常に重宝するショートカットキーをホームページ内部にも設けてみましょう。ページ内の各オブジェクトをキーで選択する方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ショートカットキーを加える

それでは、ショートカットキーを割り当てる方法をご紹介致します。
方法はとても簡単で、以下のような記述を加えるだけです。

accesskey="k"

上記の記述は、「K」キーを用いたショートカットキーを加える、という意味になります。これによって、[Alt]+[K]などのようなショートカットキーが利用できるようになります。

※[Alt]キーと組み合わせるとは限りません。何のキーと組み合わせるかは、OSやブラウザによって異なりますので注意して下さい。(後述)

記述例:
例えば、リンクにショートカットキーを加える場合は、以下のように記述します。

<a href="hoge.htm" accesskey="k">サンプルリンク</a>

このように記述すると、上記のリンクは、キーボードの「K」を使ったショートカットキーでもアクセスできるようになります。

2キーの組み合わせで使用

「K」などの1つのキーがショートカットキーになるわけではありません。もう1つのキーと組み合わせてショートカットキーになります。

  • Windowsの場合なら、[Alt]+[K]キー
  • Macintoshの場合なら、[command]+[K]キー

上記の例はともに Internet Explorer または Netscape Navigator を用いた場合です。 それ以外のブラウザでは、キーが異なる場合があります。
(例えば、Windows版Firefoxだと、[Alt]+[Shift]+[指定キー]という3つのキーを組み合わせる必要があります。)

※指定できるのは英数キー名の方だけで、[Alt]キーや[command]キーの方を指定することはできません。 ですから、[Ctrl]+[S]や、[Alt]+[Shift]+[S]などのショートカットキーにはできません。

サンプル

下記のソースは、ショートカットキー機能付きリンクのサンプルです。

<a href="hoge.htm" accesskey="m">NHK無料提供の映像素材集(M)</a>
<a href="hoge.htm" accesskey="d">円グラフを簡単に表示させる(D)</a>
<a href="hoge.htm" accesskey="h">HTML基礎(H)</a>

これらのコードは、次のように表示されます。(実際に機能しますので、試してみて下さい。)

NHK無料提供の映像素材集(M)
円グラフを表示する方法(D)
両端揃えで表示する方法(H)

Windows版Internet Explorerの場合、[Alt]+[M]で「映像素材集」リンクが、 [Alt]+[D]で「円グラフ」リンクが、 [Alt]+[H]で「両端揃え」リンクが選択されます。

ブラウザごとの挙動の違い
Windows版Internet Explorerの場合は、リンクにフォーカスが移動します。 リンク先へ移動するには、その後[Enter]キーを押す必要があります。
Netscape Navigatorの場合は、リンクをクリックしたのと同じ状態になり、キーを押すと同時にリンク先へ移動します。

なお、リンク以外の要素にもショートカットキーを付けることができます。 次にその方法をご紹介致します。

それでは、次のページへ! →

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます