【HP制作】トップは3カラムで他は2カラムにしたい

質問

現在3カラムで運営しているHPを、トップページは3カラムで、
他のページは2カラムで表示したいです。

元々2カラムで運営していたHPを、3カラムに変更しました。
こちらで方法を教えて頂き、表示する事が出来ました。
現在は、下記URLのベストアンサーのHTML・CSSで運営しています。
http://okwave.jp/qa/q8790084.html

ここから、トップページのみ3カラムで、他の詳細ページは
2カラムで表示したいのですが、方法をご存知の方、教えてください。

知識のない私にでも、分かる様に教えて頂けると助かります。

どうぞよろしくお願いします。

回答No.2

ORUKA1951

先のHTMLと同じディレクトリに[CSS]というディレクトリを作成して、次の５つのファイルを置きます。
　印刷プレビューもOKです。

　ブラウザはChrome以外をお使いください。Chromeは代替スタイルシート使えません。ページ製作なら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxが良いです。特に Firebug( https://addons.mozilla.jp/firefox/details/1843 )があるととても楽です。

＞トップページのみ3カラムで、他の詳細ページは2カラムで表示したいのですが、
　HTMLさえちゃんと書いておけば、適用するスタイルシートを変えればすむ話です。先のサンプルだと
<link rel="StyleSheet" type="text/css" media="screen" href="./CSS4/default.css" title="2カラム_ナビ上">
<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS4/3column.css" title="3カラム_ナビ左">
を
<link rel="StyleSheet" type="text/css" media="screen" href="./CSS4/3column.css" title="3カラム_ナビ左">
<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS4/default.css" title="2カラム_ナビ上">
とするだけ・・

　HTMLはご覧のようにとても楽だと思います。スタイルシートはもう少し頑張って身につけてくださいね。

[simple.css]
@charset "Shift_JIS";
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,ol{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.section div.section{width:auto;min-width:0;}
/* 色分け */
body{background-color:gray;}
div.header{background-color:fuchsia;}
div.section{background-color:silver;}
div.section div.section{background-color:white;}
div.section div.nav{background-color:lime;}
div.section div.aside{background-color:yellow;}
div.footer{background-color:aqua;}

[default.css]
@charset "Shift_JIS";
div.section{position:relative;}
div.section div.section,div.section h2,div.section p{
margin-right:200px;
}
div.section{margin-top:2em;}
div.section div.section p,div.section div.aside p{margin:0 auto;}
div.section div.nav,div.section div.aside{position:absolute;}
div.section div.nav{width:100%;height:2em;left:0;top:-2em;}
div.section div.aside{width:200px;height:100%;right:0;top:0;}
div.section div.nav h3{display:none;}
div.section div.nav ol,div.section div.nav ol li{text-align:center;list-style-type:none;margin:0;padding:0;line-height:2em;}
div.section div.nav ol li{display:inline-block;width:10%;}

[3column.css]
@charset "Shift_JIS";
div.section{position:relative;}
div.section div.section,div.section h2,div.section p{
margin:0 200px;
}
div.section div.section p,div.section div.aside p{margin:0 auto;}
div.section div.nav,div.section div.aside{position:absolute;top:0;width:200px;height:100%;}
div.section div.nav{left:0;}
div.section div.aside{right:0;}

[2column.css]
@charset "Shift_JIS";
div.section{position:relative;}
div.section div.section,div.section h2,div.section p,div.section div.aside{
margin-left:200px;
}
div.section div.section p,div.section div.aside p{margin:0 auto;}
div.section div.nav{position:absolute;top:0;width:200px;height:100%;left:0;}

[3column2.css]
@charset "Shift_JIS";
div.section{position:relative;}
div.section div.section,div.section h2,div.section p{
margin:0 200px;
}
div.section div.section p,div.section div.aside p{margin:0 auto;}
div.section div.nav,div.section div.aside{position:absolute;top:0;width:200px;height:100%;}
div.section div.nav{right:0;}
div.section div.aside{left:0;}

[print.css]
@charset "Shift_JIS";
body{width:180mm;font-size:10.5pt;}
h1,h2,h3,h4,h5,h6{color:red;}
p{line-height:2em;}
div.header{page-break-after:always;text-align:center;}
div.footer{page-break-before:always;}
div.section div.aside{font-size:0.9em;width:80%;margin:1em 10%;border:solid gray 1px;}
div.section div.section{margin-left:5em;width:auto;min-width:0;max-width:auto;}
div.section div.nav{display:none;}

★忘れてました。文字コードはすべてShift_JISです。

回答No.1

ORUKA1951

根本的に間違ってるような・・・。
　1999年(15年前)のHTML4.01の勧告以来強く言われている事は『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』の分離でしたね。【↑短いけどとても重要なので読んでおくこと】
　できればHTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )の項目の後半も・・

　それがされていれば、HTMLとプレゼンテーションは別個の物ですから、HTMLのメンテナンスも楽ですし、HTMLにはまったく手を加えずにスタイルシートだけで自在にプレゼンテーションは変更できます。
　また、パソコン用のブラウザだけでなく携帯電話やプリンター、あるいはスクリーンリーダーなど様々な端末に対応させることができます。いちいちHTMLを書き直さなくても良い。
　これは「HTMLの略歴」にもあるように極めてと言うか、HTMLの根本ですから、ここを間違ってしまうと深い谷底に迷い込んで元の道に戻るのに苦労する。
・・３カラムの左右を入替えるためにHTMLを書き直すなんて愚の骨頂・・
　とは言ってもそれが万人に理解されたとは言いがたく、参考にされたページにあるように、id=!container!,id="rightSide,"id="leftSide"のように、HTMLがプレゼンテーション目的に書かれていることが続きました。その反省から、HTMLでは
　⇒HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html )
　の「【問題2】文書内に埋め込まれた「意味」が不明確」にあるように、header,section,footerなどの新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )が追加されました。

※下記に簡単なサンプルを上げておきます。class名はHTML5の新しい要素に合わせてありますから、将来HTML5にするときは、そのまま<div class="section"></div>を<section></section>にすればよい。
※HTMLは文書構造しか書かれていないためにメンテナンスは容易で、デザインの自由度は高いのでいつでも変更できます。
※スタイルシートは次回の回答で示します。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )で検証済みのHTML4.01strictです。
★タブは＿に置換してあるので戻す。
★ブラウザ巾には依存しません。ウィンドウ巾を変えてみること
★印刷には適用されません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="stylesheet" type="text/css" href="./CSS/simple.css">
＿<link rel="StyleSheet" type="text/css" media="screen" href="./CSS/default.css" title="2カラム_ナビ上">
＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS/3column.css" title="3カラム_ナビ左">
＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS/3column2.css" title="3カラム_ナビ右">
＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS/2column.css" title="2カラム_ナビ左">
＿<link rel="styleSheet" type="text/css" media="print" href="./CSS/print.css">
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>これは、構造とプレゼンテーションの分離の説明です。</p>
＿＿
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection、HTML5では&lt;section&gt;&lt;/section&gt;でマークアップします。</p>
＿＿<p>class名はHTMLだけでは表しきれない文書構造を補完するために使用します。</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>HTML5では階層はsectionの階層で決まります。また、sectionには一つだけ見出し&lt;h1&gt;～&lt;h6&gt;をもてます。</p>
＿＿＿<p>一つの記事セットは&lt;article&gt;です。記事(article)には&lt;header&gt;&lt;section&gt;&lt;footer&gt;を持つと期待されます。記事が一つしかないときは、このページの様に全体を&lt;article&gt;&lt;/article&gt;で囲まなくても良い。</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<h3>ナビゲーションリスト</h3>
＿＿＿<ol>
＿＿＿＿<li>トップ</li>
＿＿＿＿<li>製品</li>
＿＿＿＿<li>マニュアル</li>
＿＿＿＿<li>問合せ</li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>補足・関連記事</h3>
＿＿＿<p>本文とは直接関係ない記事を示します。HTML5では&lt;aside&gt;</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2015-01-12</dd>
＿＿</dl>
＿</div>
</body>
</html>