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

css

はじめに

この記事の概要

株式会社TOKOSのフロントエンドエンジニアのタクヤです!
今回は『要素をその親要素いっぱいに広げる方法』をご紹介したいと思います!
初心者の方にもわかりやすようにaタグで作成したボタンを用いて解説します!

対象となる方

  • CSSを勉強中の方
  • Web制作でコーディングをしている方
  • 要素をその親要素いっぱいに表示する方法を知りたい方

結論

要素をその親要素いっぱいに表示する方法は下記2パターンです。
  • aタグに display:block を指定する方法
  • positionプロパティを使用する方法

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

コーディング

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.

終わりに

今回は「要素を親要素いっぱいに広げる方法」というテーマでお送りしてきました!
もう一度おさらいですが、「要素を親要素いっぱいに広げる方法」は
  • aタグに display:block を指定する方法
  • positionプロパティを使用する方法
の2つです。
Web制作でコーディングをしている方やCSSを勉強中の方のお役に立てたら嬉しいです!

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