自作サイト作成 HTMLbody基本編
ではではでは！
実際に表示される部分（body）を作成していきましょう＾＾
まずサイトは大きく分けて３つに分類されます。
この状態が１カラムといわれる状態です。
で内容部分を２つに分けると２カラム、
３つに分けると３カラムになります。
まず大枠（緑枠）のグループから作成します。
グループ分けをするには『div』というタグを使います。
『<div >～</div>』はセットで作成して下さい。
最初のdivの後ろに『id="container"』というのがありますが
『container』というこのグループの名前だと思って下さい。
別に『oowaku』でも『sotowaku』でもわかりやすい名前にしても大丈夫です。
一番最初のdivタグでサイト表示の横幅を指定します。
サイズの指定や文字の大きさなどはCSSで作成するので
ドンドン進んでいきますね＾＾
で作成していくとdivの中にdivが幾つも入ってくると
混乱をしてしまいます・・・
そのため目印をつけるようにします。
<!--container-->～<!--/container-->と書くと
サイト上には表示されず目印をつけることができます。
<!--サイト表示ここから-->～<!--サイト表示ここまで-->など
自分のわかり易い形で書いておきましょう。
（『!』や『-』の数を変えないようにして下さい）
続いて赤枠・青枠を書きます。
<!--▼ヘッダー-->
<div id="header">～</div>
<!--▲ヘッダー-->
<!--▼メイン-->
<div id="main">～</div>
<!--▽フッター-->
<div id="footer">～</div>
<!--△フッター-->
<!--▲メイン-->
こんな感じになりましたか？
あ、いい忘れてました。。。
このようなHTMLやCSSを作成するときは『Crescent Eve』を使うと便利です。
バックが白なので見にくいかもしれませんが。。。
ヘッダー部分に『h1』タグを入れてサイトタイトルを明記します。
hタグは数字が小さいものが必ず上にくるようにして下さい。
h1・h2・h3・h4とかh1・h2・h3・h3などといった順番になるようにします。
通常サイトタイトルがh1、記事タイトルがh2となるので
h1は重複しないのが普通です。
次はサイドバーを作成してみましょう。
で。。。なのですが、左・真ん中・右といった３つにいきなり分けることができません。
なのでまず２つに分けてそれを更に２つに分けるといったことをします。
とりあえず２カラムのサイトから作成してみましょう。
<!--▽メインコンテンツ-->
<div id="main-contents">
<h2>記事タイトル</h2>
<p>文面・文面・文面</p>
</div>
<!--△メインコンテンツ-->
<!--▽サイドバー-->
<div id="sidebar">
<!--▽▽サイドコンテンツ-->
<div class="menu">
<div class="title"><p>コンテンツタイトル</p></div>
<p>サイドコンテンツ文面</p>
</div>
<!--△△サイドコンテンツ-->
</div>
<!--△サイドバー-->
一気に増えましたが・・・大丈夫ですか？
メインコンテンツの部分は実際の記事に当てはまります。
そしてサイドバー内にあるサイドコンテンツは
カテゴリーとか商品であったりとかのパーツになります。
・・・
『ん？』と違和感を感じたあなた！
ちゃんとよく見ていますね＾＾
サイドコンテンツの部分が『div id』ではなく
『div class』となっています。
『id』というのは記入した部分にしか使わない場合に使用し、
『class』は何度も使うときに使用します。
先程も書いた通りサイドバーには
カテゴリーや商品など同じように何度もパーツを使うので
このような形で書きます。
なので実際には
<!--▽サイドバー-->
<div id="sidebar">
<!--▽▽サイドコンテンツ-->
<div class="menu">
<div class="title"><p>プロフィール</p></div>
<p>サイドコンテンツ文面</p>
</div>
<!--△△サイドコンテンツ-->
<!--▽▽サイドコンテンツ-->
<div class="menu">
<div class="title"><p>カテゴリー</p></div>
<p>サイドコンテンツ文面</p>
</div>
<!--△△サイドコンテンツ-->
<!--▽▽サイドコンテンツ-->
<div class="menu">
<div class="title"><p>おすすめ商品</p></div>
<p>サイドコンテンツ文面</p>
</div>
<!--△△サイドコンテンツ-->
</div>
<!--△サイドバー-->
というふうに使います。
サイドコンテンツの中身もタイトルと文面を分けてあげることで
タイトル部分に色をつけたり画像を貼ったりできるようになります。
では最後の部分のフッターです。
ここには勝手にサイト内の文面や画像を使わないように
著作権を明記しておきます。
（書いておいてもパクる人は勝手にパクるのですが・・・）
<!--▽フッター-->
<div id="footer">
<!--copyright-->
<div id="copyright">
Copyright (C) 2009 サイト名 All Rights Reserved.
※当サイトのテキスト・画像等すべての転載転用、商用販売を固く禁じます。
</div>
<!--copyright-->
</div>
<!--△フッター-->
『そういえば何でフッターが内容の中に入っているの？』
と思うかもしれませんが、
入れないとフッターが変な位置に表示されてしまうからなんです＾＾；
どこに表示されるか気になる人は
次の基本CSSソースと一緒にUPしてみて下さい＾＾；
では今日のまとめです＾＾
<body>
<!--container-->
<div id="container">
<!--▼ヘッダー-->
<div id="header">
<h1>サイトタイトル</h1>
</div>
<!--▲ヘッダー-->
<!--▼メイン-->
<div id="main">
<!--▽メインコンテンツ-->
<div id="main-contents">
<h2>記事タイトル</h2>
<p>文面・文面・文面</p>
</div>
<!--△メインコンテンツ-->
<!--▽サイドバー-->
<div id="sidebar">
<!--▽▽サイドコンテンツ-->
<div class="menu">
<div class="title"><p>プロフィール</p></div>
<p>サイドコンテンツ文面</p>
</div>
<!--△△サイドコンテンツ-->
<!--▽▽サイドコンテンツ-->
<div class="menu">
<div class="title"><p>カテゴリー</p></div>
<p>サイドコンテンツ文面</p>
</div>
<!--△△サイドコンテンツ-->
<!--▽▽サイドコンテンツ-->
<div class="menu">
<div class="title"><p>おすすめ商品</p></div>
<p>サイドコンテンツ文面</p>
</div>
<!--△△サイドコンテンツ-->
</div>
<!--△サイドバー-->
<!--▽フッター-->
<div id="footer">
<!--copyright-->
<div id="copyright">
Copyright (C) 2009 サイト名 All Rights Reserved.
※当サイトのテキスト・画像等すべての転載転用、商用販売を固く禁じます。
</div>
<!--copyright-->
</div>
<!--△フッター-->
</div>
<!--▲メイン-->
</div>
<!--/container-->
</body>
私の場合はHTMLとCSSの同時進行で作成するのですが
慣れないうちは混乱するだけなのでとりあえずHTMLだけ
一気に型を作成してみました。
なんとかここまで理解して下さいね＾＾；
＜＜編集後記＞＞
私がいるロー●ンではクジのイベントをよくやっています。
別に１等・２等があるわけではないのですが、
目玉商品というのがあるんですね。
しか～し・・・
その目玉商品を初回から引き当てる恐怖のお方がいます（笑
前回のキティちゃんの土鍋に引き続き
今回のコーヒーメーカーも即効手にされました(ノ_・。)
でもでも多数の商品が残っている状態で毎回引き当ててしまって
申し訳ないからと来る度に毎回食料品と一緒に
目玉商品がなくなってもクジを引いてくれる
と～～ってもありがたいお客様でもあります＾＾
っていうか・・・３週間ぐらいのくじ引き期間中で
３～４日で毎度毎度目玉商品が消えるのは・・・
オーナーの運が相当悪いのでしょうかね（笑
弊社へのお問い合わせ、メッセージはこちらから。
コメントする