☰

divをリンクにする 質問する

tag-icon • tag-icon css html xhtml anchor
divをリンクにする 質問する

<div>変更したくない派手なビジュアルコンテンツを含むブロックがあります。クリック可能なリンクにしたいです。

のようなものを探しています<a href="…"><div> … </div></a>が、これは有効な XHTML 1.1 です。

ベストアンサー1

自分よりよい解決策が見つかることを期待してここに来ましたが、ここにある解決策はどれも気に入りません。皆さんの中には質問を誤解している人もいると思います。OP は、コンテンツが詰まった div をリンクのように動作させたいのです。その一例が Facebook 広告です。よく見ると、それらは実際には適切なマークアップです。

私にとって、ダメなものは、JavaScript（リンクのためだけに必要ではなく、SEO/アクセシビリティが非常に悪い）と無効な HTML です。

本質的には、次のようになります。

  • 通常の CSS テクニックと有効な HTML を使用してパネルを構築します。
  • ユーザーがパネルをクリックしたときにデフォルトのリンクとなるリンクをどこかに配置します (他のリンクも配置できます)。
  • そのリンク内に空のspanタグ（<span></span>ではなく<span />- @Campeyに感謝）を入れます。
  • パネルの位置を指定する:相対

  • 空のスパンに次の CSS を適用します。

    { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

    これでパネルが覆われ、タグ内にあるため<A>クリック可能なリンクになります

  • パネル内の他のリンクにposition:relativeと適切なz-index（> 1）を指定して、それらをデフォルトのspanリンクの前に配置します。

おすすめ記事