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 two fixed widths fix|flex|fix)</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: 180px;
    padding: 10px;      /* top,right,bottom,left */
    background: #e0d0d0;
  }
  #outer3
  {
    float: right;
    width: 180px;
    padding: 10px;      /* top,right,bottom,left */  
    background: #b0b0b0;
  }
  #outer2
  {
    background: #e0e0e0;
    margin: 10px 210px; /* top/bottom, left/right */
  }
  #outer1, #outer2, #outer3
  {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
  }
  #wrapper
  {
    overflow: hidden;
    background: #e0e0e0;
  }
  #footer
  {
    clear: both;
    background: #455c5a;
  }
  .content
  {
    padding: 10px;
  }
  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>

</head>
<body>

<div id="header">
    <div class="content">
      <h1>
        ３段組（固定幅|可変幅｜固定幅）</h1>
      <p>
        ブラウザのウィンドウをリサイズしてみてください。 このページではイメージを一切使用していません。
      </p>
    </div>
  </div>
  <div id="wrapper">
    <div id="outer1">     
      <h3>Left 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>
      <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 id="outer3">      
      <h3>
        Right 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>
      <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 id="outer2">      
      <h3>Center percentage</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>
  <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段組（パターン２）　《プログラマーがネットで副収入を得る方法とは》