【入門編】main要素の配置とSPAにおける注意点 – HTML実践ガイド

SPAでも迷子にならない！`

`要素と「フォーカス管理」のやさしい関係

Webサイトを作っていると、HTMLのタグ一つひとつにどんな意味があるのか、少し迷うことってありますよね。特に「`

`タグって、結局どこに置くのが正解なの？」という疑問は、駆け出しの頃の誰もが一度はぶつかる壁です。

最近主流の「シングルページアプリケーション（SPA）」という仕組みで作られたサイトでは、この`

`の扱いが、実はとっても重要なんです。今回は、ユーザーが迷子にならないための「やさしいHTML設計」について、一緒に紐解いていきましょう。

—

``要素は「そのページの主役」を照らすスポットライト

まず、`

`タグの役割をイメージしてみてください。

舞台劇を想像してみましょう。舞台には、常にそこにある「背景（ヘッダーやフッター）」がありますよね。そして、物語のメインシーンが繰り広げられる場所は、その時々で変わります。`

`タグは、まさにその「今、一番見てほしい主役のシーン」を照らすスポットライトです。

ヘッダー（header）：劇場の入り口や看板
ナビゲーション（nav）：座席表や案内板
メイン（main）：今まさに演じられている舞台そのもの！
フッター（footer）：劇場の出口や運営情報

だからこそ、`

`はページの中に一つだけ。「ここが今日の主役ですよ！」とブラウザや検索エンジン、そして読み上げソフトに教えてあげる役割を持っているんです。

—

SPAでつまずきがちな「画面の切り替え」問題

さて、ここからが本題です。ReactやVue.jsなどを使った「SPA（シングルページアプリケーション）」では、ページを移動してもブラウザ全体を読み込み直すことはしません。まるで、「舞台のセットだけを素早く入れ替えて、同じ舞台装置を使い回す」ような動きをします。

ここで初心者がやりがちな失敗が、「画面は切り替わったのに、読み上げソフトやブラウザが『どこが変わったのか』気づいてくれない」という現象です。

視覚的に見える人には画面が変わったことが分かりますが、目の不自由な方や、キーボード操作でサイトを利用する方にとっては、「あれ？さっきと同じ場所のままかな？」と迷子になってしまうことがあるんです。

—

「フォーカス管理」という名のやさしい誘導

そんなとき、私たちができる一番の対策が「フォーカス管理」です。

画面が切り替わった瞬間に、ブラウザの「目」を新しい`

`タグの先頭にジャンプさせてあげるのです。そうすることで、ユーザーは「おっ、新しいページが始まったんだな」と直感的に理解できるようになります。

実装のヒント（JavaScriptのイメージ）

難しいコードに見えるかもしれませんが、やっていることは「ページが変わったら、主役にスポットライトを当てる」というシンプルな指示出しです。

// ページ遷移が終わった後の処理だと思ってください
function handlePageChange() {
// 1. main要素を取得します
const mainContent = document.querySelector(‘main’);

if (mainContent) {
// 2. 「ここを見て！」とフォーカス（焦点を当てる）を強制移動させます
// tabindex=”-1″ を設定しておくと、JSからフォーカスを当てやすくなります
mainContent.setAttribute(‘tabindex’, ‘-1’);
mainContent.focus();

// 3. 終わったらフォーカスを外す工夫をしてあげると、
// 次回の操作に影響が出なくて親切です
mainContent.addEventListener(‘blur’, () => {
mainContent.removeAttribute(‘tabindex’);
}, { once: true });
}
}

※ HTML側で `

` と書いておいてもOKですが、フォーカスが当たった時に青い枠線（アウトライン）が出るのが気になる場合は、CSSで `main:focus { outline: none; }` と調整してあげてくださいね。

—

大丈夫、一歩ずつ進めましょう！

「アクセシビリティ（誰にとっても使いやすいこと）」という言葉を聞くと、なんだか敷居が高く感じてしまうかもしれません。でも、今回紹介したことは「おもてなし」と同じです。

迷子にさせない
今どこにいるかを教えてあげる
次の行動をスムーズにする

これらは、HTMLという道具を丁寧に使うだけで、誰でも実践できる素敵なテクニックです。

SPAの開発は少し複雑ですが、まずは「`

`タグを正しく配置して、画面が切り替わった時にそこに注目を促す」という意識を持つだけで、あなたの作るWebサイトはグッと優しく、プロフェッショナルな品質に近づきます。

まずは小さな一歩から。あなたの書いたコードが、誰かのWeb体験を少しだけ明るく照らしてくれますように！