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|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: 180px;
    padding: 10px;
    background: #e0d0d0;
  }
  #outer2
  {
    float: left;
    width: 180px;
    padding: 10px;
    background: #b0b0b0;
  }
  #outer3
  {
    background: #c0c0c0;
    padding: 10px;
    margin-left: 400px;
  }
  #outer1, #outer2, #outer3
  {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
  }
  #wrapper
  {
    overflow: hidden;
    background: #c0c0c0;
  }
  #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>
<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outer3 {
float:left; 
display:inline; 
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">
      <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="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">
      <h3>Right 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>
      <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 id="footer">
    <div class="content">
      <p>
        Copyright ©2009</p>
    </div>
  </div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

3段組（パターン３）

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

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

3段組（パターン３）

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!