ホーム > HTMLサンプル

2015/06-2018/01/09

HTML ページレイアウト

目次
  1. 可変幅のレイアウト
  2. 2段組のレイアウト (2018)
  3. 関連

可変幅のレイアウト

max-width, min-width

TestHTML_div_width_min_max1.html
可変幅の div のサンプル。max-width, min-width で最大幅、最小幅を指定。

TestHTML_page_layout01.html
文章のレイアウト例。
imgタグのサンプル - 画像の配置。

@media でウインド幅にあわせて CSS を変更

TestHTML_css_media01.html
ページの幅が変わると文字サイズや余白の大きさが変わるサンプル。
CSS @media(max-width) のサンプル。

TestHTML_img_width_min_max2.html
ウインド幅によって、div の幅、文字サイズ、画像の幅、余白を可変させるサンプル。

2段組のレイアウト (2018)

div レイアウトサンプル - div の float は 慣れないと混乱しやすい話がある。

TestHTML_layout_2column_11.html
左が固定幅(目次)、右が可変幅(本文)のレイアウト。

TestHTML_layout_2column_11_1.html
幅が狭いときは目次を非表示にする。

TestHTML_layout_2column_12.html
左が可変幅(本文)、右が固定幅(目次)のレイアウト。

TestHTML_layout_2column_12_1.html
幅が狭いときは目次を非表示にする。

関連

目次
gorogoronyan@gmail.com
inserted by FC2 system