HTMLテンプレート【スタイルシート・ヘッダー編】
ども、サンデーアマグラマーNorimakiです。
久しぶりにブログが更新されていたと思ったら業務連絡かよ。
と思った方、すいません。
ということで、テーマに戻ります。テーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回まででHTMLの説明をしてきました。
HTMLのソースも提示しました。
ということで、HTML部分の説明は完了です。
あとは、HTMLにどのような、ID・クラスが設定されているかを
押さえて、スタイルシートに反映させるだけです。
HTMLの構造・要素は前回（HTMLテンプレート【コンテンツ書換編】）の
記事で説明したとおりですので、イマイチしっくり来ない。という方は
もう一度、前回の記事を読んでみてください。
で、今回はスタイルシートとHTMLの橋渡しについてです。
ソースを提示しましたので想像は付くかと思います。
しつこいようですが、再度、HTMLの構造を振り返ります。
まず、テンプレートを４つに分けました。
・ヘッダー
・本文
・サイドバー
・フッター
です。
ヘッダーには以下の要素があります。
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
・H1タグ
・グローバルメニュー
・リンク
です。
で、HTMLソースがこうです。Bodyタグ以下になります。
まずは、DivタグとID「Container」で表示部分をグループ化しています。
このグループの中にヘッダ、本文、サイドバー、フッタが所属します。
このグループに所属しないのは背景だけということになります。
そして、次にH1タグが来ています。ここでH1タグのスタイルを当てます。
h1{
font-weight:bold;
color:white;
}
みたいな感じです。
次に、ヘッダーとして、DivタグとID「Header」が来ています。
ここに、
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
が表示されます。
サイトタイトルには、H2タグと「SiteTitle」というクラスが
当てられています。で、リンクも貼られていますので、aタグの
スタイルも設定する必要があります。
次に、サブタイトルとサイト説明文ですが、いずれも、
pタグで囲まれており、サブタイトルが「SubTitle」というクラス、
サイト説明文が「SiteExp」というクラスが当てられています。
で、バナーですが、pタグで囲まれており、「AfBanner」
というクラスが当てられています。さらに、
aタグのスタイルも設定する必要があります。
それぞれ、スタイルシートで設定します。
次に、グローバルナビとリンクですが、予想外に長くなってしまったので、
次回にすることにします。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
久しぶりにブログが更新されていたと思ったら業務連絡かよ。
と思った方、すいません。
ということで、テーマに戻ります。テーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回まででHTMLの説明をしてきました。
HTMLのソースも提示しました。
ということで、HTML部分の説明は完了です。
あとは、HTMLにどのような、ID・クラスが設定されているかを
押さえて、スタイルシートに反映させるだけです。
HTMLの構造・要素は前回（HTMLテンプレート【コンテンツ書換編】）の
記事で説明したとおりですので、イマイチしっくり来ない。という方は
もう一度、前回の記事を読んでみてください。
で、今回はスタイルシートとHTMLの橋渡しについてです。
ソースを提示しましたので想像は付くかと思います。
しつこいようですが、再度、HTMLの構造を振り返ります。
まず、テンプレートを４つに分けました。
・ヘッダー
・本文
・サイドバー
・フッター
です。
ヘッダーには以下の要素があります。
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
・H1タグ
・グローバルメニュー
・リンク
です。
で、HTMLソースがこうです。Bodyタグ以下になります。
<div id="Container">
<h1>{$サイトキーワード}</h1>
<div id="Header">
<h2 class="SiteTitle"><a href="http://........">ここにサイトタイトルを</a></h2>
<p class="SubTitle">ここにサブタイトルを<br>ここにサブタイトルを<br></p>
<p class="SiteExp">ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。。</p>
<p class="AfBanner">
<a href="http://....."><img src="./images/banner.jpg"></a></p>
</div>
<div id="GlobalNavi">
<ul id="GL3">
<li class="GL1"><a href="URL">リスト</a></li>
<li class="GL2"><a href="URL">リスト</a></li>
<li class="GL3"><a href="URL">リスト</a></li>
</ul>
</div>
<div id="Links">
<ul>
<li class="Link1"><a href="URL1">リンク１</a> | </li>
<li class="Link2"><a href="URL2">リンク２</a> | </li>
<li class="Link3"><a href="URL3">リンク３</a></li>
</ul>
</div>
まずは、DivタグとID「Container」で表示部分をグループ化しています。
このグループの中にヘッダ、本文、サイドバー、フッタが所属します。
このグループに所属しないのは背景だけということになります。
そして、次にH1タグが来ています。ここでH1タグのスタイルを当てます。
h1{
font-weight:bold;
color:white;
}
みたいな感じです。
次に、ヘッダーとして、DivタグとID「Header」が来ています。
ここに、
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
が表示されます。
サイトタイトルには、H2タグと「SiteTitle」というクラスが
当てられています。で、リンクも貼られていますので、aタグの
スタイルも設定する必要があります。
次に、サブタイトルとサイト説明文ですが、いずれも、
pタグで囲まれており、サブタイトルが「SubTitle」というクラス、
サイト説明文が「SiteExp」というクラスが当てられています。
で、バナーですが、pタグで囲まれており、「AfBanner」
というクラスが当てられています。さらに、
aタグのスタイルも設定する必要があります。
それぞれ、スタイルシートで設定します。
次に、グローバルナビとリンクですが、予想外に長くなってしまったので、
次回にすることにします。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ