【HP制作】2カラムを3カラムに変更する方法

2014/10/14 10:01

このQ&Aのポイント

現在2カラムで運営しているサイトを3カラムに変更したいです。
CSSの修正方法や要点を教えてください。
初心者向けに分かりやすく説明していただけると助かります。

【HP制作】２カラムを3カラムに変更したい！

現在2カラムで運営しているサイトを3カラムに変更したいのですが、上手く出来ずに困っています。現在は、左サイドメニュー(1)、メインメニュー(2)で運営しています。ここに右サイドメニュー(3)を追加したく、下記の通りCSSに右サイドを追加したのですが、画面を確認すると、左から(1)→(3)→(2)の順番で表示されてしまいます。因みに、メインのfloatをrightに変更すると、左から(2)→(1)→(3)の順に入れ替わり、どうしても(1)→(2)→(3)の順番になりません。独学で、その場しのぎでHP作りをしてきたので、間違いに気づけずにおります。お分かりの方がいらっしゃったら、どうかよろしくお願いします。初心者レベルなので、分かり易く教えて頂けると助かります。どうぞよろしくお願いします。 ■CSS /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; } /*メイン*/ #main { float: right;　←ここを変えるとレイアウトが崩れてしまいます。 width: 700px; } /*右サイド*/　　←ここを追加しました。 #rightside { float: right; width: 200px; } /*フッター（コピーライト）*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; } ■HTML <div id="container"> </div>  <div id="main"> </div>   <div id="leftside"> </div>  　←ここを追加しました。 <div id="rightside"> </div>

heiko09
お礼率90% (20/22)

CSS
回答数2
ありがとう数6

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

質問者が選んだベストアンサー

ベストアンサー

outbrave
ベストアンサー率60% (231/380)

2014/10/14 11:35 回答No.1

HTMLも書き直しますよ、いいですかね。 <div id="container">  <div id="leftside">leftside </div>   <div id="main">main </div>   <div id="rightside">rightside </div>  </div> /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; background-color: #0ff; } /*メイン*/ #main { float: left; width: 700px; background-color: #f0f; } /*右サイド*/ #rightside { float: left; width: 200px; background-color: #ff0; } /*フッター（コピーライト）*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; }

質問者

お礼 2014/10/14 13:37

outbraveさん！ご無沙汰しています。以前、lightboxの件などで度々お世話になりました者です。そして今、HTMLとCSSを書き直してみたら、出来ました！！！！！！！！泣きそうですToT HTMLの順番とfloatが全てleftになっていますね。 HTMLの順番も重要なんですね...勉強になりました。いつも助けてくださって、本当にありがとうございます！ここ2週間くらい悩んでいたので、これで作業を前に進める事が出来ます♪ 本当に感謝です。早速ご回答くださって、本当にありがとうございました！

その他の回答 (1)

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

2014/10/14 12:36 回答No.2

HTMLを <div id="container"> 　<div id="main"></div> 　<div id="leftside"></div> 　<div id="rightside"></div> </div> のように、関係ない事を書くからこんなことになる。スタイルシートでデザインする最大の目的は ★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) です。ここを読むと、失敗の原因が分かりますよね。 1) HTMLは、タグを使って文書構造をマークアップするもの!! 　<h1>ここは見出し</h1><p>ここから一つの段落</p>とね!! 　何のためかは、SGMLの背景( http://ja.wikipedia.org/wiki/Standard_Generalized_Markup_Language#.E8.83.8C.E6.99.AF )を読むと良く分かるでしょう。　HTML4.01でも、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」とされていました。　★残念ながらこの大事なところを見落としている人があまりに多かった反省から、HTML5では「文書をよりよく構造化するために、新しい要素が追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」 2) すなわち、header,section,nav,footer,asideなど・・ HTML4.01なら　<div id="header"></div> 　<div id="section"> 　　<div class="nav"></div> 　　<div class="aside"></div> 　</div> 　<div class="footer"></div> HTML5なら、とうぜん　<header></header> 　<section> 　　<nav></nav> 　　<aside></aside> 　</section> 　<footer></footer> となるはずでした。 HTML4.01の勧告が1999年(15年前)なのに、未だにletsideはないでしょう。 2) その上でスタイルシートで　sectionの両サイドにnavとasideを置く。　いやnavだけ左において、asideは下に　スマホはasideは表示させない。印刷時はコラムで枠で囲む　とかデザインすれば良い。　なお、floatは、ブロックの配置には使わないほうが無難です。必ずトラブルの元になる。floatは画像の周囲にテキストを回りこませるなど本来の目的で使用する。 ★印象的なサンプルを上げておきます。　あわせて、ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )を参考に　・ブラウザの[表示]メニューからスタイルシートを選択する。ウィンドウ幅を変えたり印刷プレビューも試すと良い ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　で検証済みのHTML4.01+CSS2.1です。 ★タブは＿に置換してあるので戻す。 ★たったこれだけで良いのですよ。ナビを左右いずれにも変更できるし、印刷や携帯電話には適用されないし・・ <!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"> ＿<style type="text/css" media="screen">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>かきくけこ</li> ＿＿＿＿<li>さしすせそ</li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>補足記事</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>

質問者