企業HPでよく見る逆U字(3列)テンプレートの汎用的CSSを実装してみた。
やっぱり・・・
暇なんですね、パパは(失笑)
で、よく企業ホームページとかで実装しているCSSを
なるべく簡潔に実装してみました。
今回は3列+ヘッダ+フッタです。
Dreamweaverの初期テンプレのCSSとかチョイ複雑すぎるんで、
割と初心者向けのCSSです。
使いたい方は勝手に使ってください。
@charset "utf-8"; /* CSS Document */ /* ウエンのパパ風呂 */ body { text-align:center; } *{ padding:0; margin:0; } .html_body { width:902px; margin: 0 auto; float:none; } .contents { width:901px; } .header { width:901px; } .navigation { width:198px; float:left; } .main_contents { margin: 0 24% 0 23.5%; } .right_contents { width:180px; float:right; } .footer { width:901px; }
で、表示するHTMLはこんな感じです。
<!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>パパが作った汎用的なCSSの例</title> <link rel="stylesheet" type="text/css" href="Untitled-4.css"/> </head> <!-- ・全体幅 900px ・ナヴィゲーション 198px ・メインコンテンツ 500px ・メインコンテンツ 180px (全体センタリング) --> <body> <div class="html_body"> <div class="header"> <!-- ここにヘッダーを記入--> </div> <div class="contents"> <div class="navigation"> <!--ここに左ナヴィゲーションを記入--> </div> <div class="right_contents"> <!-- ここに右コンテンツを記入--> </div> <div class="main_contents"> <!--ここに中央コンテンツを記入--> </div> </div> <div class="footer"> <!--ここにフッターを記入--> </div> </div> </body> </html>
以上
ピクセル数とか間違えなければ
ちゃんと表示できるはずですが、保証はなしです。
こんなん作って欲しい!!
というのがあったら言って下さい。
ただ、気まぐれでしか作りません。
ピクセル数とか間違えなければ
ちゃんと表示できるはずですが、保証はなしです。
こんなん作って欲しい!!
というのがあったら言って下さい。
ただ、気まぐれでしか作りません。