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

3段組（パターン１）

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

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

スタイルシートは、Firefox用に作成しています。そして、IEで動作しないときはIE固有のハックを追加しています。このサンプルで使用しているIE版ハックです。ちなみに、このサンプルでは、clearfixのハックは不要です。

<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outer2 {float:left; width:59.8%; background:#c0c0c0;}
/* for IE6 */
* html #wrapper {display:inline-block;}
</style>
<![endif]-->

<!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 all percentage widths)</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: 20%;
    background: #e0d0d0;
  }

#outer2
  {
    float: left;
    width: 60%;
    background: #c0c0c0;
  }

#outer3
  {
    float: right;
    width: 20%;
    background: #b0b0b0;
  }

#outer1, #outer2, #outer3
  {  
    padding-bottom: 32767px;
    margin-bottom: -32767px;    
  }

#wrapper
  {  
    overflow: hidden;
    background: #c0c0c0;  
  }
  
  #footer
  {
    clear: both;
    background: #455c5a;
  }
  
  h1
  {
    font-size: 20px;
    margin: 0;
    padding: 10px 0;
    color: #fff;
  }
  
  h3
  {
    font-size: 18px;
    margin: 0;
    padding: 8px 0;
  }
  
  .content
  {
    padding: 10px;
  }
  
  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 {float:left; width:59.8%; background:#c0c0c0;}

/* for IE6 */
* html #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 20%</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">
      <div class="content">
        <h3>Center 60%</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="outer3">
      <div class="content">
        <h3>Right 20%</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