display:block;はクリック範囲を広げる際に便利
（更新 ）
display:block;は領域を確保するCSSですが、親要素の横幅いっぱいまで広がり、中身の高さに合わせて自動で伸びる箱のイメージになります。
例えば、お菓子を<div>で囲い、その<div>にdisplay:block;を指定した場合、以下の領域になります。
div {
display:block;
}■display:block;の例
🍪🍫🍬
上記がデフォルトの状態ですが、widthやheightを指定することで、四角いブロックの箱のような領域を確保することができます。
div {
display:block;
width:150px;
height:100px;
}🍪🍫🍬
このdisplay:block;は前後で改行されるため、上記のように横にスペースが空いていたとしても、横方向に並ぶことはなく、縦方向に積まれていきます。
上記がdisplay:block;の基本的な性質になります。
ただ、実際には<div>のdisplayの値はデフォルトでblockのため、あえて「display:block;」を記載する必要はありません。また、<p>や<img>などもデフォルトでblockのため、これらも同様に記載する必要はありません。
そのため、CSSで「display:block;」を実際に記載するケースについては、主に<a>や<span>などのインライン要素を意図的にブロック要素にする用途がメインになります。
| display | display:block;記載の必要性 | 説明 |
|---|---|---|
| block | ✕ | ブロック要素ではデフォルトでdisplay:block;になるため、記載は不要。（div、p、h1など） |
| inline | ブロック化する場合は〇 | インライン要素をブロック化したい場合にはdisplay:block;の記載が必要。（a、spanなど） |
| inline-block | — | デフォルトでinline-blockになる要素はそもそも存在しない。 |
| none | ✕ | デフォルトでnoneになる要素は主にコード系のみ。（script、styleなど） |
なかでも特に、リンクの<a>タグのクリック範囲を広げる際に使用するケースが多いです。ほかにも使用するケースはありますが、ここではリンクタグ<a>のクリック範囲を広げる用途に限定してご紹介します。
display:block;でリンクのクリック可能範囲を広げる方法
上記のように、display:block;で親要素の幅いっぱいまで領域が広がるため、<a>タグに設定するとクリック可能な範囲を広げることができます。
例えば、何も指定しないデフォルトの場合、<a>タグはインライン要素（display:inline;）のため、クリック可能な範囲は以下の文字列のみの領域になります。
この状態で<a>タグのCSSにdisplay:block;を指定した場合、以下のように改行された上でブロック要素となり、クリック可能な範囲が横いっぱいまで広がります。
高さについては、文字列の高さに自動的に調整されます。
以下のデモはボタンで切り替えて確認できます。
■デモ画面
当サイトのURLはhttps://www.homepage-tukurikata.com/です。
上記の場合は実用性がありませんが、関連記事やメニューのリストタグでdisplay: block;を使用するのは定番の方法となっています。
関連記事のリストタグでクリック範囲を広げる方法
関連記事やメニューのリストタグ<ul><li>のリンクについて、デフォルトでのクリック可能な範囲は以下のようになっています。
このリストにdisplay:block;を指定した場合、以下のようにクリック可能な範囲が横に広がります。
li a {
display: block;
background-color:#ffd8c2;
}
■デモ画面
さらに、高さも広げるには<a>タグにpaddingを指定します。
li a {
display: block;
padding:10px 0;
background-color:#ffd8c2;
}
li a:hover {
background-color:#fff;
}
■デモ画面
上記のように、関連記事の<a>タグにdisplay:block;を指定するとクリック可能な範囲を広げることができます。
モバイルサイトでタップ可能な範囲を広げる方法
上記のPCサイトと同様、スマホサイトでメニュー部分をタップしやすくする際にも、CSSで「display: block;」を指定することでタップ可能な範囲が広げることができます。
スマホではa:hoverが発動しないという違いはあるものの、基本的に上記PCサイトの場合と同様、<a>タグにdisplay:block;を記載するだけで問題ありません。
a {
display:block;
padding:10px;
}当サイトを例にしますと、何も設定しないデフォルトの状態では、リンクの<a>タグはインライン要素のため、その文字の狭い範囲しかタップすることができません。
この場合、リンクの<a>タグに「display: block;」を指定するとブロック要素になるため、その領域の広い範囲をタップできるようになります。
さらに、paddingを設定するとより広い範囲をタップできるようになります。
あとはリストタグのマーカーを非表示にしたり、枠線を付けるなどして調節すれば、このような形に仕上がります。
スマホサイトの場合、リンクなどのサイズを確実にタップできる大きさに設定する必要がありますが、Googleのヘルプページによると、タップ ターゲットのサイズは「7～10 mm 程度」がおすすめとのことです。
そのため、リンクをdisplay:block;で横幅いっぱいまで広げた上で、paddingで高さも出し、幅も高さも7～10 mm以上にすることをおすすめします。ただ、カーソルがすぐに反応してしまうため、コピペしにくくなるデメリットはあるかもしれません。