【CSS入門】widthプロパティで要素の幅を設定する方法

CSSのwidthプロパティは、要素の幅を設定するためのプロパティです。固定幅や割合で指定でき、レイアウトの調整に不可欠です。

widthプロパティの基本的な使い方

CSSのwidthプロパティは、HTML要素の幅を設定するために使用されます。このプロパティを使用して、要素の幅をピクセル（px）、パーセンテージ（%）、エム（em）などのさまざまな単位で指定できます。
widthプロパティは、要素のレイアウトを調整し、ページデザインの一貫性を保つために非常に重要です。

固定幅の設定方法

固定幅を設定するには、widthプロパティに具体的な値を指定します。例えば、要素の幅を500ピクセルに設定する場合は次のように記述します。

この設定により、指定された要素の幅は常に500ピクセルになります。固定幅は、ボックスモデルの他のプロパティ（パディング、ボーダー、マージン）に影響を受けません。

割合での幅指定

パーセンテージを使用して幅を指定することで、要素の幅を親要素の幅に対する割合で設定できます。例えば、要素の幅を親要素の50%に設定する場合は次のように記述します

この設定により、要素の幅は親要素の幅の50%になります。パーセンテージ指定は、レスポンシブデザインを実現するために役立ちます。