スタイルシート(CSS)によるHTMLページの段組み 実験と解説のページ

実行すると以下のようになります。

バナー用

アクセスカウンター用

ヘッダー
左段

幅は 130px(ピクセル)に固定してあります。
右段

幅は 170px(ピクセル)に固定してあります。

中央段

サンプルなので、効果が判りやすいように各段を点線で縁取りしています。

左右の段は固定幅で、この中央段だけがフレキシブルになっています(マウスで左右にページの幅を変えてみると、お判りいただけます)。

ページの中に左右段組みの無い通常幅の段を突然出現させて自然にミックスすることも自由自在です!

この段は左右分割の右半分です!
この段は片側に画像を配置し、もう一つの段に解説や、説明文を入れるような使い方をしています。
この段は左右分割の左半分です!
マウスで左右にページの幅を変えてご確認くださいw
このように、どんな段も発想次第でもっと自由に組み合わせできると思います♪

ホーム

解説

BOφWY時代の布袋寅泰さんは神様です!」サイト用に作ったものです。
実際のサイトでは一見Tableを駆使して作ったか、もしくは、複数ページから成るフレーム別な構成かのように見えますが、上のサンプルをご覧いただいてお解かりのように、実は普通のHTML、しかも1ページのみの、ごく単純な構成です(^^;
その仕組みは、すべてCSSファイル(カスケードスタイルシート: hiroshi1986.css )で定義しているだけです。
尚、ブログをやっていて、そのデザインを変更した経験のある方なら、この構造は簡単にご理解いただけるかと思います。

実験

グレー窓のコード部分をドラッグしてコピー&ペーストできます。

column_setting.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>HTMLページの段組み 実験と解説のページ / hiroshiのホームページ作成テクニック</title>
  5. <link href="../../sample/css/hiroshi1986.css" rel="stylesheet" type="text/css" />
  6. </head>
  7. <body>
  8. <h1>HTMLページの段組み 実験と解説のページ</h1>
  9. <p>実行すると以下のようになります。</p>
  10. <p id=top-ban_block>バナー用</p>
  11. <p id=access-counter_block>アクセスカウンター用</p>
  12. <div class=header>
  13. ヘッダー
  14. </div>
  15. <div class=left_frame-3p>
  16. 左段<br /><br />幅は 130px(ピクセル)に固定してあります。
  17. </div>
  18. <div class=right_frame-3p>
  19. 右段<br /><br />幅は 170px(ピクセル)に固定してあります。
  20. </div>
  21. <div class=center_frame-3p>
  22. <p>中央段</p>
  23. <p>サンプルなので、<b>効果が判りやすいように各段を点線で縁取り</b> しています。</p>
  24. <p>左右の段は固定幅で、この中央段だけがフレキシブルになっています (マウスで左右にページの幅を変えてみると、お判りいただけます)。</p>
  25. </div>
  26. <div class=clear></div>
  27. <div class=nf-contents>
  28. <p>ページの中に左右段組みの無い通常幅の段を突然出現させて自然にミックスすることも自由自在です!</p>
  29. </div>
  30. <div class=herf_frame-right>
  31. この段は左右分割の右半分です!<br />
  32. この段は片側に画像を配置し、もう一つの段に解説や、説明文を入れるような使い方をしています。
  33. </div>
  34. <div class=herf_frame-left>この段は左右分割の左半分です!<br />ページの左右幅を変えてご確認くださいw<br /> このように、どんな段も発想次第でもっと自由に組み合わせできると思います♪
  35. </div>
  36. <p class=footer>フッター</p>
  37. </body>
  38. </html>
hiroshi1986.css
  1. .header
    {
    text-align: center;
    margin: 0px;
    padding: 0px 0px 5px;
    font-size: 110%;
    font-weight: bold;
    font-style: oblique;
    border: thin dotted;
    }
  2. .footer
    {
    clear: both;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 0.5em;
    margin: 0%;
    border: thin dotted;
    }
  3. #top-ban_block
    {
    float: left;
    border: thin dotted;
    }
  4. #access-counter_block
    {
    float: right;
    line-height: 2.5ex;
    font-size: 85%;
    border: thin dotted;
    }
  5. .herf_frame-left
    {
    margin: 0em;
    padding: 1em;
    border: thin dotted;
    }
  6. .herf_frame-right
    {
    float: right;
    clear:left;
    width: 48%;
    padding: 1em;
    border: thin dotted;
    }
  7. .left_frame-3p
    {
    float: left;
    width: 130px;
    padding: 1ex;
    border: thin dotted;
    }
  8. .right_frame-3p
    {
    float: right;
    width: 170px;
    padding: 1ex;
    border: thin dotted;
    }
  9. .center_frame-3p
    {
    float: left;
    padding: 1ex;
    margin: 0px -1.5% 0px 0px;
    text-align: justify;
    vertical-align: middle;
    border: thin dotted;
    }
  10. .clear
    {
    clear:both;
    }
  11. .nf-contents
    {
    clear: both;
    padding-left: 6em;
    padding-right: 6em;
    line-height: 1.5em;
    border: thin dotted;
    }