- ベストアンサー
スタイルシートで段組
- スタイルシートでHTMLの段組みを行いたいと考えています。
- ページ幅は750pxで、headerは750px幅で表示されます。
- leftは150px幅、contentは450px幅、rightも150px幅で表示されます。
- yasainet
- お礼率90% (63/70)
- その他（プログラミング・開発）
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- vista2446
- ベストアンサー率46% (131/279)
- vista2446
- ベストアンサー率46% (131/279)
ご質問のような順番でHTMLを記述することは、あり得ないことだと思いますが、、、なにか理由があるんでしょうね。。。 とりあえず、私なりに挑戦してみました。headerに高さを指定して、残りのボックスに上端からの距離を指定してます。 【CSS】 #top {width:750px; position: absolute; top: 0px;} #left_a {width:600px; float:left; position: absolute; top: 50px;} #right_a {width:150px; float: left; margin-left: 600px; position: absolute; top: 50px;} #content {width:450px; float: right;} #left {width:150px; float: left;} #right {width:150px; float: left;} #header {width:750px; overflow: auto; height:50px;} 【HTML】 <div> <div id="left_a"> <div id="content">content 750px<br />(上端から50pxに表示)</div> <div id="left">left 150px<br />(上端から50pxに表示)</div> </div> <div id="right_a"> <div id="right">right 150px<br />(上端から50pxに表示)</div><!--左端から600pxに表示指定--> </div> <br style="clear: both;"/> <div id="top"> <div id="header">header 750px<br />(ボックス高さ 50pxに設定)</div> </div> </div> 表示させる順番で記述することが、記述の基本だと思います。どんな理由があるとしても、基本を守った方が良いと思いますので、ご再考くださいませ。
お礼
ありがとうございます。 メインのキーワードが含まれるコンテンツがHTMLソースの上部に書き込まれているほうが、SEOの点でも有利になると、あるサイトで説明されていました。そのサイトのHTML＆styleを見てみましたが、難しすぎて理解できませんでしたので、質問させていただきました。 おかげ様で方法がわかりましたが、後、わからない点が二つあります。 1つ目は、ページ全体のデザインを左寄りでなく中央に表示したいのですが、教えていただいた上記ソースでいろいろ試してみましたが、FirefoxとInternet Explorerの両方で中央表示にすることができません。今までは body{text-align:center;}とMARGIN-LEFT:auto; MARGIN-RIGHT:auto;を指定することによって中央寄りにできましたが、この場合はどのようにすればよろしいのでしょうか。 2つ目は、今までは改行に<br>を使っていました。<br />は使ったことがないので、スラッシュの意味を検索で調べてみましたが、見つかりませんでした。スラッシュを付けることの意味を教えていただけないでしょうか。大変お手数をおかけし恐縮ですが、宜しくお願いいたします。
あまり参考にはなりませんが、私なら取りあえずこのように書きますかね。 style.css html,body{width:750px} #left{width:150px;float:left} #right{width:150px;float:right} #content{margin:0 150px} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <div id="header">header</div> <div id="left">left</div> <div id="right">right</div> <div id="content">content</div> </body> </html> style.css #header{width:750px} #left{width:150px;float:left} #content{width:450px;float:left} #right{width:150px} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <div id="header">header</div> <div id="left">left</div> <div id="content">content</div> <div id="right">right</div> </body> </html>
お礼
ありがとうございます。 contentの内容をHTMLソースの上部にもってきたいと考えております。SEO対策サイトでは、スタイルシートでデザインすれば最適化が可能だと説明されておりましたが、具体的な内容が説明されておりませんでしたので、こちらで質問させていただきました。
お礼
大変わかりやすく解説してくださり有難うございました。IE6でも大丈夫のようです。おかげ様でスタイルシートの使い方が少しずつ理解できそうです。