テンプレート作成Tips

ブログ | 2008/5/20 18:20
大枠の構成はこうです。
<div id="mainwrapper">
 <div id="header"></div>
 <div id="main">
   <div id="mainbar">
   </div>
   <div id="sidebar">
   </div>
 </div>
 <div id="footer"></div>
</div>

もう少し付け加えると、
<div id="statusbar"></div>
<div id="mainwrapper">
 <div id="header">
   <h1 id="logo"></h1>
   <h2></h2>
 </div>
 <div id="head-tab"></div>
 <div id="main">
   <div id="mainbar">
   </div>
   <div id="sidebar">
   </div>
 </div>
 <div id="footer">
   <div id="site-menu"></div>
   <div id="foot-menu"></div>
   <div id="copyright"></div>
 </div>
</div>
<div id="sitemap"></div>
<div id="fd"></div>

もっと付け加えると、
<div id="statusbar">
 <div id="status-menu"></div>
 <div id="self-menu"></div>
</div>
<div id="mainwrapper">
 <div id="header">
   <h1 id="logo"></h1>
   <h2></h2>
 </div>
 <div id="head-tab">
   <div id="kuzu"></div>
   <div class="tab-menu">
     <ul class="tab">
       <li></li>
       <li class="active"></li>
     </ul>
   </div>
 </div>
 <div id="main">
   <div id="mainbar">
     
     <div class="node">
       <h1 class="title first"></h1>
       <div class="status"></div>
       <div class="body">
         <h3></h3>
       </div>
       <div class="tag"></div>
       <div class="foot"></div>
       <div class="adsense"></div>
     </div>
     
     <div class="node">
       <h1 class="title"></h1>
       <div class="status"></div>
       <div class="body"></div>
       <div class="tag"></div>
       <div class="foot"></div>
     </div>
     
   </div>
   <div id="sidebar">
     <div class="side-top"></div>
     
     <div class="block">
       <div class="inb">
         <div class="sbt"><div></div></div>
         <h3></h3>
         <div class="contents"></div>
         <div class="sbb"><div></div></div>
       </div>
     </div>
     
     <div class="rss"></div>
     <div class="adsense"></div>
     
     <div class="side-btm"></div>
   </div>
 </div>
 
 <div id="multi-selector"></div>
 
 <div id="footer">
   <div id="site-menu"></div>
   <div id="foot-menu"></div>
   <div id="copyright"></div>
 </div>
</div>
<div id="sitemap"></div>
<div id="fd"></div>
こんな感じでしょうか。


数行で見た目を変える方法

1) サイドバーを左に
#mainbar {float: right}
#sidebar {float: left}

2) タイトルをデカく
h1.title {font-size: 3em}

3) 固定幅に
#mainwrapper {
 width: 800px;
 margin: 0 auto;
}

4) リンクを黒文字かつアンダーラインに
a {text-decoration: underline;}
a:link, a:visited {color: #000;}
a:hover, a:active  {
 color: #000;
 text-decoration: none;
 border-bottom-style: none;
}

5) statusbarを固定に
#statusbar {position: absolute;}

タブメニュー絡み
#head-tab
.tab-menu
あたりは、ちょっとややこしいのでいずれ。
タグ
 
kuwa
IEでみると結構くずれてるなあ・・・
とりあえず、今あるのコツコツ修正していこう。
kuwa | 2008/05/21 17:12
縮小 拡大

ログインしておくと、後で編集が可能です。

Rottel内コンテンツ

ユーザー一覧

Rottelとは?
利用規約
開発飲料
利用者の声
ヘルプ
close