みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

HTML5でサイドバーのメニューが、左に移動しない

いまHTML5とCSSを使って勉強しているのですが、
サイドバーを右側にFloatしたいのですが、google Chrome確認しても実行されません。
私の記述ミスだと思うのですが、何度見直しても原因がわかりません。

わかる方にご教授願います。

・htmlソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 L20 Step 1_1</title>
<link rel="stylesheet" href="※CSSのリンク張ってます" type="text/css" media="all">
<style>/* CSS */</style>
<script>/* JavaScript */
<!--
window.alert("Web開発室ブログ");
//-->
</script>

<noscript>
JavaScript が非対応になっています。
</noscript>

</head>

<body>
<!--Web開発室ブログ-->

<header id="header">
<h1>Web開発室ブログ</h1>
<nav>
<ul>
<li><a href="#hoge">最新の投稿</a></li>
<li><a href="#hoge">アーカイブ</a></li>
<li><a href="#hoge">開発者向け</a></li>
<li><a href="#hoge">お問い合わせ</a></li>
</ul>
</nav>
</header>

<section id="main_section">
<article class="contents">
<header>
<h2>なぜHTML5が次のWeb開発スタンダードになりえるのか</h2>
<p>
開発プロジェクトリーダー太郎
<time datetime="2010-10-01T14:39">October 1st, 2010 at 2:39PM</time>
</p>
</header>

<p>
HTML4.01が世の中に発表されてから、HTML規格の外側で様々なアイデアやシステムが試行錯誤されてきました。
結果、複数の団体が「Webの基準」を目指してアイデアやシステムの営業に躍起になっていました。
つまりHTMLは、基本的なぶぶんでは「業界標準」でしたが、求められる装飾や細かな部分については機能不足だったのです。
</p>

<aside>
<p>
スマートフォンのブラウザはパソコンのブラウザよりも意図的にHTML5の仕様に対応しています。
</p>
</aside>

<p>
機能不足が指摘されていた「装飾」の部分について、HTML5は大きな一歩を踏み出しました。
オーディオやムービーをHTML5の機能だけで実現できるように拡張し、
本来の利用方法とは違った使われ方をしていた様々な要素に対する解決策を打ち出しました。
</p>

<footer>
<p><a href="#"><i>25 コメント</i></a>...</p>
</footer>
</article>
</section>

<section id="sidebar">
<nav>
<h3>アーカイブ</h3>
<ul>
<li><a href="2010/10">October2010</a></li>
<li><a href="2010/9">September2010</a></li>
<li><a href="2010/8">August2010</a></li>
<li><a href="2010/7">July2010</a></li>
<li><a href="2010/6">June2010</a></li>
<li><a href="2010/5">May2010</a></li>
<li><a href="2010/4">April2010</a></li>
<li><a href="2010/3">March2010</a></li>
<li><a href="2010/2">February2010</a></li>
<li><a href="2010/1">January2010</a></li>
</ul>
</nav>
</section>

<footer id="footer">
<p>&copy;2010 パソコン教室</p>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="about">About</a></li>
<li><a href="terms.html">サービスの条件</a></li>
<li><a href="privacy.html">プライバシーについて</a></li>
</ul>
</nav>
</footer>

</body>
</html>

・CSSソース
@charset "utf-8";
/*START:ページのコンテンツを中央に配置し、フォントも設定*/
body{
width:960px;
margin:15px auto;
font-family:Arial,"MS Trebuchet",sans-serif;
}
/*END:ページのコンテンツを中央に配置し、フォントも設定*/

/*START:基本的な設定*/
p{
margin:0 0 20px 0;
}

p,li{
line-height:20px;
}
/*END:基本的な設定*/

/*START:ヘッダの幅を定義*/}
header#header{
width:100%;
}
/*END:ヘッダの幅を定義*/

/*START:ul要素リンクを水平ナビゲーションバーに変換*/}
header#header nav ul,#footer nav ul{
list-style:none;
margin:0;
padding:0;
}

#header nav ul li,footer#footer nav ul li{
padding:0;
margin:0 20px 0 0;
display:inline;
}
/*END:ul要素リンクを水平ナビゲーションバーに変換*/

/*START:main_sectionセクションは左寄せにして幅を調整*/}
/*aside要素内の吹き出しも調整*/
section#main_section{
float:left;
width:74%;
}

section#main_section aside{
float:right;
width:35%;
margin-left:5%;
font-size:20px;
line-height:40px;
}
/*aside要素内の吹き出しも調整*/
/*END:main_sectionセクションは左寄せにして幅を調整義*/

/*START:サイドバーを整列させ、幅も調整*/
section#sidebar{
float:left;
width:25%;
}
/*END:サイドバーを整列させ、幅も調整*/

/*START:フッタをページの一番下に設置*/
footer#footer{
clear:both;
width:100%;
display:block;
text-align:center;
}
/*END:フッタをページの一番下に設置*/

投稿日時 - 2013-05-14 12:13:00

QNo.8087346

困ってます

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

>/*START:main_sectionセクションは左寄せにして幅を調整*/}

コメントの最後(コメントの終了後)に 「}」 が入っている部分が何カ所かあります。
これが原因ではないでしょうか。

投稿日時 - 2013-05-14 15:02:46

お礼

ありがとうございます。
}を外すだけで、ちゃんと移動しました。

投稿日時 - 2013-05-15 11:33:43

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

ソースを見た第一印象
 まずHTML4.01strictをしっかり復習されることをお勧めします。
・articleはheader,section,footer要素を持つであろう、それ自身で完結した記事をマークアップする要素ですから、ひとつしかない全体を囲む場合はあえて使う必要はないでしょう。
・footerに書くサイト一覧のようなリンクはNAVを使うべきではないとされています。
【引用】____________ここから
Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, 略
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Sections — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/sections.html#the-nav-element )]より
 ページ上のすべてのリンクグループが nav 要素の中にある必要はありません。nav要素は、主節、すなわち主要なナビゲーション・ブロックからなるセクションを対象としています。特に、サービス規約、ホーム、著作権ページといったサイトのさまざまなページへの短いリンクリストをフッターに入れることが一般的ですが。このような場合は、footer 要素だけで十分です。
 footer自体が、そのような意味合いを持っているため、ここでnavは使いません。

・段組にfloatは使わないほうが良いです。例えばasideをfloat:leftにするとその後で解除することが出来なくなります。基本はabsoluteです。absoluteだと、floatさせるために記事の順番を変えるなどの文書構造を弄る必要がなくなります。
・余計な要素(タグ)が多いです。デザインのためではなく文書構造をマークアップするのですから、極力減らしたほうが良いです。本当に必要なのか?
・セレクタはCSS2以降は基点となるセレクタを書くことになりました。セレクタの書き方を見直しましょう。
 それだけで、HTMLもCSSもとても判りやすくなります。
★書いたら、Validatorでチェックすること
HTML: Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
CSS: W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
★タブは、_に変換してあるので戻すこと。

<!doctype html>
<html>
_<head>
__<meta charset="utf-8">
__<title>サンプル</title>
__<meta name="description" content="">
__<meta name="author" content="IRUKA">
_<style media="screen">
<!--
html,body{
margin:0;padding:0;
}
header,body,footer{
width:90%;
min-width:640px;max-width:1000px;
margin:0 auto;
}
h1,h2,h3,h4,p{
margin:0;padding:0;
line-height:2em;
}
p{text-indent:1em;}
header nav ul,header ul li{
list-style-type:none;
text-align:center;
}
header ul li{
display:inline-block;
}
section{
position:relative;
min-height:400px;
width:auto;
min-width:0;

}
section section{
min-height:0;height:auto;
margin-left:25%;
}
section section aside{
float:right;
width:35%;
}
p.comment{clear:right;}
section nav{
position:absolute;
top:0;left:0;
width:25%;height:100%;
}
footer ul{
text-align:center;
}
footer ul.siteMap li{
list-style-type:none;
display:inline;
}
footer ul.siteMap li+li:before{
content:" | ";
}
-->
_</style>
_</head>
_<body>
__<header>
___<h1>Web開発室ブログ</h1>
___<nav>
____<ul>
_____<li><a href="#hoge">最新の投稿</a></li>
_____<li><a href="#hoge">アーカイブ</a></li>
_____<li><a href="#hoge">開発者向け</a></li>
_____<li><a href="#hoge">お問い合わせ</a></li>
____</ul>
___</nav>
__</header>
__<section>
___<section>
____<h2>なぜHTML5が次のWeb開発スタンダードになりえるのか</h2>
____<p>
_____開発プロジェクトリーダー太郎
_____<time datetime="2010-10-01T14:39">October 1st, 2010 at 2:39PM</time>
____</p>
____<p>
_____HTML4.01が世の中に発表されてから、HTML規格の外側で様々なアイデアやシステムが試行錯誤されてきました。結果、複数の団体が「Webの基準」を目指してアイデアやシステムの営業に躍起になっていました。つまりHTMLは、基本的なぶぶんでは「業界標準」でしたが、求められる装飾や細かな部分については機能不足だったのです。
____</p>
____<aside>
_____<h3>Something aside</h3>
_____<p>
______スマートフォンのブラウザはパソコンのブラウザよりも意図的にHTML5の仕様に対応しています。
_____</p>
____</aside>
____<p>
_____機能不足が指摘されていた「装飾」の部分について、HTML5は大きな一歩を踏み出しました。
_____オーディオやムービーをHTML5の機能だけで実現できるように拡張し、
_____本来の利用方法とは違った使われ方をしていた様々な要素に対する解決策を打ち出しました。
____</p>
____<p class="comment">
_____<a href="#"><i>25 コメント</i></a>...
____</p>
___</section>
___<nav>
____<h3>アーカイブ</h3>
____<ul>
_____<li><a href="2010/10">October2010</a></li>
_____<li><a href="2010/9">September2010</a></li>
_____<li><a href="2010/8">August2010</a></li>
_____<li>・・・【中略】・・・</li>
_____<li><a href="2010/2">February2010</a></li>
_____<li><a href="2010/1">January2010</a></li>
____</ul>
___</nav>
__</section>
__<footer>
___<h3>A nice footer</h3>
___<ul class="siteMap">
____<li><a href="#">ホーム</a></li>
____<li><a href="about">About</a></li>
____<li><a href="terms.html">サービスの条件</a></li>
____<li><a href="privacy.html">プライバシーについて</a></li>
___</ul>
___<address>©2010 パソコン教室</address>
__</footer>
_</body>
</

投稿日時 - 2013-05-14 16:19:21

お礼

ありがとうございます。
確かに要素が多くなると造ってる自分も分からなくなりますね。
さらに勉強して身につけていきたいと思います。
検証サービスを教えていただきありがとうございました。

投稿日時 - 2013-05-15 11:40:01

あなたにオススメの質問