北アルプス山麓ずくなし　Weblog

作業中は、My PCの中にフラッシュがあったので気にする程の重さは感じなかったがサーバへアップするとやはり重過ぎる。
原因としては、ページのレイアウトにテーブルタグを使っている為テーブル内のすべてのデータが読み込まれるまでページが開かないようだ・・・。
改善するには、大きなテーブルを細切れに分割し遅い部分は、遅くてもかまわないので軽い所から先に表示させれば待つストレスがなくなるらしい。

セルが重ね餅状態になっている所は、大きなテーブルをちょん切りやすく簡単であるが左右２列になっている部分は、ただちょん切れば重ね餅となってしまうのでダメである。

そこでスタイルシート（CSSファイル）の登場となるわけである。
スタイルシート初心者の私でも理屈は、わかっている。（理屈だけしかわからんのだ・・・。）

間違っているかも知れないがと断ってから書くが
まずテーブルをDIVタグに変更しIDかクラスを付ける。<div id="hogehoge">・・・・・・・・・</div>か
<div class="hogehoge">・・・・・・・・・・・・</div>とHTMLを区切る。
ここまでは、適当にhogehogeの名前を他とバッチングしないように付けるだけであるから簡単！

これからCSSファイルへの書き込みとなるがここからが問題となる。
例えば左側の列のIDをmenu、右の列のIDをmainとした場合

左列は、
div#menu {
width: ○○%;　　　　○○は、％指定かpix、emなどの単位指定
float: left;　　　　　　左列がleftである事は理解できるが
}

右列は、
div#main {
width: ○○%;　　　　○○は、％指定かpix、emなどの単位指定
float: left;　　　　　　右列もleftである事は不思議？とにかく考えずにleftなのだ。
}

とするだけで２列になるらしいのだが全体幅を決め左右を概略の％で決める場合は、これで行けるがきっちりとpixで割り付けるとむずかしくなってここから先に？？？マークがいっぱい付くのだ。

頭がそろそろグジャッて来たので今夜は、ここまで・・・。
後日つづきを書けるように理解できたらまた書くことにするが・・・？
オ(^o^*)ヤ(*^O^)ス(*^^*)ミー(*^-^)ノフリフリ