【html/CSS】imgやaタグなどインライン要素をブロック要素に変える方法

2022年05月21日

「aタグをブロック要素にしてクリック範囲を広げたい！」

「spanにwidthを指定するためにブロック要素にしたい！」

imgやaタグなどインライン要素をブロック要素に変える方法を解説します。

【結論】display:blockを指定する
display:blockを指定するメリット・理由
display:blockを指定するデメリット
- ブロックかインラインかで効くCSSが変わる
【まとめ】インライン要素をブロック要素に変える方法

【結論】display:blockを指定する

display:blockを指定するとインライン要素をブロック要素に変えることができます。

display:blockを指定した場合

aタグ span

<style>
.example>*{
    /*コレ*/display: block;
}
</style>
<div class="example">
    <img width="200" src="cat.jpg" alt="">
    <a href="#">aタグ</a>
    <span>span</span>
</div>

何もしていない状態

aタグ span

<div>
    <img width="200" src="cat.jpg" alt="">
    <a href="#">aタグ</a>
    <span>span</span>
</div>

インライン要素はふつうに横に並びますが、display:blockを指定してブロック要素にしたことで縦並びになります。

CSS displayについて詳しくはこちら↓

CSS displayの書き方・一覧【23種説明】

CSS displayの書き方を23種デモ付きで全部説明します！

この記事を読む

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

display:blockを指定するメリット・理由

【インライン要素全般】widthなどのCSSが効くようになる

下記はインライン要素とブロック要素で効くCSS、効かないCSSの表です。

	インライン要素	ブロック要素
width	×	○
height	×	○
margin-top,bottom	×	○
margin-left,right	△ （autoは×）	○
padding	△ （上下に重なる）	○
background	○	○
border	○	○

インライン要素ではwidthやmarginなどよく使うCSSが効きません。

display:blockを指定してブロック要素にすると効くようになります。

【aタグ】クリック範囲が広がる

aタグをブロック要素にするとwidthを指定できるようになります。これによりaタグの範囲を任意に広げることができ、同時にクリック範囲を広げることができます。

インラインのaタグブロックのaタグ

<style>
.example2{
    border: 1px solid #333;
    padding: 20px;
    background: #e3f2d9;
    margin: 20px;
    width: 300px;
}
</style>
<a href="#" class="example2">インラインのaタグ</a>
<a href="#" class="example2" style="display: block;">ブロックのaタグ</a>

上記「インラインのaタグ」にもpaddingを指定し、クリック範囲は広がっていますが、paddingの上下がうまく効いていないため、クリック範囲を広げるにはやはりdisplay:blockを指定しましょう。

【img】下の空白を消せる

imgの下には空白があり、これが邪魔になるときがあります。

そんなときはimgにdisplay:blockを指定すると下の空白を消せます。

下記は親要素にborderを指定して、imgと同じサイズにしようとした例です。

↑インラインのimg

↓ブロックのimg

<style>
.example3{
    border: 1px solid #333;
    width: fit-content;
}
</style>
<div class="example3"><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>
<p>↑インラインのimg</p>
<p>↓ブロックのimg</p>
<div class="example3"><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="" style="display: block;"></div>