CSSで要素の横幅をブラウザの画面幅100％まで広げる方法を現役エンジニアが解説【初心者向け】

CSSで要素の横幅をブラウザの画面幅100％まで広げる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

横幅の基本的な指定方法

htmlタグとbodyタグでは、あらかじめ幅が100%に規定されています。

この初期値が定められているため、ブラウザの画面の左右の横幅は初期値では広がっているといえるでしょう。

bodyタグの直下にブロックレベル要素のタグを定義すると、自然に横幅は100%となります。

ブラウザの画面の左右まで広がるため、 CSSからプロパティのwidthとその値で変更が可能です。

 

要素の横幅をブラウザの画面幅100％まで広げる方法

ブロックレベル要素は、親要素から幅を継承した場合、親要素の幅が100%であれば、自然にブラウザの画面の最大の幅（100%）まで広がります。

インライン要素の横幅については、自動調整されます。

インライン要素の幅をブラウザの画面の最大幅まで広げる場合は、ブロックレベル要素への変更が必要です。

 

[PR] Webデザインで副業する学習方法を動画で公開中

実際に書いてみよう

単純な例として、最大の幅の値が100%で統一されている場合は、簡単にブラウザの画面の最大の幅に合わせられます。

大枠のレイアウトは、80%~90%に定義されており、その内部の一部の要素だけ、ブラウザの画面幅と同じ100%に広げなければならないこともあります。

この場合では、ブラウザの画面の最大の幅の値を1000pxに固定した場合を基に計算も必要です。

親要素の幅を80%に定めた場合、子要素の幅の値として100%は、親要素の80%の幅と同じとなるでしょう。

ブラウザの画面の最大の幅を1000pxに仮定した場合、80%の指定は、800pxになります。

その子要素の幅に100%を指定しても、800pxまでにしかなりません。

親要素の20%の不足分である200pxを補うためには、子要素は20%だけでなく5%分の追加が必要です。

しかし、上記の計算が求められるレイアウトにしなければならない時は滅多にないため、覚えておきましょう。

 

執筆してくれたメンター

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。