HTML: ページのレイアウト
可変幅のページ
CSS max-width, min-width
- TestHTML_layout_width_min_max1.html
可変幅の main のサンプル。max-width, min-width で最大幅、最小幅を指定する。
@media でウインド幅にあわせて CSS を変更する
- TestCSS_media01.html
ページの幅が変わると文字サイズや余白の大きさが変わるサンプル。 CSS @media(max-width) のサンプル。
ウインド幅によって、div の幅、文字サイズ、画像の幅、 余白を可変させるサンプル。
文章のレイアウトのサンプル。 float で画像の周囲にテキストを回りこませる例。
imgタグのサンプル - 画像の配置。
2段組のレイアウト (CSS flex) (2023/07)
CSS flex による 2段組のサンプル。 目次 (nav) が固定幅、本文 (main) が可変幅のサンプル。
TestCSS_flex_page02.html
@media でレスポンシブにしたサンプル。
CSS flex
(昔話) float を使った2段組
CSS flex が出てくる前の時代には、CSS float で
2段組みを作る方法がありました。
仕組みが複雑なので現在では大きなレイアウトで使う必要ありません。
float は画像の周囲にテキストを回り込ませたり、
li 要素を左右に並べるなど小さな部品の配置に適しています。
CSS float サンプル
imgタグのサンプル