【CSS】要素を親要素いっぱいに広げる方法！aタグで作成したボタンを用いて解説！

要素をその親要素いっぱいににする系は、初学者の方は必ずと言っていいほどぶち当たる壁ですが、とても簡単なのでぜひ覚えていってください！
それでは順番に解説していきます！

コーディング

aタグの親要素としてpタグを設けました。
親要素のpタグにaタグの大きさを合わせていきたいと思います。

まず、特に何も指定していないとこうなリます。
pタグとaタグそれぞれに色をつけたのでわかるかと思いますが、aタグは親要素であるpタグの目いっぱいの大きさはありません。これはaタグのdisplayプロパティがデフォルトでinlineであるからです。

See the Pen
Untitled by naru-takuya (@naru-takuya)
on CodePen.

aタグにdisplay:blockを指定する方法

子要素であるaタグに対して、display: block を指定することで、子要素の縦幅、横幅を指定することができるようになります。

前述した通り、aタグのdisplayプロパティはデフォルトだとinline(インライン要素)です。
インライン要素は横幅や縦幅の指定ができないため、親要素いっぱいに広がりませんでした。

aタグにdisplay: block を指定すると、インライン要素からブロック要素へと変わります。
ブロック要素になれば、横幅や縦幅の指定ができるようになります。

See the Pen
Untitled by naru-takuya (@naru-takuya)
on CodePen.

これで子要素が親要素いっぱいに広がりました。
今回はボタンのため、文字が中央にあったほうがいいのでスタイルを調整します。

See the Pen
Untitled by naru-takuya (@naru-takuya)
on CodePen.

positionプロパティを使用する方法

display: blockを指定する方法の他にpositionプロパティを使用する方法があります。

親要素であるpタグに対して、「position: relative;」を指定し、
子要素であるaタグに対して、「position: absolute;」を指定することで、子要素を親要素を基準に配置することができます。

See the Pen
Untitled by naru-takuya (@naru-takuya)
on CodePen.

要素が親要素いっぱいに広がりましたね。
文字が中央にあったほうがいいので、スタイルを調整します。

See the Pen
Untitled by naru-takuya (@naru-takuya)
on CodePen.

終わりに

CSSの基礎固め学習にはこちらの書籍がおすすめです。
是非ご覧になってCSSの知識を深めていきましょう。