ブログのテンプレート制作 #002
レイアウトはこのへんで一段落にします。
久しぶりの第二回目です。
近所のジョナサンでだらだら作ってたのであまり進んでおりませんが、ラフなレイアウト的なものはそろそろこのへんで良いかなと。次回からはもうちょっとグラフィックも入れてみたいかなぁ。
<!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>
<meta http-equiv="content--Type" content-="text/html; charset=utf-8" />
<title>title</title>
</head>
<body style="margin:0px; padding:0px; background:#ffffff; font-size:small;">
<div class="container-1000" style="width:1000px; margin:0px
auto; padding:0px; background:#d0d0d0;"><!-- container-1000 -->
<div class="header" style="width:1000px; height:92px; border:none;
margin:0px; padding:0px; background:#cccc66;"><!-- header -->
<div class="header-right" style="width:270px; margin:0px; padding:0px;
float:left; background:#ff9900;"><!-- header-left -->
<p>header-left あああああああああああああああああああああああああああ</p>
</div><!-- /header-left -->
<div class="header-right" style="width:730px; height:92px;
margin:0px; padding:0px; float:left; background:#cc6699;"><!-- header-right
-->
<p>header-right あああああああああああああああああああああああああああ</p>
</div><!-- /header-right -->
<div class="clearfix" style="clear:both; display:block; height:0px;
visibility:hidden;"><!-- clearfix -->
</div><!-- /clearfix -->
</div><!-- /header -->
<div class="navBar" style="width:1000px; margin:0px; margin-bottom:10px;
padding:0px; background:#ffcccc;" ><!-- navBar -->
<ul style="margin:0px; padding:0px; border-bottom:2px solid #000000;">
<li style="display:inline; margin:0px; padding:4px; border-right:1px
solid #000000;"><a href="#">メニュー</a></li>
<li style="display:inline; margin:0px; padding:4px; border-right:1px
solid #000000;"><a href="#">メニュー</a></li>
<li style="display:inline; margin:0px; padding:4px; border-right:1px
solid #000000;"><a href="#">メニュー</a></li>
<li style="display:inline; margin:0px; padding:4px; border-right:1px
solid #000000;"><a href="#">メニュー</a></li>
</ul>
</div><!-- /navBar -->
<div class="content-1000" style="width:1000px; border:none;
margin:0px; padding:0px; background:#ffff33;"><!-- content-1000 -->
<div class="content" style="border:none; margin:0px; margin-bottom:10px;
padding:0px; background:#ff6666;"><!-- content -->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content -->
</div><!-- /content-1000 -->
<div class="column-L530" style="width:530px; float:left;
border:none; margin:0px; padding:0px; background:#ffcccc;"><!-- column-L530
-->
<div class="content" style="width:520px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#ff6666;"><!-- content
-->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;
border:6px solid #000022;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content -->
<div class="content" style="width:520px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#ff6666;"><!-- content
-->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content -->
<div class="content" style="width:520px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#ff6666;"><!-- content
-->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content -->
</div><!-- /column-L530 -->
<div class="column-R470" style="width:470px; float:left;
border:none; margin:0px; padding:0px; background:#333333;"><!-- column-R470
-->
<div class="content-470" style="width:470px; border:none;
margin:0px; padding:0px; background:#c0c066;"><!-- content-470 -->
<div class="content" style="border:none; margin:0px; margin-bottom:10px;
padding:0px; background:#ff6666;"><!-- content -->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content -->
</div><!-- /content-470 -->
<div class="column-310" style="width:310px; float:left;
border:none; margin:0px; padding:0px; background:#ccffcc;"><!-- column-310
-->
<div class="content-300" style="width:300px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#9999ff;"><!-- content-300
-->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content-300 -->
<div class="content-300" style="width:300px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#9999ff;"><!-- content-300
-->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content-300 -->
</div><!-- /column-310 -->
<div class="column-160" style="width:160px; float:left;
border:none; margin:0px; padding:0px; background:#ccccff;"><!-- column-160
-->
<div class="content-160" style="width:160px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#9999ff;"><!-- content-160
-->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:8px;">.content-body only あああああああああああああああああああああああああああああああああああああああああああああ</p>
</div><!-- /content-body -->
</div><!-- /content-160 -->
<div class="content-160" style="width:160px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#9999ff;"><!-- content-160
-->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content-160 -->
</div><!-- /column-160 -->
<div class="clearfix" style="clear:both; display:block;
height:0px; visibility:hidden;"><!-- clearfix -->
</div><!-- /clearfix -->
</div><!-- /column-R470 -->
<div class="clearfix" style="clear:both; display:block;
height:0px; visibility:hidden;"><!-- clearfix -->
</div><!-- /clearfix -->
<div class="footer" style="width:1000px; height:92px; border:none;
margin:0px; padding:0px; background:#cccc66;"><!-- footer -->
<p>footer あああああああああああああああああああああああああああ</p>
</div><!-- /footer -->
</div><!-- /container-1000 -->
</body>
</html>
ちなみにですね、うちのブログの初期の頃はこんなデザインでした。
▼webdog初期デザイン
当時のITmediaなんかの印象が色濃いですね。こういう3カラム流行ってたしな。
ということで次回に続く。
【関連記事】
●ブログのテンプレート制作 #001
●モダンな3カラムのブログレイアウト
投稿者 ジェット☆ダイスケ : 2007年8月12日 02:50
