aタグのクリック範囲を、囲っているタグ範囲まで拡大する

CSS

リストタグのクリック適用範囲を拡大する

 状態:-  閲覧数:987  投稿日:2015-07-13  更新日:2018-03-05

グローバルナビ作成


HTML
<ul>
 <li class="gnavi><a href="#">リスト</a></li>
 <li class="gnavi><a href="#">リスト</a></li>
 <li class="gnavi><a href="#">リスト</a></li>
 <li class="gnavi><a href="#">リスト</a></li>
</ul>


CSS
/*---------- 共通ページ ----------*/
/*グローバルナビ表示*/
.gnavi {
 display:inline-block;
 width: 100%; //クリックしたい大きさ
 height: 100%; //クリックしたい大きさ
}
.gnavi a {
 display: block; //これがポイント
 text-decoration: none;
}



CSS3では指定子要素を持つ親要素は選択不可だが、指定親要素を持つ子要素は選択可能

box-sizingは危険なCSS / レイアウトや位置がどうしても意図した通り設定できない場合は、box-sizingを疑う



類似度ページランキング
順位 ページタイトル抜粋
1 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する
  • 42
    2 aタグで複数のブロック要素を囲むやり方 39
    3 トリミングする際、範囲を決定する入力ボックスが表示されなかったら 37
    4 「使用できるソケットを待機しています」はクライアント側の問題? 34
    5 リストタグではない、リスト内画像の縦位置調整 29
    6 使用していないCSSをチェックする、標準的な方法を知りたい 29
    7 リンクを新しいタブで開く/IE 29
    8 ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー 28
    9 textareaを手動リサイズできない時は、ブラウザを落としてみる 27
    10 いい感じのロゴを見つけたら、そのサイトへのリンクを張っていくページ 27
    11 HTML5では、inputタグの閉じタグを付与しない 26
    12 格好が良いロゴを見つけたら、そのページへのリンクを張っていくエントリー 26
    13 Bootstrapをどこまで理解するか? 26
    14 「兄弟要素の兄要素を選択するCSSセレクタ」は存在しない 25
    15 navタグで定義している部分だけCSSが効かない【html5】 24
    16 右クリック出来るのに、コピペ出来ないWebページ。2020 年 24
    17 タグの"submit"属性の見た目を、CSSで変更しようとしてハマる 24
    18 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 24
    19 ページ内リンクの位置を微調整するためには、Negative margin を使用する 23
    20 指定兄弟要素(h1~h5タグ何れか)のmarginを取得して、指定要素に適用させたい 23
    2021/8/02 9:24 更新
    週間人気ページランキング / 7-26 → 8-1
    順位 ページタイトル抜粋 アクセス数
    1 画面キャプチャ | Chrome 拡張機能(ブラウザ) 51
    2 RGB ⇔ Lab | 色変換(色) 46
    3 血の色 / #b30000 / #360800 / #ff0000 | 色 31
    4 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
    5 RGBの種類 / ビットカラー | RGB(色) 24
    6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 23
    7 「属性」「プロパティ」「アトリビュート」の違い | CSS 21
    8 Design 0 20
    9 「bgcolor」「background-color」「background」の違い | CSS 15
    10 コズミックブルーが何色か分からない | 色 12
    10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 12
    11 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 11
    11 HSLとHSVの違い | 色変換(色) 11
    12 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 10
    13 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 9
    13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 9
    13 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 9
    13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 9
    13 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
    14 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
    2021/8/2 1:01 更新