TECH I.S.

CSS レイアウト - widthとmax-width


width、max-width、margin: auto;の使用

前の章で述べたように、ブロックレベルの要素は常に利用可能な全幅を占めます(可能な限り左右に広がります)。

ブロックレベル要素のwidthを設定すると、要素がコンテナの端にまで広がることがなくなります。次に、marginをautoに設定して、コンテナ内の要素を水平方向の中央に配置できます。要素は指定された幅を占め、残りのスペースは2つの余白に均等に分割されます。

この<div>要素の幅は500ピクセルで、marginはautoに設定されています。


ノート:上記の<div>に関する問題は、ブラウザウィンドウが要素の幅より小さい場合に発生します。次に、ブラウザは水平スクロールバーをページに追加します。

この状況では、代わりにmax-widthを使用すると、ブラウザによる小さなウィンドウの処理が改善されます。これは、サイトを小型デバイスで使用できるようにする場合に重要です。

この<div>要素の最大幅は500ピクセルで、マージンはautoに設定されています。


ヒント:2つのdivの違いを確認するには、ブラウザウィンドウのサイズを幅500ピクセル未満に変更します。

上記の2つのdivの例を次に示します。

div.ex1 {   width: 500px;   margin: auto;   border: 3px solid #73AD21; } div.ex2 {   max-width: 500px;   margin: auto;   border: 3px solid #73AD21; }

自分で試してみる »



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細