aタグの中にaタグを書きたい!けどレイアウト崩れる時の対処法【jsでURLへ遷移】

みなさんこんにちは、ゆうやです!

Twitterがツイートへのコメントの連なりをネスト化ツリー表示する新機能のテストをしていることが明らかになった今日このごろ、いかがお過ごしでしょうか。

2020年には一般公開する予定とのこと!

これが実装されれば、コメント数が多くなっても「誰のどのコメントに対するリプライ」なのかがより直感的に分かるようになりますね!楽しみです(^o^)

参考 Twitter、“会話”のネスト化ツリー表示を来年ローリングアウトITmedia NEWS

さて本記事では、

「aタグの中にaタグを書いたらレイアウト崩れた!?」

「変な所で勝手にaタグ閉じられてるんですけど!?」

とお困りな方に向けて対処法を紹介します!!

aタグの中にaタグを書きたい

aタグの中にaタグを入れたいシチュエーション

はい、どんなシチュエーションで上記のコーディングをするのかといいいますと、以下が挙げられます!

  • カード or リストデザインでカード全体は記事へのリンクを貼る
  • 中のカテゴリー名やユーザー名にはそれぞれ該当のリンク先を指定したい

当ブログのカードがそれに当たりますね。

カードデザイン

カテゴリー記事一覧・ユーザーが書いた記事一覧ページへのリンク

完成イメージ

今回はこのようなリストデザインを完成イメージとして作っていきます!

ユーザーアイコン・ユーザー名・その他テキスト

Twitterの通知一覧ページのデザインに少し似ている感じです(^o^)

デモページをご覧になりたい方はこちら

リストのHTML構造(崩れるver)

それではさっそくhtmlを書いていくんですが、その前に普通にaタグのaタグを書いた場合、ブラウザでどのようになるのか見ていきましょう(^o^)

■aタグの中にaタグを書いた場合

index.html
<a href="#" class="List-Item">
   <div class="List-Item-Title">
     <a href="#" class="List-Item-Title-ImgBox">
       <div class="List-Item-Title-ImgBox-Img" style="background: url('') no-repeat center; background-size: cover;"></div>
     </a>
     <div class="List-Item-Title-Text"><a href="#" class="List-Item-Title-Text-Span">ゆうや</a>さんがいいねしました</div>
    </div>
 </a>

これが実際ブラウザで見るとどうなるか!↓↓

■ブラウザで表示されるHTML

index.html
<a href="#" class="List-Item"></a>
<div class="List-Item-Title">
  <a href="#" class="List-Item"></a>
  <a href="#" class="List-Item-Title-ImgBox">
    <div class="List-Item-Title-ImgBox-Img" style="background: url('') no-repeat center; background-size: cover;"></div>
  </a>
  <div class="List-Item-Title-Text">
    <a href="#" class="List-Item-Title-Text-Span">ゆうや</a>さんがいいねしました</div>
</div>

お気づきになったでしょうか?

全く意図していない箇所でaタグが閉じられていることがわかりますね(泣)

どうやらブラウザ側で勝手にaタグの閉じタグを補完してくれるみたいです。

これでは当然レイアウトがぐちゃぐちゃになります笑

さあ!次はそれを踏まえて対処法に移ってまいりましょう!

リストのHTML構造(崩れないver)

結論から申しますと、先程のコードを以下のように変更します!

  1. aタグ内のaタグをdivタグに変更
  2. そのdivタグにdata-url属性とクリックイベント用のJS_Click_TransitionToUserPageクラスを設定
  3. data-url属性値に該当のURLを挿入

それを踏まえて書き直したHTMLがこちら。

index.html
<a href="#" class="List-Item">
  <div class="List-Item-Title">
    <div data-url="#" class="List-Item-Title-ImgBox JS_Click_TransitionToUserPage">
      <div class="List-Item-Title-ImgBox-Img" style="background: url('') no-repeat center; background-size: cover;"></div>
    </div>
    <div class="List-Item-Title-Text">
      <div data-url="#" class="List-Item-Title-Text-Span JS_Click_TransitionToUserPage">ゆうや</div>さんがいいねしました</div>
    </div>
</a>

リストのCSS

HTML構造ができた所でお次はCSSで味付けしていきましょう!

コピペでドン!

index.css
.List-Item{
    border-bottom: 1px solid #eee;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
}
.List-Item:first-child{
    padding-top: 0px;
}
.List-Item-Title{
    display: flex;
    align-items: center;
    width: 100%;
}
.List-Item-Title-ImgBox{
    width: 34px;
    height: 34px;
}
.List-Item-Title-ImgBox-Img{
    border-radius: 50%;
    width: 100%;
    padding-top: 100%;
}
.List-Item-Title-Text{
    margin-left: 6px;
    flex: 1;
    line-height: 1.5;
    font-size: 14px;
}
.List-Item-Title-Text-Span{
    display: inline;
    letter-spacing: 0.06em;
    color: #444;
    font-weight: bold;
}

js location.hrefでURL先に遷移させる

最後にjavascriptで、「data-urlが設定してあるブロック(JS_Click_TransitionToUserPageクラス)をクリックした時に、data-urlの属性値のURLへ遷移させる」という処理を書きましょう!

index.js
// クリックしたらURLへ遷移させる
  TransitionToUserPage();

  function TransitionToUserPage(){
    $('.JS_Click_TransitionToUserPage').on('click', function(e){
      // 伝播をストップ
      e.stopPropagation();
      e.preventDefault();

      // URLを取得して飛ばす
      location.href = $(this).attr('data-url');
    });
  }

実装は以上となります!

お疲れ様でした!

デモページをご覧になりたい方はこちら

最終的なHTML

index.html
<div class="Notice">
      <div class="Notice-Inner">
        <div class="List">
          <!-- 1アイテム -->
          <a href="https://yuyauver98.me/thealley-shibuyadogenzaka" class="List-Item">
            <div class="List-Item-Title">
              <div data-url="https://yuyauver98.me" class="List-Item-Title-ImgBox JS_Click_TransitionToUserPage">
                <div class="List-Item-Title-ImgBox-Img" style="background: url('./img/dummyGirl.jpg') no-repeat center; background-size: cover;"></div>
              </div>
              <div class="List-Item-Title-Text"><div data-url="https://yuyauver98.me" class="List-Item-Title-Text-Span JS_Click_TransitionToUserPage">ゆうや</div>さんがいいねしました</div>
            </div>
          </a>
          <!-- 1アイテム -->
          <a href="https://yuyauver98.me/thealley-shibuyadogenzaka" class="List-Item">
            <div class="List-Item-Title">
              <div data-url="https://yuyauver98.me" class="List-Item-Title-ImgBox JS_Click_TransitionToUserPage">
                <div class="List-Item-Title-ImgBox-Img" style="background: url('./img/dummyGirl.jpg') no-repeat center; background-size: cover;"></div>
              </div>
              <div class="List-Item-Title-Text"><div data-url="https://yuyauver98.me" class="List-Item-Title-Text-Span JS_Click_TransitionToUserPage">ゆうや</div>さんがいいねしました</div>
            </div>
          </a>
        </div>
      </div>
    </div>

参考サイト

参考 aタグの中にaタグを書きたい時のtipsQiita

まとめ

いかがでしたでしょうか。

色々な方法があるようでしたが、jsで飛ばすのが最もスマートかなと思いました。

最後までご高覧いただきありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です