HTMLタグ講座！HTML独習ブログ

HTMLタグ講座１９　　文法の解説

サイト構築 HTMLタグ講座１９で使われた

HTMLタグの解説

スタイルシートを別ファイルで適用

【HTMLタグ構文】
ヘッド＜head＞でのHTMLタグ
＜link rel="stylesheet" href="index.css" type="text/css"＞
スタイル宣言は、スタイルシート「index.css」を適用する

２カラムシートのスタイル設定

【HTMLタグ構文】

＜div id="wrapper"＞←全体枠の設定
＜div id="header"＞←ヘッダーの設定
ここにヘッダーの内容が入ります
＜/div＞＜!-- /header --＞
＜div id="inner"＞←枠内余白設定
＜div id="contents"＞ ←本文設定

＜div class="contents-inner"＞ ←本文枠内余白設定

ここに内容本文が入ります
＜/div＞＜!-- /contents-inner --＞
＜/div＞＜!-- /contents --＞
＜div id="sidebar"＞ ←サイドバー設定

＜div class="sidebar-inner"＞ ←サイドバー枠内余白設定

ここにサイドバーの内容が入ります
＜/div＞＜!-- /sidebar-inner --＞
＜/div＞＜!-- /sidebar --＞
＜div class="clear"＞＜hr /＞＜/dir＞ ←崩れ防止クリア

＜/div＞＜!-- /inner --＞
＜div id="footer"＞ ←フッター設定

ここにフッターの内容が入ります
＜/div＞＜!-- /footer --＞
＜/div＞＜!-- /wrapper --＞

【CSSタグ構文】
/*この間の分はコメント文です*/

上記【HTMLタグ構文】で利用のスタイル宣言 id="***"や class="***" に相対するスタイル宣言が下記の内容です。
id="は、１ページ１カ所に使い、何度も使う物はclass="で使います。
２カラムにするには、サイドバーと本文と余白の幅を指定します。

#wrapper {
text-align: left;　
width: 780px;　←外枠幅を決める
margin: 0px auto 0px auto;
}

#inner {　　←全体の余白マージン
margin: 0px 10px 0px 10px;
}

#header {　　←ヘッダーの条件
margin: 0px 0px 0px 0px;
padding: 10px 20px 5px 20px;
background-color: #98FB98;
color: #FF8C00;
}

/*コンテンツ（本文）部分*/
#contents {
width: 500px;　←本文幅を決める
float: right;　←本文にしたい側に寄せる
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-left: 1px solid #003366;
}

.contents-inner {　 ←本文の余白マージン
margin: 20px 20px 20px 20px;
padding: 0px 0px 0px 0px;
}

/*サイドバー部分*/
#sidebar {
width: 240px;　←サイトバー幅を決める
float: left;　←サイトバーにしたい側に寄せる
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.sidebar-inner {　 ←サイドバーの余白マージン
margin: 20px 10px 20px 10px;
padding: 0px 0px 0px 0px;
}

.clear {clear:both; }　 ←崩れ防止のクリア設定
.clear hr { display:none; }

※上記＜＞は、誤表示防止のため全角を使ってます。

サイト構築 HTMLタグ講座１９終了