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|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: 30%;
    background: #e0d0d0;
  }
  #outer2
  {
    background: #e0e0e0;
    margin-right: 200px;
    margin-left: 30%;
    padding: 10px;
  }
  #outer3
  {
    float: right;
    width: 180px;
    padding: 10px;
    background: #c0c0c0;
  }
  #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;}
#outer2 {
display:inline; 
float:left; 
margin-left:0; margin-right: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 30%</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="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 '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>
    </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選!