| BBS | COMMENT | TRACKBACK | CATEGORY | LINKS | ARCHIVE | GALLERY |
TOTAL PV
配置のCSS化
あとで読むはてなブックマーク - 配置のCSS化 | 2004年07月08日(木) | 7 | 1 | 記事編集
ここんトコ…
っつ〜か、結構前からなんですが…

『JUGEM』が重い。。。

とにかく記事の全文表示が…

(多分『Similarity Search』や『Amazon Search』以外にも原因がありそうです。。。)

このテンプレートですが、ご存知(?)の通りTABLEタグでの配置を施してありました。。

TABLEは、そのTABLE内の全体を読み込んでからレイアウトするんで、リストや記事の一部に読み込みが遅い部分あると
(『Similarity Search』『Amazon Search』『Blog People』『キヌガサ』なんかかな?)
表示されるのに時間がかかるらしいです。。
※正確には全て表示されるまでの時間は同じですけど…

そこでCSSとDIVを使った配置の登場となるわけですが…

っと、一応CSSで配置する事のメリットとしては…
・読み込んだ順に表示されるんで、見た目的に早く感じる。。
・後でレイアウト変更する際TABLEタグでの配置より移動させ易い。。
って感じでしょうか?

一応、ひいろんが施したやり方書いておきますんで。。
もしも、テーブル配置からCSS配置へ…
なんて考えてる方は参考に。。。。

さて、とりあえず今までのテーブル配置を示してみます。。

タイトル(900)
左リスト(225)記事(450)右リスト(225)
copyright表示(900)

()内の数字はそれぞれの幅を示します。。
構成としては
【上】タイトル
【中】左右リストと記事
【下】copyright表示
と3つのテーブルになってます。

今回は、一番重い【中】テーブルをCSSで配置する事にします。。

最初に【中】テーブルのHTMLソースを示しときます。。
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="225">
【左リスト】
</td>
<td width="450">
【記事部分】
</td>
<td width="225">
【右リスト】
</td>
</tr>
</table>

※解り易く簡素に書いてあります…

まずはCSS部に下のように追加します。
#l_site {
float:left;
width:225px;
}

#c_site {
float:left;
left:225px;
width:450px;
}

#r_site {
float:left;
left:675px;
width:225px;
}

【#l_site】は 左リスト
【#c_site】は 記事部分
【#r_site】は 右リスト
に、それぞれ相応してます。。
尚、各数値についてはリストや記事の幅によって異なりますんで、利用される場合はご注意を…

次に上に書いたテーブルを下記の様に書き直します。。
<div id="l_site">
【左リスト】
</div>
<div id="c_site">
【記事部分】
</div>
<div id="r_site">
【右リスト】
</div>

これでCSSによる配置完了です☆
簡単に書きましたが、基本的考え方は解ってもらえるかと…?
ちなみにこのままですと全体的に左揃いになるんで、真ん中揃いにしようと
『スタイルシート講座』読んで挑戦したんですが…
body {
background-color: #FFF;
margin: 0px 25px;
padding: 0px;
text-align: center;
}
#layout{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 760px;
}

CSSでデザインチェンジ 2】より引用。。

ど〜やらIE5.5なら無事に表示されましたが、IE6.0で確認したら…
全て真ん中揃いになってしまいました…汗

いや…直す方法わからなくもないんですけど…ね(^^;

面倒&IE6.0自宅なんで…
無事に設置出来たら追記しますです。。。
2004年07月08日(木) 11:06 | ネット > 改造メモ | 7 | 1 | 記事編集
  • コメント[7]
  • Facebookコメント
  • はてブコメント
  • blogcircleコメント
comment by: アール
いやぁ、暑いですねぇ。

Movable Typeはデフォルトで配置がcssでなされているのですが、私はこれを見てcssでの配置方法を勉強しましたw

慣れればcssなんぞ簡単なのかも知れませんが、旧式html使い?の私としては、cssはまだまだ未知の領域であります。
 
2004年07月08日(木) 14:20
comment by: ひいろん
[アールさん]
ひいろんもBLOG始める前まではhtmlしか扱ってませんでした。。
っつ〜かcssも、未だ理解出来てない事多かったりしますからねぇ
(^▽^;
 
2004年07月08日(木) 18:58
comment by: 八ちゃん
こりゃ〜〜〜
ひいろんはSVGAを見捨てる気かぁ〜〜(笑)
マイクロソフトのサイトもそうだし…

VGAとまでは言わん、せめてSVGAだけでも…
即急に3カラムをやめましょう。

うちもSVGAは訪問者の5%しかいませんけどね。
まじめなレスコメントはしなくてもいいぞ。
↑ちょっとからかっただけだい。

ひいろん、コラボでメタル系素材やらない??
 
2004年07月08日(木) 20:05
comment by: ひいろん
[八ちゃん]
いやはや…
見難いですが、我慢してくだされ〜…汗
なんせ画像多様でテーブル縮小も無理状態なブログですから…
(^^;

メタル系素材ですか?
ひいろんの場合『白黒グラデーションドット打ち』ですけど…
そんなんで良ければ☆
っつ〜か、八ちゃんみたいに仕事早くないですよ…爆
 
2004年07月08日(木) 23:40
comment by: わかちょ
ひいろん師匠…
3カラムには全て『float: left』を適応すればよいんですね…。ぜひ今後の参考にさせて頂きます。

あくまでサイトのお話ですが…
鯖移転でまだ頁改造とアップすら出来てない所もありますんで。

横レススミマセン…
八ちゃん>私を見捨てたんかい!!
コラボゎどうなったんでしょう。私の画像があんまりにも汚かったからでしょうか。
 
2004年07月09日(金) 02:20
comment by: 八ちゃん
ひいろん>>
そういうのが欲しい〜。需要あるので。
ひいろんが元プレート作って八ちゃんがアレンジ。
ボタンとかバナー台とかにして両方で配布、いかが?

わかちょ>>
そのとおり!
うそ
スロ専門ページを構想中(以前話した件で分離、FC2を使う)。そしたら復活よていだす
 
2004年07月09日(金) 09:37
comment by: ひいろん
[わかちょ]
とりあえず上に書いた方法で今んトコ問題ないかと思いますです☆
あ、ひいろんは幅狭くなった時の為(?)に全てを
<div class="contents">〜</div>
で囲ってますけどね☆
んで、cssの『.contents』で幅設定してます。。
サイトリニュ中ですな。
頑張ってくだされ♪
ひいろんは…放置気味ですけど…汗

[八ちゃん]
元プレートですか?
どんなのが良いのかな??
今あるホムペで使ってるボタンとかのアレンジなら簡単に出来そうですけど…ね☆
元々ボタン画像素材作ろうと思った時期もあったんで…
っつ〜か、文字入れはお任せしますが…爆
 
2004年07月09日(金) 14:20
コメントする

icons:

 
トラックバック
バナー屋さんの日常空間
トップページを更新
そんなわけで数時間。indexのHTMLファイルの大部分をコメントで囲み、何度もスタイルシートを変更しては上書き保存、ブラウザで確認をしましたよ。疲れたでもって表示がうまくいったところでコメントアウトを外して、画像で作ってる見出しも新しい背景に合
2004年07月08日(木) 20:13
ランキング参加中:応援(クリック)よろしくお願いします
  ブログランキング・にほんブログ村へ ブログ王ランキングに参加中! .*:゚(・ω・人)゚:*.
【ネット > 改造メモ】の最新記事
FaceBookページ応援よろしくおねがいします〜(^▽^
ひいろん
  • 【ひいろん】
  • 性別:おっさん
  • 住所:静岡県
  • 愛車:400R