これは、どのように単純な2つのカラムを使用する上でのCSSレイアウトを作成するチュートリアルです。

レイアウトは、ヘッダー、メインコンテンツのカラムは、サイドバー、フッターで構成されます。 一度どのように必然的なInternet Explorerのバグを知っているすべての困難に対処するためには非常に基本的なレイアウトではなく、 CSSでは作成してください。

1 。 基本的な構造

まず第一に、私たちは基本的なHTML構造を作成：

 > <div id = "header" > </div> <div id = "sidebar" > </div> <div id = "main" > </div> <div id = "footer" > </div> </div> <div = "page"番号> <div = "header" > < /部> <div番号 = "sidebar" > < /部> <div番号 = "main" > < /部> <部 番号 = "フッター番号" > < /部> < /部> 
 その後、我々はさまざまなセクションの一部のコンテンツを置く： 
 > <div id = "header" > <h1> Company Name </h1> <h4> Type your slogan </h4> </div> <div id = "sidebar" > <h2> Navigation </h2> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Srevices </a> </li> <li> <a href = "#" > Contact </a> </li> <li> <a href = "#" > Sitemap </a> </li> </ul> </div> <div id = "main" > <h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing  elit. <div = "page"番号> <div < / h1 > <h4>を入力しスローガン< / H4を > < = "header" > <h1> 会社名のID /部>番号<div = "sidebar" > <h2>ナビゲーション< /水素>は<ul> <li>の<a のHREF = "#" >ホーム< / a > < /李> <li>の<a のHREF = "#" >について問い合わせ< / a > < /李> <李>の<a のHREF = "#" > Srevices < / a >を< /李> <li>の<a のHREF = "#" >連絡< / a > < /李> <li>の<a のHREF = "#" >サイトマップ< / a > < /李> < /のUL > < /部> <div番号 = "main" > <h2>コンテンツ< /水素> <p> Loremイプサムかなしみamet 、 consectetuer dipiscing elit座る。 ごっ分娩モンテス、ムシnascetur ridiculus表示。  2002年1月1日Loremイプサムかなしみ、 consectetuer adipiscing elit amet座る。 ごっ分娩モンテス、ムシnascetur ridiculus表示。  > <h2> Footer </h2> </div> </div> 2002年1月1日< / p > < /部> <div番号 = "footer" > <h2>フッター< /水素> < /部> < /部> 

2 。 CSSコード

さて、 CSSコードを作成します：

 margin : 0 ; padding : 0 ; } body { font-size : 100 %; font-weight :normal ; font-family :Arial , Helvetica, sans-serif ; } * html, body { height : 100 %; min-height : 100 % /*firefox*/ ; } / *スタイルの2つのカラムのレイアウト* / * （マージン： 0 ;パディング： 0 ; ）体（フォントの大きさ： 100 ％ ;フォント重量：ノーマル ;フォントファミリー：ゴシック 、ヘルベチカ、 サンセリフ系 ; ） *はHTML 、体（高さ： 100 ％ ;分の高さ： 100 ％ / * Firefoxの* / ; ） 
 margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } HTML形式、 ＃ページ （マージン： 0 ;パディング： 0 ;高さ： 100 ％ ; ） ＃ページ （マージン： 0 自動 ;パディング： 0 ;幅： 1009px ;高さ： 100 ％ ; ） 
 ; } a :hover { text-decoration :underline } ul,ol,li { margin : 0 ; padding : 0 ; } h1,h2,h3,h4,h5,h6 { margin : 0 ; padding : 10px 0 0 20px ; } h1 { font-size : 28px ; } h2 { font-size : 24px ; } h3 { font-size : 18px ; } h4 { font-size : 12px ; } h5 { font-size : 10px ; } p { margin : 0 ; line-height : 18px ; padding : 0 0 10px 20px ; font-size : 12px ; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } #header { margin : 0 ; padding : 0 ; width : 100 %; height : 151px ; display :block ; background-color : #eeeeee ; } #sidebar { float :left ; margin : 0 ; padding : 0 ; display :inline /*internet explorer*/ ; width : 200px ; height : 100 %; background-color : #cccccc ; } #sidebar ul { list-style-type :none ; } #sidebar ul li { display : inline /*internet explore*/ ; } #sidebar ul li a { padding : 3px 4px ; display :block ; margin : 0px 0 0 16px ; text-decoration :none ; color : #0000E8 } #sidebar ul li a :hover { color : #CC0000 } #main { margin : 0 ; padding : 0 ; float :left ; display :block ; width : 809px ; height : 100 %; background : #dddddd } #footer { margin : 0 ; padding : 0 ; display :block ; width : 100 %; height : 50px ; background : #eeeeee ; overflow :hidden ; } （テキスト装飾：なし ; ） ： （テキスト ホバー -装飾：下線 ）のUL 、オフィスレディー、李（マージン： 0 ;パディング： 0 ; ） H1とH2に、のH3 、 H4を、 h5 、 h6 （マージン： 0 ;パディング： 10px 0 0 20px ; ） h1 （フォントの大きさ： 28px ; ）のH2 （フォントの大きさ： 24px ; ） （ h3のフォントサイズ： 18px ; ） H4を（フォントの大きさ： 12px ; ） h5 （フォントの大きさ： 10px ; ） p （マージン： 0 ;ラインの高さ： 18px ;パディング： 0 0 10px 20px ;フォントサイズ： 12px ; ） ＃ページ （マージン： 0 自動 ;パディング： 0 ;幅： 1009px ;高さ： 100 ％ ; ） ＃ヘッダ （マージン： 0 ;パディング： 0 ;幅： 100 ％ ;高さ： 151px ;表示：ブロック ; 背景色 ： ＃ eeeeee ; ） ＃サイドバー （フロート：左 ;マージン： 0 ;パディング： 0 ;表示：インライン / * Internet Explorerの* / ;幅： 200px ;高さ： 100 ％ ; 背景色 ： ＃ cccccc ; ） ＃サイドバーのUL （リストスタイルのタイプ：なし ; ） ＃サイドバーのUL李（ 表示 ： インライン / *インターネットを探る* / ; ） ＃サイドバーのUL李（パディング： 3px 4px ;表示：ブロック ;マージン： 0px 0 0 16px ;テキスト装飾：なし ; 色 ： ＃ 0000E8 ） ＃サイドバーのUL李一：ホバー （ 色 ： ＃ CC0000 ） ＃メイン （マージン： 0 ;パディング： 0 ;フロート：左 ;表示：ブロック ;幅： 809px ;高さ： 100 ％ ; 背景 ： ＃ dddddd ） ＃フッター （マージン： 0 ;パディング： 0 ;表示：ブロック ;幅： 100 ％ ;高さ： 50px ; 背景 ： ＃ eeeeee ;オーバー：隠し ; ） 

最後に行われています。 我々はシンプルな2カラムのCSSを参照してくださいここでは例を作成しているlayout.Click