HTMLテンプレート【ベースHTML３】
ども、サンデーアマグラマーNorimakiです。
現在取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回から間が空いてしまいましたが続きを始めましょう。
HTMLソースを見て、手を入れようとしたときに、まずすべきことは
全体像の把握です。
HTMLソースを読み解くには、大体にして div タグを追っていけば、
構造は分かるようになっているはずです。
今回提示したHTMLソースも div タグを追っていくと理解しやすいと
思います。
<head>～</head>に関しては今回は省略します。
こんなもんだと思っておいてください。タイトルタグがありますよ
って事くらいは押さえておきましょう。
で、<body>～</body>に関して説明していきます。
大きく分けて次のような構造になっています。
・Container
・Header
・GlobalNavi
・Links
・Contents
・Pankuzu
・Main
・Item
・Sidebar
・LeftSidebar
・Menu
・MenuTitle
・MenuBody
・RightSidebar
・Menu
・MenuTitle
・MenuBody
・Footer
こんな感じですね。分かりにくいでしょうか。
一番大きな枠（ブロック）として、まず Container という名前をつけた
枠があり、それ以下の内容を、この Container ブロックが囲んでいます。
そして、Headerブロックがあって、ここにヘッダー画像や
サイトタイトルなどが表示されます。
その下にグローバルナビ、リンクがきて、コンテンツに入っていきます。
コンテンツは Contents ブロックで囲み、その中にパンくずリンクと
記事部分とサイドバー部分が入ってきています。
コンテンツ部分が終わると、最後にフッタとして Footer ブロックが
きてフッターを構成します。
という感じで、まずはHTMLの大枠を掴みます。このようにして、
修正したいところがどこのブロックにあるのかをまず始めに把握します。
その上で、修正したいところを探していきます。
ということで、今回はこの辺で。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
現在取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回から間が空いてしまいましたが続きを始めましょう。
HTMLソースを見て、手を入れようとしたときに、まずすべきことは
全体像の把握です。
HTMLソースを読み解くには、大体にして div タグを追っていけば、
構造は分かるようになっているはずです。
今回提示したHTMLソースも div タグを追っていくと理解しやすいと
思います。
<head>～</head>に関しては今回は省略します。
こんなもんだと思っておいてください。タイトルタグがありますよ
って事くらいは押さえておきましょう。
で、<body>～</body>に関して説明していきます。
大きく分けて次のような構造になっています。
・Container
・Header
・GlobalNavi
・Links
・Contents
・Pankuzu
・Main
・Item
・Sidebar
・LeftSidebar
・Menu
・MenuTitle
・MenuBody
・RightSidebar
・Menu
・MenuTitle
・MenuBody
・Footer
こんな感じですね。分かりにくいでしょうか。
一番大きな枠（ブロック）として、まず Container という名前をつけた
枠があり、それ以下の内容を、この Container ブロックが囲んでいます。
そして、Headerブロックがあって、ここにヘッダー画像や
サイトタイトルなどが表示されます。
その下にグローバルナビ、リンクがきて、コンテンツに入っていきます。
コンテンツは Contents ブロックで囲み、その中にパンくずリンクと
記事部分とサイドバー部分が入ってきています。
コンテンツ部分が終わると、最後にフッタとして Footer ブロックが
きてフッターを構成します。
という感じで、まずはHTMLの大枠を掴みます。このようにして、
修正したいところがどこのブロックにあるのかをまず始めに把握します。
その上で、修正したいところを探していきます。
ということで、今回はこの辺で。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ