プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：heiko09
  • 質問日時：
  • 回答数：2件

現在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>
<!--*****// 右サイドメニュー *****-->

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： ORUKA1951
  • 回答日時：

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-html4 … )
です。ここを読むと、失敗の原因が分かりますよね。

1) HTMLは、タグを使って文書構造をマークアップするもの!!
　<h1>ここは見出し</h1><p>ここから一つの段落</p>とね!!
　何のためかは、SGMLの背景( http://ja.wikipedia.org/wiki/Standard_Generalize … )を読むと良く分かるでしょう。
　HTML4.01でも、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」とされていました。
　★残念ながらこの大事なところを見落としている人があまりに多かった反省から、HTML5では「文書をよりよく構造化するために、新しい要素が追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」
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/HT … )を参考に
　・ブラウザの[表示]メニューからスタイルシートを選択する。ウィンドウ幅を変えたり印刷プレビューも試すと良い

★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">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;}
div.section{position:relative;}
div.section h2,div.section p,div.section div.section{margin-left:200px;min-width:0;width:auto;}
div.section div.section{min-height:300px;}
div.section div.section p{margin:0;}
div.section div.nav{position:absolute;top:0;width:190px;font-size:0.9em;height:100%;}
div.section div.nav{left:5px;}

/* 分かりやすいよう着色 */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:white;}
div.section div.section{background-color:silver;}
div.nav{background-color:lime;}
div.aside{background-color:yellow;}
div.footer{background-color:orange;}

/* 本文の内容を追加して変えたければ下記のコメントを外す */
/*
div.section h2,div.section p,div.section div.section{margin-right:200px;}
div.section div.aside{position:absolute;top:0;width:190px;font-size:0.9em;height:100%;}
div.section div.aside{right:5px;}
*/

-->
＿</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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

こんにちは～
ご丁寧なご回答をありがとうございます！
まだまだ勉強不足なので、教えて頂いたサイトを参考にしながら、
頑張って勉強しますね。
そう、私は大事な所を見落とす以前に全く気づいていないので。。。
その場しのぎではなく、基礎を勉強したいと思います。
ありがとうございました。

通報する
お礼日時：2014/10/14 13:45

No.1ベストアンサー

  • 回答者： outbrave
  • 回答日時：

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;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2014/10/14 13:37

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報