JavaScript + Ajax 実践サンプル集 - 3段組（パターン６）

3段組（パターン６）　《プログラマーがネットで副収入を得る方法とは》

説明コード関連書籍コメント投稿

このサンプルは、Webページを３段組で表示します。パターン６では、段が固定、固定、可変の順になっています。ブラウザのウィンドウをリサイズすると幅が変わります。ウィンドウをリサイズするには、「３段組パターン６」をクリックしてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS Play - Flexible Layout(3 Columns one fixed widths flex|fix|flex)</title>
  <style type="text/css">
    body
    {
      font-size: 76%;
      font-family: "trebuchet MS" , verdana, arial, sans-serif;
      background: #f0f0f0;
      word-wrap: break-word;
    }
    #header
    {
      background: #a31e39;
    }
    #outer1
    {
      float: left;
      width: 40%;
      background: #e0d0d0;
    }
    #outer2
    {
      float: left;
      width: 200px;
      background: #b0b0b0;
      padding: 10px;
    }
    #outer3
    {
      background: #e0e0e0;
      margin-left: 40%;
    }
    #outer1, #outer2, #outer3
    {
      padding-bottom: 32767px;
      margin-bottom: -32767px;
    }
    #wrapper
    {
      overflow: hidden;
      background: #e0e0e0;
    }
    #footer
    {
      clear: both;
      background: #455c5a;
    }
    .content
    {
      padding: 10px;
    }
    .contentright
    {
      padding: 10px;
      margin-left: 220px;
    }
    h1
    {
      font-size: 20px;
      margin: 0;
      padding: 10px 0;
      color: #fff;
    }
    h3
    {
      font-size: 18px;
      margin: 0;
      padding: 8px 0;
    }
    p
    {
      font-size: 12px;
      line-height: 1.5em;
      margin: 0;
      padding: 5px 0;
    }
    #footer p, #header p
    {
      color: #fff;
    }
    #footer a
    {
      color: #fff;
    }
    #footer a:hover
    {
      text-decoration: none;
    }
  </style>
  <!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outer3 {
display:inline; 
float:left; 
margin-left:0; margin-right:0;
}
.contentright {margin-left:0;}

#wrapper {display:inline-block;}
</style>
<![endif]-->
</head>
<body>

<div id="header">
    <div class="content">
      <h1>
        ３段組（変動幅｜固定幅|可変幅）</h1>
      <p>
        ブラウザのウィンドウをリサイズしてみてください。 このページではイメージを一切使用していません。
      </p>
    </div>
  </div>
  <div id="wrapper">
    <div id="outer1">
      <div class="content">
        <h3>Left 40%</h3>
        <p>
          Lorem ipsum vis cu primis epicuri evertitur, qualisque cotidieque vel ei. Eos no
          falli quidam efficiendi, eu mei ignota appetere incorrupte, eam in nominati petentium
          theophrastus. Ut cum latine definiebas, eum cibo tamquam honestatis no. Oratio eruditi
          menandri ex eum, eum splendide intellegam omittantur ei, ad pri viderer ancillae
          urbanitas.
        </p>
        <p>
          Per quodsi ponderum ad, vim at illum erant putent. Te mutat ullamcorper quo, ad
          aliquip graecis convenire nec. Tempor torquatos temporibus eam eu, at commune legendos
          ullamcorper sed, graeci cotidieque accommodare an duo.
        </p>
        <p>
          Ne ius oratio audiam consetetur, eius ancillae consetetur nam ad, vix erroribus
          efficiantur ea. Est alia soleat atomorum at, his imperdiet contentiones definitiones
          et, cu vero corrumpit euripidis sed. Ei etiam vituperatoribus ludus usu, eos option
          sapientem in, an everti saperet eleifend qui.
        </p>
      </div>
    </div>
    <div id="outer2">
      <h3>Center 200px</h3>
      <p>
        Lorem ipsum vis cu primis epicuri evertitur, qualisque cotidieque vel ei. Eos no
        falli quidam efficiendi, eu mei ignota appetere incorrupte, eam in nominati petentium
        theophrastus. Ut cum latine definiebas, eum cibo tamquam honestatis no. Oratio eruditi
        menandri ex eum, eum splendide intellegam omittantur ei, ad pri viderer ancillae
        urbanitas.
      </p>
    </div>
    <div id="outer3">
      <div class="contentright">
        <h3>Right 'rest'%</h3>
        <p>
          Lorem ipsum vis cu primis epicuri evertitur, qualisque cotidieque vel ei. Eos no
          falli quidam efficiendi, eu mei ignota appetere incorrupte, eam in nominati petentium
          theophrastus. Ut cum latine definiebas, eum cibo tamquam honestatis no. Oratio eruditi
          menandri ex eum, eum splendide intellegam omittantur ei, ad pri viderer ancillae
          urbanitas.
        </p>
        <p>
          Per quodsi ponderum ad, vim at illum erant putent. Te mutat ullamcorper quo, ad
          aliquip graecis convenire nec. Tempor torquatos temporibus eam eu, at commune legendos
          ullamcorper sed, graeci cotidieque accommodare an duo.
        </p>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="content">
      <p>
        Copyright ©2009</p>
    </div>
  </div>
  
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

3段組（パターン６）　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

3段組（パターン６） 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

3段組（パターン６）　《プログラマーがネットで副収入を得る方法とは》