base要素とその使い道
いきなり引用で申し訳ないのですが、base要素とは、
HTML 文書の基準 URI を指定します。href属性に書かれた URL が、この文書の基準 URL とされ、相対参照を解釈する際に利用されます。
base要素@ばけらの HTML リファレンス(未完成)
とのことでして、コードはこんなふうに使います。
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <base href="http://www.123kobe.com" />
HTML文書のURLの起点を作るみたいなものですね。
僕はbase要素を今まで一度も使ったことはありませんでした。ただ、今回リニューアルしたうちのサイト（NPO法人しゃらく）で初めて使いました（まだ作り掛けなんですが）。その理由としては、
MODx用のメモ
タイトルが全てなんだけども、フレンドリーURL使ってて、フレンドリーエイリアスを効かせてると、
Nishiaki's Log: MODxでテンプレートにはbaseを忘れるなよオレ
Breadcrumbsとかおかしくなるから。
今回上記のNPO法人しゃらくのサイトにはMODxというCMSを入れていて、更にフレンドリーエイリアスというURLを簡素化できる設定を行い、その上でBreadcrumbsというスニペットを使っています。
すると、引用先にあるようにbase要素を指定しておかないと、Breadcrumbsが吐き出すURLがめちゃくちゃになってしまうのです。
base要素とナビゲーションスキップ
上記の理由から僕は初めてbase要素を使ったのですが、ナビゲーションスキップ（ナビゲーションスキップについては以前書いたことがあります）とバッティングすることを初めて知りました。音声ブラウザやスクリーンリーダーでどのページのナビゲーションスキップをクリックしても、全てトップページに戻るのです。
今回僕はbase要素にサイトのトップページのアドレスを指定し、一方、ナビゲーションスキップには次のコードを書きました。
<p class="skipNavi"><a href="#skipNavi">ナビゲーションをスキップする。</a></p>
こう書くと、href属性のURLは「base要素（トップページ）＋#skipNavi」と解釈してしまい、結果その行き先は「http://www.123kobe.com/#skipNavi」と、どのページでクリックしてもトップページに戻ってしまいました。
冷静に考えれば至極当然なのですが、base要素にはこんな落とし穴があったのです。ちなみに、今でもこの状況は改善できておらず、どうしようかなと悩んでいる最中です。
というわけで、自分の失敗から導き出す結論ですが、base要素とナビゲーションスキップを同時に使う際にはアクセシビリティの確認を念入りに行ったほうがよさそうです。
追記
以下、はてブのコメントに対する追記です。
[html]CMSの方でなんとかならないのだろうか。
はてなブックマーク - 徒栞 / 2008年04月13日
やってみた人はいるようです。少し前の記事なのですが、Cubix | base hrefを使わないなど。ただ僕はPHPをちゃんとできる人間ではないので、なんか無理っぽいなーと。
[HTML][Web Design]そうなのか。なるほど。 / スキップしないで済むように、ナビゲーションを本文の後にもってくればいいような気もするが、どうなんだろう。
はてなブックマーク - カナかな団首領のブックマーク / 2008年04月14日
これはボイスサーフィンという音声ブラウザの中の人が「尻ナビ方式」と呼んでいるコンテンツの配置形態ですね。音声ブラウザ対応エッセンス〜ナビゲーションメニュースキップで紹介されています。
この形態はブログなどであれば、メニューを全てフッターに集め、1カラムでデザインすることによってできるとは思うのですが、いかんせん企業サイトなどは難しいかなと思っています。メニューをフッターに持っていくデザインがあまり一般的ではありませんし、フッターのメニューをpositionなどで本文の上部に持っていこうとすると、某ブラウザのバグにめちゃくちゃにはまりそうな気がしたりするのです。
ただ、江東区は結構頑張って、メニューをHTMLの後半で書いて、positionで上に持っていっているみたいですね。
