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

はじめに

株式会社TOKOSのフロントエンドエンジニアのタクヤです！

今回は『要素をその親要素いっぱいに広げる方法』をご紹介したいと思います！　初心者の方にもわかりやすいようにaタグで作成したボタンを用いて解説します！

要素をその親要素いっぱいに表示する方法は下記2パターンです。

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

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

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

子要素であるaタグに対してdisplay: blockを指定することで、インライン要素からブロック要素へと変わります。

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

aタグにdisplay: blockを指定してブロック要素にすると、デフォルトで親要素の幅いっぱいに広がるようになります。

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

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

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

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

今回は「要素を親要素いっぱいに広げる方法」というテーマでお送りしてきました！
もう一度おさらいですが、「要素を親要素いっぱいに広げる方法」は

の2つです。
Web制作でコーディングをしている方やCSSを勉強中の方のお役に立てたら嬉しいです！
CSSの基礎固め学習にはこちらの書籍がおすすめです。ぜひご覧になってCSSの知識を深めていきましょう。