とりあえず２週に１回くらいの更新を目指します
さて今回のHP作成日記は
CSSとサイトレイアウトのお話し
あなたが今見ているページも
CSSで構成されています
ブログしかやってない人にはCSSって？って人も多いかと思います
CSS=Cascading Style Sheets（カスケード スタイル シート）の略で
｢スタイルシート｣や、そのまま｢CSS｣と呼ばれます
どこに、どんな装飾をして、サイズや位置を指定したりする為に使います
今見てるページもそうでしょ？
上にタイトルや右とか左にメニューとかがあって
真ん中に本文が来る
しかもここみたいにレンタルブログなんてやってる所のCSSは
個人では真似できない位、完璧ですばらしいレイアウトです
このレイアウトはCSSで場所や位置、サイズ等が決まっています
正直これは最初構築するのが面倒くさいです
ただ最初さえ乗り越えると後が楽になるのも確か
個人的に思うメリット・デメリットは
メリット
・HTMLの記述が少ない→結果、サイトの閲覧が軽い
・自由な配置ができる
・SEO的に有利？！（これはWEB上で見た事なので、実際はわかりません・・・）
デメリット
・最初は何をしていいかわからず、戸惑うばかり
・ブラウザによって見え方が違う（特にIE)
・慣れるまで構築に時間が掛かる
CSSを使ってサイトを構築するのに1項目作るのに、ググって試しての繰り返しで
自分は3時間くらい掛かります
では、実際どう使って、どう見えるようになるのか
はこパーク を使って簡単に説明します
CSSの使い方は
まずCSSファイルを作ります
HPエディタ（ビルダー等）を使って作成する方がほとんどなので
大抵、そのソフト内にCSSエディターなんかも入ってます
メモ帖とかワードパッドなんかでも十分です
当サイトではbase.cssと名前を付けました。
次にそれをサイトに反映させる為
<LINK rel="stylesheet" href="base.css" type="text/css">と
HTMLに記述します
このページはbase.cssを参照してレイアウトしますよ～って意味のタグです
これもHPエディターソフトを使ってればほぼ勝手にやってくれます
さていよいよ配置のレイアウトします
まず基本中の基本
ペ－ジ全体のレイアウトを決めます
topside
main
foot
これを覆うよう（青枠）にpackを配置
実際にサイトで使っている値は
#pack { width: 900px;
height: 100%;
min-height: 100%;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;}
#top { width: 700px;
height: 135px;
auto ;
margin-left: auto;
margin-right: auto;}
#side { width: 190px;
float: left;
height : 100%;}
#main { width: 500px;
height: auto;
clear: none;
float: right;
left: auto;
right: auto;
margin-left: 5px;
padding-bottom: 100px;}
#foot { background-color: lime;
width: 700px;
height: 50px;
clear: both;
margin-left: auto;
margin-right: auto;
margin-top : 100px;}
はい、初めて見たときは何がなにやらさっぱりです
紐解いていきましょう
一つ一つをブロックにして
更に全体を一つのブロックとしてあります
packってのが非常に重要で
この中でレイアウトを決めていきます
まずサイズを決めます
width: 横幅 ｢全体を９００ｐｘ、topとfottを７００ｐｘにしてあります｣
height: 高さ（縦の幅）｢高さはそれぞれのブロックで決めて、全体を１００％にしてあります｣
packより他が大きくなってはいけません
全体がおかしくなってしまいます。
次に真ん中にくるsideとmain
まずsideを左に回りこみさせ、サイズを決めます
次にmainを右に回り込ませ、同じくサイズを決めます
それがfloatという値と
右と左合わせて７００ｐｘの範囲内になるようにサイズ調整
ここはpackで決めたサイズの範囲内ならOKです
そしてfootを両者に対して回り込みの解除をする
clear: both;です
次に全体の表示を真ん中にしたいので
packに対して
margin-right: auto;
margin-left: auto;
右と左、両方のマージンをオートにすると全体のセンタリングができます
しかし、ここでIEはセンタリングしてくれません
ここはかなり迷いました
方法は何個かあるのですが
一番簡単に全体のセンタリングをするのは
HTMLに style="text-align:center; と書いてしまうのが簡単かと思います
ただ、これだとそれぞれのブロックの中身までセンタリングされてしまいます
幸い当サイトではそのレイアウトでもそんなに影響がなかったので
センタリングされては困る部分だけ
align="left"（左寄せ）と記述して、これを回避しています。
サイトの上にある｢はこパーク｣のロゴとかがそれです。
ここまで、できれば後は
HTMLに記述するだけ
書き方はDIVで区切っていきます
<DIV id="ここに記述">～ここに文字等～</DIV>
わかりやすく色付け
<DIV id="pack">
<DIV id="top">タイトルロゴ等</DIV>
<DIV id="side">サイドメニュー</DIV>
<DIV id="main">文字とか色々</DIV>
<DIV id="foot">一番下に来る部分（主に著作権表示とか）</DIV>
</DIV>
実際に使っているCSSとHTMLなので
はこパーク を開いて右クリック→ソース表示で、どう使ってるのかが見えます
長々と書きましたが
CSSの基本の部分です
CSSの事は自分もまだ少ししか理解してません
一から書くのは無理です
まずスペルがわからん
ググってコピって張って編集して・・・の繰り返しです
理解するまで難しいですが
サイト構成を見たり、作るのが面白いと、思ってしまう
