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

CSS

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

 状態:-  閲覧数:1,482  投稿日: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 CSSで直前の要素を取得するセレクタはない。ので、直後の要素を取得してマイナス設定値を指定しました。 29
    6 リンクを新しいタブで開く/IE 29
    7 使用していないCSSをチェックする、標準的な方法を知りたい 29
    8 リストタグではない、リスト内画像の縦位置調整 29
    9 ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー 28
    10 textareaを手動リサイズできない時は、ブラウザを落としてみる 27
    11 いい感じのロゴを見つけたら、そのサイトへのリンクを張っていくページ 27
    12 HTML5では、inputタグの閉じタグを付与しない 26
    13 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 26
    14 (ショートカットキーで拡張機能を起動する)拡張機能のキーボード割り当て 26
    15 格好が良いロゴを見つけたら、そのページへのリンクを張っていくエントリー 26
    16 Bootstrapをどこまで理解するか? 26
    17 「兄弟要素の兄要素を選択するCSSセレクタ」は存在しない 25
    18 右クリック出来るのに、コピペ出来ないWebページ。2020 年 24
    19 navタグで定義している部分だけCSSが効かない【html5】 24
    20 タグの"submit"属性の見た目を、CSSで変更しようとしてハマる 24
    2023/10/04 23:11 更新
    週間人気ページランキング / 9-27 → 10-3
    順位 ページタイトル抜粋 アクセス数
    1 RGB ⇔ Lab | 色変換(色) 26
    1 鉄道会社毎のカラーコード | カラーコード(色) 26
    2 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 24
    3 「bgcolor」「background-color」「background」の違い | CSS 17
    4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 15
    5 画像大きさ | 他サイト調査(HTML) 14
    5 RGBの種類 / ビットカラー | RGB(色) 14
    6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 13
    7 Design 0 11
    7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 11
    8 「東京都」のカラーコード取得は難しい | カラーコード(色) 10
    8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 10
    8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 10
    9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 9
    9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 9
    9 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 9
    9 デザイン変更 | Webデザイン(デザイン) 9
    10 16進数カラーコード / 2進数 8
    11 「position:absolute;」指定する際は、必ず(親要素を含む)祖先要素の何れかで「position」を明示的に指定 | position(CSS) 7
    11 「属性」「プロパティ」「アトリビュート」の違い | CSS 7
    2023/10/4 1:01 更新