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

締切済

質問者：kiyu0228
質問日時：2011/05/23 13:48
回答数：4件

３カラム→２カラムになる、html・cssの書き方について、ご教授お願いします。

ブログで、左サイド（サブ）、センター（メイン）、右サイド（サブ）を制作しています。

トップページは３カラム校正。
詳細記事（２階層目）に入ると、右サイドはなくして、その分センターを右に伸ばしたいと思っています。

※文章だとわかりづらいので、図にしてみました。
http://kiyu0228.web.fc2.com/sample.gif

このように制作したい場合、html・cssをどのように書くのが最適でしょうか？

ちなみに、SEO対策のため、htmlでのdivの書き順は、
センター（メイン）→左サイド（サブ）→右サイド（サブ）で書き表したいです。

また、なるたけ右サイドをコメントオフ、または削除するだけで、反映される書き方が望ましいです。

いろいろと条件が多くて申し訳ござません…。
ご教授いただけると、幸いです。
どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： ORUKA1951
回答日時：2011/05/24 01:32

あなたの書かれたスタイルシートも見ました。

あんな書き方はしません。
　同じプロパティが何度も登場します。たとえば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の基本は、詳細度やセレクタなどのカスケーディングです。(プロパティなんて二の次でよい)

　そうしてあれば、いかようにも配置の変更ができます。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

書き方については、レイアウトのサンプル用にパパっと書き出したものだったので、特にヒドイものだったと思います…。すみません。

自分の知識がかなり偏ったものと、みなさんのアドバイスでわかりましたので、もう一度、css自体を勉強し直してみます。
それでもわからなかったら…、その時に改めてご質問させてください！

いろいろとありがとうございました。

通報する

お礼日時：2011/05/24 14:00

No.3

回答者： tracer
回答日時：2011/05/24 00:38

3カラムを2カラムにするのは、比較的基本的なことです。

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

- 0
- 件

通報する

この回答へのお礼

ご回答、ありがとうございます！

独学で進めてきたため、html・cssをどこからどこまで理解しているのか…
自分でもお答えできないのが現状です。

なので、乱暴な質問になってしまったようで、申し訳ありません…。

技術的には、一応、MTくらいなら、自分で組める程度です。
もう一度、自分で勉強しなおしてみます。

ご指導、ありがとうございました。

通報する

お礼日時：2011/05/24 13:54

No.2

回答者： ORUKA1951
回答日時：2011/05/23 23:50

＞ちなみに、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;}
　とか・・詳細度、カスケーディングをうまく使いましょう。

- 0
- 件

通報する

この回答へのお礼

いろいろとご指摘、ありがとうございます！

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

ありがとうございました。

通報する

お礼日時：2011/05/24 13:48

No.1

回答者： einn
回答日時：2011/05/23 14:11

どうも。

アフィリエイトで食ってるものです。

外部スタイルシートを使えばいいのでは？

スタイルーシートファイル別に内容を変えて、
必要なページに関連付けるだけだと思いますよ。

例えばindexのmainにはフロートでleft、ボックスでwidthが必要ですが、
そうではないページ、つまり2カラムになるページではleftもwidthも不要ですよね。

仮に#mainというIDにしましょう。

indexに#mainに対してleftとwidthを設定した外部スタイルシートを紐付けし、
他のページには#mainに対してleftとwidthを設定しない外部スタイルシートを使えばいいです。

ページごとに別々のスタイルシートをいくつでも指定できるのですから簡単ですよ。

もちろん図にあるrightというdivは、HTML上で扱って下さい。
これ、CSSで見えなくすることもできますけど、するとスパム扱いです。
ですから、コメントオフでrightをHTML上で消して、
mainのレイアウトは外部スタイルシートで。というのが正解。

この回答への補足

さっそくのご回答、ありがとうございます！

ご指摘の通り、ページごとに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-transitio …
<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;
}

ややこしくて申し訳ありませんが…問題を解決できる方法は、ありますでしょうか？
どうぞよろしくお願いします。