2カラムに続いて3カラム用HTMLCSSテンプレートを作ってみた。
下記のソースは 3カラム用HTMLCSSテンプレートサンプルページ のもの。
<?xml version="1.0" encoding="utf-8"?><!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" xml:lang="ja" lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Style-Type" content="text/css" /> <title>3カラム用HTMLCSSテンプレートサンプルページ</title><meta name="Description" content="概要" /><meta name="Keywords" content="キーワード" /> <link rel="stylesheet" href="/template/3col/css/default.css" type="text/css" /></head><body><div id="wrapper"> <div id="head"> <h1>3カラム用HTMLCSSテンプレートサンプルページ</h1> <p id="logo"><a href="/template/3col/" title="3カラム用HTMLCSSテンプレートサンプルページ">ロゴ</a></p> </div> <div id="headmenu"> <ul><li><span>メニュー1</span></li><li><a href="/template/3col/">メニュー2</a></li><li><a href="/template/3col/">メニュー3</a></li> <li><a href="/template/3col/">メニュー4</a></li><li><a href="/template/3col/">メニュー5</a></li></ul> </div> <div id="body"> <div id="center"> <h2>トップページ</h2> <p>ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶ご挨拶</p> <h3>新着情報</h3> <ul> <li><span>2012/06/26</span> 3カラム用のテンプレートを公開しました。</li> <li><span>2012/06/26</span> 3カラム用のテンプレートを公開しました。</li> <li><span>2012/06/26</span> 3カラム用のテンプレートを公開しました。</li> <li><span>2012/06/26</span> 3カラム用のテンプレートを公開しました。</li> <li><span>2012/06/26</span> 3カラム用のテンプレートを公開しました。</li> <li><span>2012/06/26</span> 3カラム用のテンプレートを公開しました。</li> <li><span>2012/06/26</span> 3カラム用のテンプレートを公開しました。</li> <li><span>2012/06/26</span> 3カラム用のテンプレートを公開しました。</li> </ul> </div> <div id="left"> <h3 style="margin-top:0">見出し1</h3> <ul> <li><a href="/htmlcss/template3col.html#html">3カラムhtmlソース</a></li> <li><a href="/htmlcss/template3col.html#css">3カラムcssソース</a></li> </ul> <h3>見出し2</h3> <ul> <li><a href="/">システムエクスプレス株式会社</a></li> </ul> </div> <div id="right"> <h3 style="margin-top:0">見出し3</h3> <ul> <li><a href="/htmlcss/template2col.html#html">2カラムhtmlソース</a></li> <li><a href="/htmlcss/template2col.html#css">2カラムcssソース</a></li> <li><a href="/template/2col/">2カラムサンプル</a></li> </ul> </div> <br class="clear" /></div> <div id="foot"> <p id="footmenu">|<span>メニュー1</span>|<a href="/template/3col/">メニュー2</a>|<a href="/template/3col/">メニュー3</a>| <a href="/template/3col/">メニュー4</a>|<a href="/template/3col/">メニュー5</a>|</p> <p id="copy">Copyright(C) systemexress.co.jp All rights reserved.</p> </div> </div></body></html>
body{ text-align:center; margin:0; padding:0; background-color:#f0f0f0; } p,pre,li,dt,dd,th,td,label,textarea,h1,h2,h3,h4,h5,h6{ font:11pt Arial, Helvetica, sans-serif; letter-spacing:1px; color:#333333; text-align:left; word-break:break-all; } input[type="text"]{ font:11pt Arial, Helvetica, sans-serif; letter-spacing:1px; color:#333333; text-align:left; } p,pre,li,dt,dd,th,td,label,h4,h5,h6{ line-height:18pt; } h1,h2,h3,h4,h5,h6,th,dt{ font-weight:bold; } h4,h5{ font-size:10pt; } p,pre,h5,h6,table{ margin:12px auto; } form{ margin:0; } a,label{ color:#4f5f83; cursor:pointer; text-decoration:none; } a:hover,label:hover{ color:#86aee9; } img{ border:none; } table{ width:100%; border-collapse:separate; border-spacing:2px; } td{ padding:6px; background:none; border:solid 1px #f5f5f5; } th{ text-align:center; background-color:#f5f5f5; } th span{ color:red; font-weight:normal; margin-left:2px; } table ul{ margin:0 0 0 15px; } ul{ margin:10px 0 10px 25px; padding:0; } ol{ margin:10px 0 10px 30px; padding:0; } dl{ margin:10px auto; } dd{ margin:10px auto 10px 20px; } textarea{ width:95%; } .clear{ clear:both; } #wrapper{ margin:10px auto; width:1040px; background-color:#ffffff; } #head,#headmenu,#body,#foot{ margin:0 auto; width:1000px; } h1{ margin:0; font-size:9pt; height:30px; line-height:30px; font-weight:normal; } #logo{ margin:0; } #logo a{ display:block; height:60px; width:300px; border:dotted 1px #f0f0f0; text-align:center; line-height:60px; } #logo a:hover{ background-color:#f9f9f9; } #headmenu{ margin-top:20px; } #headmenu *{ height:30px; line-height:30px; } #headmenu ul{ list-style:none; margin:0; } #headmenu li{ float:left; background-color:#f9f9f9; } #headmenu a,#headmenu span{ display:block; margin:1px; width:198px; height:28px; line-height:28px; text-align:center; background-color:#ffffff; } #headmenu a:hover,#headmenu span{ background-color:transparent; } #body{ margin:20px auto; position:relative; top:0; } #center{ width:560px; margin:0 220px; } #left{ width:200px; float:left; position:absolute; top:0; left:0; } #right{ width:200px; float:right; position:absolute; top:0; right:0; } h2,h3{ border-bottom:solid 1px #d6dbdf; text-indent:10px; } h2{ height:48px; line-height:48px; font-size:22pt; margin:0 auto 20px; } h3{ height:36px; line-height:36px; font-size:12pt; margin:20px auto; } #footmenu{ text-align:center; } #footmenu a, #footmenu span{ margin:0 20px; } #copy{ text-align:right; }
Copyright(C) systemexpress.co.jp All Rights Reserved. Author Takayuki Yukawa