質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

受付中

aタグをすべてのliに機能させたい

free_teku
free_teku

総合スコア82

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0評価

0クリップ

167閲覧

投稿2022/01/14 05:18

前提・実現したいこと

aタグを使って、複数のliをリンクタグにしたいのですが、、一番目しか機能されず困惑しています。

発生している問題・エラーメッセージ

aタグをすべてのliに機能されない

試したこと

HTMLのaタグの位置を調整するなど(2,3番目は初めのliのすぐ下に配置しています)
試しましたが、改善されずにいます。
class名をつけるなども、しましたが、違う。
そこで、HTMLのマークアップ構造が悪いのかと判断し、aタグの機能が反映されている初めのliをコピペしましたが、反応しないです。

該当のソースコード

HTML

<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="css/destyle.css"> <link rel="stylesheet" href="css/blog.css"> </head> <body> <div class="blog-container"> <ul class="blog-list"> <!--1--> <li class="blog-item"> <div class="blog-img"> <p class="category">お知らせ</p><img alt="旅館雰囲気" src="../common/img/ryokan-249560_1920.png"></div><!-- /.blog-img --> <div class="blog-txt"> <time class="time">2020-0</time><!-- /.time --> <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> </div><!-- /.blog-txt --> <a class="anker" href="./single/index.html"></a> </li><!-- /.blog-item --> <!--2--> <li class="blog-item"> <a class="anker" href="./single/index.html"></a> <div class="blog-img"> <p class="category">お知らせ</p><img alt="旅館内" src="../common/img/inn-4116914_1920.png"></div><!-- /.blog-img --> <div class="blog-txt"> <time class="time">2020-0</time><!-- /.time --> <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> </div><!-- /.blog-txt --> </li><!-- /.blog-item --> <!--3--> <li class="blog-item"> <a class="anker" href="./single/index.html"></a> <div class="blog-img"> <p class="category">お知らせ</p><img alt="旅館雰囲気" src="../common/img/ryokan-249560_1920.png"></div><!-- /.blog-img --> <div class="blog-txt"> <time class="time">2020-0</time><!-- /.time --> <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> </div><!-- /.blog-txt --> </li><!-- /.blog-item --> <!--4--> <li class="blog-item"> <div class="blog-img"> <p class="category">採用</p><img alt="仕事インタビュー" src="../common/img/job-interview-3410427_1920.png"></div><!-- /.blog-img --> <div class="blog-txt"> <time class="time">2020-0</time><!-- /.time --> <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> </div><!-- /.blog-txt --> <a class="anker" href="./single/index.html"></a> </li><!-- /.blog-item --> <!--5--> <li class="blog-item"> <div class="blog-img"> <p class="category">イベント</p><img alt="旅館雰囲気" src="../common/img/ryokan-249560_1920.png"></div><!-- /.blog-img --> <div class="blog-txt"> <time class="time">2020-0</time><!-- /.time --> <h5>ブログタイトルブログタイトルブログタイトルブログタイトルブログタ イトルブログタイトル</h5> <p class="blog-txt_desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ テキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p><!-- /.blog-txt_desc --> </div><!-- /.blog-txt --> <a class="anker" href="./single/index.html"></a> </li><!-- /.blog-item --> </ul> </div> </body> </html>

CSS

.blog-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 50px; } @media screen and (max-width: 1100px) { .blog-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: 0px 30px; } } .blog-item:nth-last-of-type(1) { padding-bottom: 50px; } .blog-item > a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-indent: 100%; /*テキスト非表示*/ white-space: nowrap; /*テキスト非表示*/ overflow: hidden; /*テキスト非表示*/ } .blog-item > a:hover { opacity: .5; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .blog-img { position: relative; max-width: 254px; max-height: 180px; } @media screen and (max-width: 1100px) { .blog-img { max-width: inherit; width: 90vw; max-height: initial; } } .blog-img .category { position: absolute; top: 0; left: 0; width: 120px; padding-top: 6px; padding-bottom: 6px; text-align: center; background-color: #4D0000; color: #fff; display: inline-block; font-size: 1.4rem; z-index: 1; }

補足情報(FW/ツールのバージョンなど)

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。