締切済み

３カラム→２カラムになるhtml・cssの書き方

2011/05/23 13:48

３カラム→２カラムになる、html・cssの書き方について、ご教授お願いします。ブログで、左サイド（サブ）、センター（メイン）、右サイド（サブ）を制作しています。トップページは３カラム校正。詳細記事（２階層目）に入ると、右サイドはなくして、その分センターを右に伸ばしたいと思っています。 ※文章だとわかりづらいので、図にしてみました。 http://kiyu0228.web.fc2.com/sample.gif このように制作したい場合、html・cssをどのように書くのが最適でしょうか？ちなみに、SEO対策のため、htmlでのdivの書き順は、センター（メイン）→左サイド（サブ）→右サイド（サブ）で書き表したいです。また、なるたけ右サイドをコメントオフ、または削除するだけで、反映される書き方が望ましいです。いろいろと条件が多くて申し訳ござません…。ご教授いただけると、幸いです。どうぞよろしくお願いいたします。

kiyu0228
お礼率90% (29/32)

CSS
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/05/24 01:32 回答No.4

あなたの書かれたスタイルシートも見ました。あんな書き方はしません。　同じプロパティが何度も登場します。たとえばwidth:160px;とかborderとか・・。同じような対象に対しては一度で済ませること。セレクタはグループ化できます。　デザインのためにidやclassは付けない。あくまで文書構造に従った一般的なもの・・HTML5で導入されるsection(章),article(記事),aside(傍書き),footer(脚注),header(見出し),hgroupなどが、一般的に使われるclass名です。そういうclass名だと、検索エンジンはきちんと文意を理解してくれる。　デザインのためにidでマークアップすると、詳細度やセレクタで上書きできないから、またidを振るという悪循環に陥ります。　配置によるclass名をつけると、右においていたものを左に置くデザインに変更するとき混乱する。CSSだけ読んで、何をどうしたかわかるようにすること。　たとえばannotation(注釈)の中のheadは関連項目、footはそうではないとか、もちろんaside(脇書き)とかfooterでもよい。 HTMLの基本は、文書構造にしたがってマークアップすること。(デザインのためじゃない) CSSの基本は、詳細度やセレクタなどのカスケーディングです。(プロパティなんて二の次でよい) 　そうしてあれば、いかようにも配置の変更ができます。

質問者

お礼 2011/05/24 14:00

ご回答ありがとうございます。書き方については、レイアウトのサンプル用にパパっと書き出したものだったので、特にヒドイものだったと思います…。すみません。自分の知識がかなり偏ったものと、みなさんのアドバイスでわかりましたので、もう一度、css自体を勉強し直してみます。それでもわからなかったら…、その時に改めてご質問させてください！いろいろとありがとうございました。

tracer
ベストアンサー率41% (255/621)

2011/05/24 00:38 回答No.3

3カラムを2カラムにするのは、比較的基本的なことです。 HTML&CSSを理解していれば簡単です。質問の趣旨は「HTML&CSSとは？」というところから全部分からないということでしょうか。その場合は、ここで質問の前に、リファレンスを読んだ上で「ここまでは理解できるが、ここからがわからない」などの具体的な質問を投げたほうが、質問する側も回答する側も効率的です。今回の質問だと、「自分で調べるの面倒だから誰かにやってもらおう」的な捉え方をされても不思議ではないですよ。当然ですが、あなたが面倒がっている自分の尻を拭くことを、誰かに期待するのはとても乱暴です。まずは、分からないなりにリファレンスを読むことをおすすめします。「HTML CSS 2カラム」などのキーワードで検索するだけなのですから。

質問者

お礼 2011/05/24 13:54

ご回答、ありがとうございます！独学で進めてきたため、html・cssをどこからどこまで理解しているのか… 自分でもお答えできないのが現状です。なので、乱暴な質問になってしまったようで、申し訳ありません…。技術的には、一応、MTくらいなら、自分で組める程度です。もう一度、自分で勉強しなおしてみます。ご指導、ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/05/23 23:50 回答No.2

＞ちなみに、SEO対策のため、htmlでのdivの書き順は、　これは誤解です。　SEOは、きちんとHTMLがマークアップされていたら問題はありません。　また、No.1さんへの補足にスタイルシートはひとつでと言うのは、本当はまずいです。メンテナンスを考えれば複数に分けたほうが良いです。　そもそもSEOと言いながら、wraper,main,right,leftは、とってもおかしいでしょう。　私が良く行うのは・・・構造化要素が増えたHTML5的に・・・DOMの解釈的に書くと Element　　　　　 class　　　　　　　　　id <body>　　　　　column2|column3 　　<div>　　　　　 header　　　　　　　　top 　　　　<h1> 　　<div>　　　　　 section　　　　　　　bodyText 　　　　<h2> 　　　　<p> 　　　　<p> 　　　　<div>　　　 section article 　　　　　　<h3> 　　　　　　<p> 　　　　<div>　　　 aside　　　　　　　　What 　　　　　　<h3> 　　<div>　　　　　 section annotation 　　　　<div>　　　 head 　　　　　<div>　　 nav　　　　　　　　　Navigation 　　　　　<div>　　 memo 　　　　<div>　　　 foot 　　<div>　　　　　 footer 　　　　<div>　　　 memo　　　　　　　　 Document_Information 　　　　　<dl> 　　　　<div>　　　 memo　　　　　　　　　copyright 　　　　<div>　　　 nav　　　　　　　　　 site_map とかになるでしょう。基本的にスタイルシートは最低でも３つ書きます。(印刷が相対されるページや携帯端末でのアクセスが期待される場合は、その数増えます。固定スタイルシート　　default.css --- font-familyとかp{text-indent:1em;},line-heightとか優先スタイルシート　title="標準" 　　shape.css------ 形　　color.css------ 色代替スタイルシート(ALTERNATE STYLESHEET) 　　bigfont.css---- 視覚障害者用とか title="大きな文字" 　　revers.css----- 反転表示　　　　　title="反転" 印刷用 @media:print 携帯端末用 @media:handheld とか。　で、もちろんニ分割と三分割は、スタイルシート一枚でも良いです。たとえばbodyのclassに、[column2|column3]としておき、　div.annotation, 　body.column3 div.annotation div.head, 　body.column3 div.annotation div.foot 　　　{position:absolute;} 　div.annotation{top:200px;} 　body.column3 div.annotation div.foot, 　body.column3 div.annotation div.head{width:200px;top:0;} 　body.column3 div.annotation div.foot{right:0;} 　body.column3 div.annotation div.head{left:0;} 　body.column2 div.annotation div.foot, 　body.column2 div.annotation div.head{width:300px;} 基本的には、これだけでよい。＞また、なるたけ右サイドをコメントオフ、または削除するだけで、反映される書き方が望ましいです。　文書構造上おかしいです。(当然SEO的にも) 　bodyを二つのクラスに分けるのが良いでしょう。いわゆる脚注(annotation)を本文に関係するhead note(頭注)と、直接関係しないfoot note脚注に区別できるはずです。　長い本文で、本文に関わる脚注は個別に<div class="section">をrelativeにでもしておいて、absoluteさせることも良いでしょう。スタイルシートに追加になります。その場合、　body.column3 div.section div.foot{top:0;right:0;} 　とか・・詳細度、カスケーディングをうまく使いましょう。

質問者

お礼 2011/05/24 13:48

いろいろとご指摘、ありがとうございます！独学で進めてきたため、かなり偏った知識を身につけてしまったようです…。いただいたアドバイスを参考に、組みなおしてみます。ありがとうございました。

einn
ベストアンサー率37% (671/1802)

2011/05/23 14:11 回答No.1

どうも。アフィリエイトで食ってるものです。外部スタイルシートを使えばいいのでは？スタイルーシートファイル別に内容を変えて、必要なページに関連付けるだけだと思いますよ。例えばindexのmainにはフロートでleft、ボックスでwidthが必要ですが、そうではないページ、つまり2カラムになるページではleftもwidthも不要ですよね。仮に#mainというIDにしましょう。 indexに#mainに対してleftとwidthを設定した外部スタイルシートを紐付けし、他のページには#mainに対してleftとwidthを設定しない外部スタイルシートを使えばいいです。ページごとに別々のスタイルシートをいくつでも指定できるのですから簡単ですよ。もちろん図にあるrightというdivは、HTML上で扱って下さい。これ、CSSで見えなくすることもできますけど、するとスパム扱いです。ですから、コメントオフでrightをHTML上で消して、 mainのレイアウトは外部スタイルシートで。というのが正解。

質問者

補足 2011/05/23 15:27

さっそくのご回答、ありがとうございます！ご指摘の通り、ページごとにcssを別で読み込めば、問題は解決するのですが… なるたけ、cssの数は増やさず１つのcssで管理したいと思っています。以下は、自分で組んだサンプルです。 htmlの<div id="right"></div>を、cssでdisplay:noneか、htmlでコメントアウトするだけで、centerが伸びるようにしたいのです。 ▼サンプルhtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>３カラムレイアウト</title> </head> <body> <div id="wrapper"> <div id="main"> <div id="center">id "center" の内容がここに入ります</div> <div id="left"> id "left" の内容がここに入ります</div> </div> <div id="right"> id "right" の内容がここに入ります</div><br clear="all" /> <div id="footer">footerです。</div> </div> </body> </html> ▼サンプルcss body,td,th { font-size: medium; } #wrapper { width: 950px; border: 1px solid #CCC; padding: 20px; margin: 50px auto;} #main { width: auto; float: left; padding: 0; margin: 0; } #center { width: auto; float: right; border: 1px solid #CCC; padding: 20px; margin: 0; } #left { width: 160px; float: left; border: 1px solid #CCC; padding: 20px;} #right { width: 160px; float: right; border: 1px solid #CCC; padding: 20px;} #footer { clear: both; text-align: center; border: 1px solid #CCC; padding: 20px; margin: 20px auto 0 auto; } ややこしくて申し訳ありませんが…問題を解決できる方法は、ありますでしょうか？どうぞよろしくお願いします。