Q&A
前提・実現したいこと
aタグを使って、複数のliをリンクタグにしたいのですが、、一番目しか機能されず困惑しています。
発生している問題・エラーメッセージ
aタグをすべてのliに機能されない
試したこと
HTMLのaタグの位置を調整するなど(2,3番目は初めのliのすぐ下に配置しています)
試しましたが、改善されずにいます。
class名をつけるなども、しましたが、違う。
そこで、HTMLのマークアップ構造が悪いのかと判断し、aタグの機能が反映されている初めのliをコピペしましたが、反応しないです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <link rel="stylesheet" href="css/destyle.css"> 6 <link rel="stylesheet" href="css/blog.css"> 7 8</head> 9<body> 10 <div class="blog-container"> 11 <ul class="blog-list"> 12 <!--1--> 13 <li class="blog-item"> 14 <div class="blog-img"> 15 <p class="category">お知らせ</p><img alt="旅館雰囲気" src="../common/img/ryokan-249560_1920.png"></div><!-- /.blog-img --> 16 <div class="blog-txt"> 17 <time class="time">2020-0</time><!-- /.time --> 18 <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> 19 <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> 20 </div><!-- /.blog-txt --> 21 <a class="anker" href="./single/index.html"></a> 22 </li><!-- /.blog-item --> 23 <!--2--> 24 <li class="blog-item"> 25 <a class="anker" href="./single/index.html"></a> 26 <div class="blog-img"> 27 <p class="category">お知らせ</p><img alt="旅館内" src="../common/img/inn-4116914_1920.png"></div><!-- /.blog-img --> 28 <div class="blog-txt"> 29 <time class="time">2020-0</time><!-- /.time --> 30 <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> 31 <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> 32 </div><!-- /.blog-txt --> 33 </li><!-- /.blog-item --> 34 <!--3--> 35 <li class="blog-item"> 36 <a class="anker" href="./single/index.html"></a> 37 <div class="blog-img"> 38 <p class="category">お知らせ</p><img alt="旅館雰囲気" src="../common/img/ryokan-249560_1920.png"></div><!-- /.blog-img --> 39 <div class="blog-txt"> 40 <time class="time">2020-0</time><!-- /.time --> 41 <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> 42 <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> 43 </div><!-- /.blog-txt --> 44 </li><!-- /.blog-item --> 45 <!--4--> 46 <li class="blog-item"> 47 <div class="blog-img"> 48 <p class="category">採用</p><img alt="仕事インタビュー" src="../common/img/job-interview-3410427_1920.png"></div><!-- /.blog-img --> 49 <div class="blog-txt"> 50 <time class="time">2020-0</time><!-- /.time --> 51 <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> 52 <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> 53 </div><!-- /.blog-txt --> 54 <a class="anker" href="./single/index.html"></a> 55 </li><!-- /.blog-item --> 56 <!--5--> 57 <li class="blog-item"> 58 <div class="blog-img"> 59 <p class="category">イベント</p><img alt="旅館雰囲気" src="../common/img/ryokan-249560_1920.png"></div><!-- /.blog-img --> 60 <div class="blog-txt"> 61 <time class="time">2020-0</time><!-- /.time --> 62 <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> 63 <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> 64 </div><!-- /.blog-txt --> 65 <a class="anker" href="./single/index.html"></a> 66 </li><!-- /.blog-item --> 67 </ul> 68 </div> 69</body> 70</html>
CSS
1 2.blog-item { 3 display: -webkit-box; 4 display: -webkit-flex; 5 display: -ms-flexbox; 6 display: flex; 7 -webkit-box-pack: justify; 8 -webkit-justify-content: space-between; 9 -ms-flex-pack: justify; 10 justify-content: space-between; 11 -webkit-box-align: center; 12 -webkit-align-items: center; 13 -ms-flex-align: center; 14 align-items: center; 15 padding-top: 50px; 16} 17 18@media screen and (max-width: 1100px) { 19 .blog-item { 20 display: -webkit-box; 21 display: -webkit-flex; 22 display: -ms-flexbox; 23 display: flex; 24 -webkit-box-orient: vertical; 25 -webkit-box-direction: normal; 26 -webkit-flex-direction: column; 27 -ms-flex-direction: column; 28 flex-direction: column; 29 margin: 0px 30px; 30 } 31} 32 33.blog-item:nth-last-of-type(1) { 34 padding-bottom: 50px; 35} 36 37.blog-item > a { 38 position: absolute; 39 width: 100%; 40 height: 100%; 41 top: 0; 42 left: 0; 43 text-indent: 100%; 44 /*テキスト非表示*/ 45 white-space: nowrap; 46 /*テキスト非表示*/ 47 overflow: hidden; 48 /*テキスト非表示*/ 49} 50 51.blog-item > a:hover { 52 opacity: .5; 53 -webkit-transform: rotate(-180deg); 54 transform: rotate(-180deg); 55} 56 57.blog-img { 58 position: relative; 59 max-width: 254px; 60 max-height: 180px; 61} 62 63@media screen and (max-width: 1100px) { 64 .blog-img { 65 max-width: inherit; 66 width: 90vw; 67 max-height: initial; 68 } 69} 70 71.blog-img .category { 72 position: absolute; 73 top: 0; 74 left: 0; 75 width: 120px; 76 padding-top: 6px; 77 padding-bottom: 6px; 78 text-align: center; 79 background-color: #4D0000; 80 color: #fff; 81 display: inline-block; 82 font-size: 1.4rem; 83 z-index: 1; 84}
補足情報（FW/ツールのバージョンなど）
回答1件
0
liタグに内包されている要素全体にリンク設定をしたいという解釈で合っていますでしょうか。
現状のソースコードではaタグに何も内包されていない状態ですので、liタグ直下にaタグを持ってきてください。
またaタグに対してposition: absoluteがかかっていますが、親要素にrelativeの設定がないため画面全体に広がっています。何のために記述されているか意図が分かりかねますが、不要ではないでしょうか。同じくコメント「テキスト非表示」とある記述も意図が分かりかねます…。
細かい装飾は適宜直されてください。
HTML
1<li class="blog-item"> 2 <a class="anker" href="./single/index.html"> 3 <div class="blog-img"> 4 <p class="category">お知らせ</p> 5 <img alt="旅館雰囲気" src="../common/img/ryokan-249560_1920.png"> 6 </div><!-- /.blog-img --> 7 <div class="blog-txt"> 8 <time class="time">2020-0</time><!-- /.time --> 9 <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> 10 <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> 11 </div><!-- /.blog-txt --> 12 </a> 13</li><!-- /.blog-item -->
CSS
1.blog-item > a { 2 width: 100%; 3 height: 100%; 4}
投稿2022/01/14 05:50
編集2022/01/14 05:51
総合スコア128
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/20 12:23