【html/CSS】aタグを改行する、縦に並べる方法

「aタグ同士を縦に並べたい！」

「aタグ内のテキストの途中で改行したい！」

aタグ間やaタグ内で改行する（縦に並べる）方法を解説します。

aタグ間で改行

【html】aの後にbr

<br>は改行するためのhtmlタグです。基本的には改行したい箇所にbrを入れましょう。

<a href="#">aタグ1</a><br>
<a href="#">aタグ2</a><br>
<a href="#">aタグ3</a>

【html】aをdivやliで囲む

divやliのブロック要素は縦に並ぶ特徴があります。このブロック要素内にaタグをいれることで改行させます。

<ul>
    <li><a href="#">aタグ1</a></li>
    <li><a href="#">aタグ2</a></li>
    <li><a href="#">aタグ3</a></li>
</ul>

「・」がある箇条書きにしたい場合はli、したくない場合はdivやpを使いましょう。

【CSS】aにdisplay:block

「display:block」は要素をブロック要素にするCSSです。aタグをブロック要素にすることで縦に並び改行されます。

<style>
.example>a{
    display: block;
}
</style>
<div class="example">
    <a href="#">aタグ1</a>
    <a href="#">aタグ2</a>
    <a href="#">aタグ3</a>
</div>

aタグをブロック要素にするとクリック範囲も広がります。

aタグ内で改行

【html】aの中でbr

<br>は改行するためのhtmlタグです。aタグの後だけではなく、aタグの中でも使えます。

<a href="#">aタグ<br>改行したいテキスト</a>

【html】任意の範囲をdivやpで囲む

ブロック要素の前後は縦に並ぶ特徴があります。ブロック要素であるdivやp、h2でaタグを囲むと改行されます。

<a href="#">aタグ<div>改行したいテキスト</div></a>

html5からはaタグの中にブロック要素を入れることができるようになっています。

ただし、その場合はaタグもブロック要素にしたほうがいいでしょう。

【CSS】任意の範囲をspanで囲んでdisplay:block

aタグの中にdivやpがあると崩れる、気持ち悪い、という場合はspanで囲んでdisplay:blockを指定しましょう。

<style>
.example2{
    display: block;
}
</style>
<a href="#">aタグ<span class="example2">改行したいテキスト</span></a>

html5より前ではaタグの中にブロック要素を置けなかったためこの方法が主流でした。

【まとめ】aタグを改行する方法

aタグ間で改行

【html】aの後にbr
【html】aをdivやliで囲む
【CSS】aにdisplay:block

aタグ内で改行

【html】aの中でbr
【html】任意の範囲をdivやpで囲む
【CSS】任意の範囲をspanで囲んでdisplay:block

以上、aタグ間やaタグ内で改行する（縦に並べる）方法でした。