小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

CSS段組レイアウト雛型（レイアウトテンプレート）

CSSレイアウト

CSS段組レイアウトテンプレートを公開します。
尚、IE系とFirefoxで見栄えを確認しています。


CSS段組レイアウトは大変で結構苦労しました。
なにかの参考になれば幸いです。


HTMLのボディ構造は以下としました。

  • ヘッダー
  • メニューバー
  • メインコンテンツ
  • サイドバー
  • フッター

メインコンテンツが左、サイドバーが右に並ぶCSS段組レイアウトになっています。
（２列左コンテンツ可変横幅右サイドバー固定横幅）


CSSの記述はボディ構造の『Summary layout』部分とその他の『Detail layout』部分に分けました。
尚、メインコンテンツが右、サイドバーが左に並ぶCSS段組レイアウトにするには、以下を参照願います。

CSS段組レイアウトテンプレートソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Description" content="ページの概要">
<meta name="Keywords" content="キーワード１,キーワード２,キーワードｅｔｃ">
<title>テスト</title>
<style type="text/css">
/*--- Summary layout ---*/
* {
    margin:0;
    padding:0;
    border-width:0;
}
body {
    text-align:center;
}
#main_container {
    width:96%;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    text-align:left;
}
#header_container {
    background-color:#ffffcc;
}
#menubar_container {
    background-color:#eeffff;
}
#contents_container {
    background-color:#ccccff;
    width:100%;
    clear:left;

    margin-right:-200px;
/*    margin-left:-200px; */
    float:left;
/*    float:right; */

}
#for_ie_wrapper {
    margin-right:200px;
/*    margin-left:200px;  */
}

#sidebar_container {
    background-color:#ffcccc;
    width:200px;
    float:left;
}
#footer_container {
    background-color:#ccffcc;
    width:100%;
    clear:both;
}

/*--- Detail layout ---*/
/*--- body ---*/
body {
    font-family: "ＭＳ Ｐゴシック", sans-serif;
}
#main_container {
    border: 1px solid #cccccc;
    background-color: #eeffff;
}

/*--- header ---*/
#header_container {
    padding: 1em 20px 1em;
}

/*--- footer ---*/
#footer_container {
    padding: 1em 0px 1em;
    text-align: center;
}

/*--- menubar ---*/
#menubar_container ul {
    width: 100%;
    list-style-type: none;
    background-color: #eeffff;
}
#menubar_container li {
    width: auto;
    float: left;
    border-right: 2px groove #cccccc;
    height:2.2em;
}
#menubar_container li a {
    text-decoration: underline;
    display: block;
    width: auto;
    padding: 0.5em 1em;
    background-color: #eeffff;
    color: #000000;
}
#menubar_container li a:hover {
    background-color: #99ccff;
    color: #ff0000;
}

/*--- sidebar ---*/
.sidetitle {
    padding: 0.5em 0;
    border-bottom: 1px solid #666666;
}
.sidenavi {
    list-style-type:none;
    margin-bottom:2em;
}
.sidenavi a {
    text-decoration:underline;
    display:block;
    width:170px;
    padding:0.5em 5px;
    background-color:#ffcccc;
    color: #000000;
}
.sidenavi a:hover {
    text-decoration:underline;
    background-color:#99ccff;
    color:#ff0000;
}

/*--- contents ---*/
#contents_container p {
    line-height:1.4em;
    margin-bottom:0.5em;
}
#contents_container ul {
    margin:1em 0 1em 20px; 
}
#contents_container ol {
    margin:1em 0 1em 28px; 
}
#contents_container li {
    margin-bottom:0.5em; 
}

/*--- h1〜h6 ---*/ 
h1,h2,h3,h4,h5,h6 {
    margin-bottom:0.5em;
    padding:5px 0 5px 5px;
    border-top:1px solid #888888;
    border-bottom:1px solid #888888;
}
h1 {
    font-size:large;
}
h2 {
    font-size:medium;
}
h3 {
    font-size:small;
}
h4 {
    font-size:x-small;
}
h5,h6 {
    font-size:xx-small;
}
</style>
</head>

<body>
<div id="main_container">

<div id="header_container">
<h1>見出し１</h1>
<p>テキスト</p>
</div>

<div id="menubar_container">
<ul>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
</ul>
</div>

<div id="contents_container">
<div id="for_ie_wrapper">
<h2>見出し２</h2>
<p>テキスト</p>
<p><a href="#">リンク</a></p>
<h3>見出し３</h3>
<ul>
<li>aaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbb</li>
</ul>
<ol>
<li>1111111111111</li>
<li>2222222222222</li>
</ol>
<h2>見出し2</h2>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>
</div>

<div id="sidebar_container">
<p class="sidetitle">サイドタイトル１</p>
<ul class="sidenavi">
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
</ul>
<p class="sidetitle">サイドタイトル２</p>
<ul class="sidenavi">
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
</ul>
</div>

<div id="footer_container">
<p>Copyright &copy; 著作権表記. All Rights Reserved.</p>
</div>

</div>
</body>
</html>

上記のサンプルページ:http://chaichan.lolipop.jp/src/sright.htm


この雛型でデザインが決まったら、style要素を外だしにして、xxstyle.cssにしたほうがいいですよ。


尚、本コンテンツのHTMLソースは、今後、ステップ毎に解説をしていきたいと思っています。
ですので、新カテゴリー『CSSレイアウト』としました。
これからの『CSSレイアウト解説シリーズ』を期待しないでお待ちください。
いや、ソースステップ毎の解説だと大変な数のネタになりますね（ネタ不足解消）。

追記：

上記のソース解説ページ