概要

anchor-nameは、CSSでページ内リンクのターゲット位置を指定するためのプロパティです。このプロパティを使うことで、特定の要素にアンカー（リンク先）としての名前を付け、ページ内リンクの操作をカスタマイズできます。しかし、現在ではほとんどのブラウザでサポートされていないため、一般的にはid属性を用いることが推奨されます。

anchor-nameの基本

構文

anchor-name: name;

• name
  ページ内リンクのターゲットとして使用される名前を指定します。この名前はリンクと連携し、クリックされた際に指定した要素にスクロールします。

使用例

基本的な使用例 - ページ内リンクのターゲット指定

以下の例では、anchor-nameを使用して特定の要素に名前を付けています。

.section {
    anchor-name: section1;
}

この設定により、.sectionクラスの要素が「section1」というアンカー名でターゲットになります。ただし、この設定だけではリンク動作しないため、リンク側での設定も必要です。

ページ内リンクの作成

anchor-nameで指定した名前をリンクとして使用するには、HTML側でリンクを設定します。

<a href="#section1">セクション1へ移動</a>
<div class="section">
    <p>ここがセクション1です。</p>
</div>

このリンクをクリックすると、指定した要素までスクロールされます。しかし、この例はanchor-nameではなく、id属性を使った方法で実現するのが現状のブラウザ環境においては一般的です。

anchor-nameの代替 - id属性の使用

anchor-nameがサポートされていないため、実際にはid属性を使ってアンカーリンクを設定します。以下は、id属性を使用したページ内リンクの一般的な例です。

<a href="#section1">セクション1へ移動</a>
<div id="section1">
    <p>ここがセクション1です。</p>
</div>

id属性を使うことで、確実に全てのブラウザでページ内リンクを実現できます。

注意点

• ブラウザのサポート状況
  anchor-nameはモダンブラウザでのサポートが乏しく、仕様としては提案レベルにとどまっています。現時点では実際のプロジェクトでの使用は避けるべきです。
• アクセシビリティの配慮
  ページ内リンクを使用する際は、リンク先がはっきりとわかるようにすることが重要です。特にaria-labelなどを使って視覚的に明示できない部分に名前を付けることで、視覚障害者などのユーザーにも優しい設計にしましょう。
• スムーズスクロールの実装
  ページ内リンクの遷移をスムーズにするためには、scroll-behavior: smooth;などのCSSを使ってスムーズスクロール効果を追加すると、ユーザー体験が向上します。

anchor-nameの対応ブラウザ

• Chrome: 非サポート
• Firefox: 非サポート
• Safari: 非サポート
• Edge: 非サポート
• Opera: 非サポート 現時点では、anchor-nameはほとんどのブラウザでサポートされておらず、実際のプロジェクトではid属性の使用を推奨します。

まとめ

anchor-nameは、ページ内リンクのターゲットを指定するためのCSSプロパティですが、実際にはほとんどのブラウザでサポートされておらず、使用する機会は限られています。代わりにid属性を使ってページ内リンクを設定するのが現実的です。CSSの新しいプロパティに関心を持ちつつも、ブラウザの対応状況を確認しながら適切な実装を行うことが大切です。