HTMLタグ講座19  文法の解説

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

HTMLタグの解説



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



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




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


【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="は、1ページ1カ所に使い、何度も使う物はclass="で使います。
2カラムにするには、サイドバーと本文と余白の幅を指定します。


#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タグ講座19終了

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

tag : HTMLタグ構文解説

HTMLタグ講座19 スタイルシートの別ファイル化と2カラムシート

サイト構築 HTMLタグ講座19

スタイルシートの別ファイル化と2カラムシート



今回から、先の講座まで学習タグを応用して、ネットショップサイト構築までの過程を学習します。

では、今回記入したHTMLタグの構文は以下の通りです。
(行数が増えたので、別々に図をクリックして拡大して見てください。)

【ヘッド部】
lesson19Ta1.jpg
【ボディ部】
lesson19Tb2.jpg

今回より、別ファイルで記入したCSSタグの構文は以下の通りです。
(図をクリックして拡大して見てください)
lesson19C2.jpg

このHTMLファイルと、CSSファイルを、タグ講座1の説明と同じ手順で、拡張子 .html と .css で保存してFC2にアップします。
すると、ブラウザでこのように見えます。
lesson19b2.jpg

文法の解説は次の記事で行います。

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

tag : HTMLタグ文書作成

ごあいさつ

ひでまる

このHTML独習ブログで、HTMLタグCSSタグホームページ作成の手順を初歩から解説しつつ、応用展開の技術を身につけたいと考えています。



HTML独習CSS独習できるHTMLタグ講座で、ホームページ作成をマスターして最終目標のネットショップ開設を行います。



これからホームページ作成に取り組みたいという方への参考になれば幸いです。

HTMLタグ講座
カテゴリ
HTMLタグ講座最新
HTMLタグ講座
記事全一覧表示

全記事を一覧表示する

HTMLタグ講座
HTML独習ホームページ

HTMLタグ講座
HTML独習ホームページ

ひでまるリンク
BlogRanking
HTML ホームページ