borders

メイン内の１つめのセクションの h2 タグです。

メイン内の１つめのセクションの h3 タグです。

メイン内の１つめのセクションの p タグ１つ目です。

メイン内の１つめのセクションの p タグ２つ目です。

メイン内の２つめのセクションの h2 タグです。

メイン内の２つめのセクションの h3 タグです。

メイン内の２つめのセクションの p タグ１つ目です。

メイン内の２つめのセクションの p タグ２つ目です。

使われているCSS（抜粋）


body {
   background: #ddd;           /* bodyの背景色は薄い灰色 */
   border:     2px solid #000; /* bodyの境界線は黒色 */
   max-width:  1300px;         /* bodyの最大幅を1300pxに制限 */
}


#container {
    background-image:      url("../images/mahjongbg.jpg") ;
    background-attachment: fixed ;
    background-size:       100%;      /* containerに画像を fixed & 100%で描画 */
    max-width:             1200px;    /*containerの最大幅を1200pxに制限*/
}


header { border: 2px solid #f00; }  /* headerの境界線は赤色 */
main   { border: 2px solid #00f; }  /* main  の境界線は青色 */
footer { border: 2px solid #f00; }  /* footerの境界線は赤色 */

ブラウザの横幅を拡げる（1300px以上に拡げる）と、次の違和感のある事項が見てとれる。

bodyは1300px以上には拡がっていないが、背景色はブラウザの幅まで拡がっている。
#containerの背景画像は、描画範囲はcontainerに留まっているものの、拡大・縮小率はブラウザの横幅を100%としている。
(containerの横幅でも、bodyの横幅でもなく。)

その他のちょっとした実験場

<kbd>要素にキーボード風の装飾をあててみる

（例文）PCのブラウザで、スーパーリロード（通常のリロード：再読み込みより強い再読み込み）させるためには、Ctrlを押しながらF5を押します。

（例文）Toshiをタイプするには、次のようにキーボードで打鍵します。shift押しながらT, O, S, H, I