CSSで要素の横幅をブラウザの画面幅100％まで広げる方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSで要素の横幅をブラウザの画面幅100％まで広げる方法について解説しています。最初に横幅の継承の仕組み、htmlタグとbodyタグの横幅の初期値について説明します。次に要素の横幅を100％まで広げる際の書き方について学びましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSで要素の横幅をブラウザの画面幅100％まで広げる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
要素の横幅をブラウザの画面幅100％まで広げる方法について詳しく説明していくね！
お願いします！
横幅の基本的な指定方法
htmlタグとbodyタグでは、あらかじめ幅が100%に規定されています。
この初期値が定められているため、ブラウザの画面の左右の横幅は初期値では広がっているといえるでしょう。
bodyタグの直下にブロックレベル要素のタグを定義すると、自然に横幅は100%となります。
ブラウザの画面の左右まで広がるため、 CSSからプロパティのwidthとその値で変更が可能です。
要素の横幅をブラウザの画面幅100％まで広げる方法
ブロックレベル要素は、親要素から幅を継承した場合、親要素の幅が100%であれば、自然にブラウザの画面の最大の幅（100%）まで広がります。
インライン要素の横幅については、自動調整されます。
インライン要素の幅をブラウザの画面の最大幅まで広げる場合は、ブロックレベル要素への変更が必要です。
実際に書いてみよう
単純な例として、最大の幅の値が100%で統一されている場合は、簡単にブラウザの画面の最大の幅に合わせられます。
大枠のレイアウトは、80%~90%に定義されており、その内部の一部の要素だけ、ブラウザの画面幅と同じ100%に広げなければならないこともあります。
この場合では、ブラウザの画面の最大の幅の値を1000pxに固定した場合を基に計算も必要です。
親要素の幅を80%に定めた場合、子要素の幅の値として100%は、親要素の80%の幅と同じとなるでしょう。
ブラウザの画面の最大の幅を1000pxに仮定した場合、80%の指定は、800pxになります。
その子要素の幅に100%を指定しても、800pxまでにしかなりません。
親要素の20%の不足分である200pxを補うためには、子要素は20%だけでなく5%分の追加が必要です。
しかし、上記の計算が求められるレイアウトにしなければならない時は滅多にないため、覚えておきましょう。
執筆してくれたメンター
| 井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |
CSSで要素の横幅をブラウザの画面幅100％まで広げる方法が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。
