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 fix|flex|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
  {
    background: #e0e0e0;
    margin-right: 30%;
    margin-left: 200px;
    padding: 10px;
  }
  #outer3
  {
    float: right;
    width: 30%;
    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">
      <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">
      <div class="content">
        <h3>Right 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>
      </div>
    </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 実践サンプル集 (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段組（パターン５）　《プログラマーがネットで副収入を得る方法とは》