現在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>
<!--*****// 右サイドメニュー *****-->
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;
}
outbraveさん!ご無沙汰しています。
以前、lightboxの件などで度々お世話になりました者です。
そして今、HTMLとCSSを書き直してみたら、出来ました!!!!!!!!
泣きそうですToT
HTMLの順番とfloatが全てleftになっていますね。
HTMLの順番も重要なんですね...勉強になりました。
いつも助けてくださって、本当にありがとうございます!
ここ2週間くらい悩んでいたので、これで作業を前に進める事が出来ます♪
本当に感謝です。
早速ご回答くださって、本当にありがとうございました!
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-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>
こんにちは~
ご丁寧なご回答をありがとうございます!
まだまだ勉強不足なので、教えて頂いたサイトを参考にしながら、
頑張って勉強しますね。
そう、私は大事な所を見落とす以前に全く気づいていないので。。。
その場しのぎではなく、基礎を勉強したいと思います。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSで、contentsがfooterに重な...
-
AWSのhtml
-
携帯サイト、ナノでのタグ編集...
-
html の divとtable の役割
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
<section>タグと<div>タグ
-
複数のボタンを等間隔に、かつ...
-
オシャレな区切り線はありませ...
-
リストで画像を右に表示したい
-
音声ブラウザ、スクリーンリー...
-
3カラムレイアウトで「常に残り...
-
idとclassの指定方法
-
HTMLでのコメントアウト
-
CSSレイアウト IEでclear指定...
-
RMS レフトナビ問題
-
div要素が重なってします
-
ホームページ初心者です。入力...
-
【ヒトの神秘】美男美女から何...
-
CSSでつくったメニューのアニメ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報