HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【HTML】autofocus属性でページ読み込み時に要素へ自動的にフォーカスを設定する方法

HTMLでは、autofocus属性を使用することで、ページが読み込まれた時点で特定の要素に自動的にフォーカスを当てることができます。この属性は、<input>、<button>、<textarea>、<select>など、ユーザーの入力を受け付けるフォーム要素に指定できます。

autofocus属性の基本例

以下のコードでは、ボタンにautofocus属性を指定しています。ページを読み込むと、このボタンに自動的にフォーカスが移り、そのままEnterキーを押すだけでクリック操作が可能になります。

<!DOCTYPE html>
<html>
   <body>
      <p>下のボタンをクリックすると、アラートボックスが表示されます。</p>
      <button type = "button" autofocus onclick = "alert('ようこそ！')">実行</button>
   </body>
</html>

autofocus属性の主なポイント

  • ページ読み込み時に、autofocus属性が付けられた要素へカーソル（フォーカス）が自動的に移動します。
  • 1つのページ内でautofocus属性を指定できるのは1つの要素だけです。複数の要素に指定した場合、最初の要素のみが有効になります。
  • 検索フォームやログインフォームのように、ユーザーにすぐ入力してほしい入力欄に指定すると、操作性（UX）が向上します。
  • モダンブラウザ（Chrome、Firefox、Safari、Edgeなど）で広くサポートされています。

このように、autofocus属性を使えばJavaScriptを書かずに、シンプルなマークアップだけで初期フォーカスを制御できます。ただし、ページ表示のたびに意図しない場所へスクロールやフォーカスが発生する可能性があるため、使用場面は適切に見極めましょう。

  1. HTMLのmeta要素の使い方完全ガイド｜description・viewport・robotsタグの基礎とSEO対策

    この記事では、HTMLの<meta>要素の基本的な使い方から、SEO対策につながる実践的な活用方法までをわかりやすく解説します。 meta要素とは？ <meta>要素は、HTML文書に関するさまざまな種類のメタデータ（メタ情報）を定義するために使用される要素です。メタデータとは「情報」のことであり、より正確に言えば、他のデータについての説明や付加情報を提供するデータのことを指します。 <meta>要素には複数の属性と値が存在しますが、その中でもname属性は最も重要な属性の一つです。 name属性とdescriptionの設定 name属性にはいくつかの

  2. HTMLの<title>要素の正しい使い方とSEO対策のポイント

    この記事では、HTMLの<title>要素の基本的な使い方から、SEOにおける重要性までをわかりやすく解説します。 HTMLの<title>要素は、ウェブサイトのページタイトルを表す要素です。 ページタイトルの確認方法 閲覧中のウェブサイトのページタイトルを確認したい場合は、ブラウザのタブにマウスカーソルを合わせて数秒間静止してみましょう。完全なページタイトルがポップアップ表示されます。 以下はYouTubeで実際に試した例です。 <title>要素の書き方 <title>要素を作成するには、開始タグと終了タグを使い、その間にタイトルとなるテキ