目次一覧
状態:結論(後で見返す用)
閲覧数:1,721
投稿日:2019-11-11
更新日:2019-11-11
問題発生 / 試してみたが、期待した通り動作しなかった内容 / 悩んだ末に気が付いたこと
要件を満たす最低限の内容
要件を満たす最低限の内容
問題発生 / 試してみたが、期待した通り動作しなかった内容 / 悩んだ末に気が付いたこと
問題発生
解決できず苦しむ
「<li>タグ」内の「<a>タグ」クリック範囲を拡大しようとするが、うまくいかない
試してみたが、期待した通り動作しなかった内容
aタグで作ったリンクのクリック範囲を親要素のサイズに広げる方法
CSSでaタグに“display: block”を設定する
悩んだ末に気が付いたこと
「display:flex;」を設定している場合は、それに合わせた実装を行う必要がある
・「display:flex;」は「入れ子」設定可能
・縦に並べたい場合は「flex-direction:column;」を使用する。<br>タグを使用したり、<p>タグで囲っても改行されない
要件を満たす最低限の内容
要件を満たす最低限の内容
CSS
.リストに設定したクラス名 a{
height: 100%;
width: 100%;
}
最終的な内容
HTML
<ul>
<li class="pop-menu-list"><a href="/" class="pop-menu-list-a"><i class="fas fa-home"></i>ホーム</a></li>
<li class="pop-menu-list"><a href="/category-list" class="pop-menu-list-a"><i class="fas fa-cloud"></i>カテゴリー</a></li>
CSS
.pop-menu-list-a{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
・Flexboxを使って孫要素まで高さを揃える方法
・Flexbox playground