では実際にGoogle Chromeの検証ツールを使用して、 「東京ビートルズ」サイトが思い通りに配置出来ていない場合の原因を調査・修正していきましょう。
完成見本はこちらです。
ケース1-メニューがおかしい
ヘッダーメニューの部分を<ul>と<li>で囲うとこのような形になります。
黒い点（リストマーク）が出ていますし、文字が重なってしまっていますよね。
現在のHTMLと設定しているCSSはこちらです（必要部位のみ抜粋）。
【html】
<div id="header">
<h1>東京ビートルズ</h1>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="news.html">News</a></li>
<li><a href="videos.html">Video</a></li>
<li><a href="live.html">Live</a></li>
</ul>
</div>
【css】
#header {
margin-bottom: 20px;
}
#header h1 {
margin:0 0 10px;
}
#header li {
float: left;
font-size: 20px;
font-weight: bold;
}
検証ツールで直してみよう
Google Chrome検証ツールの「Styles」部分を使い、 メニューの表示を完成見本通りに直してみます。
検証ツールを立ち上げて、問題の箇所を見てみましょう。
メニューの<li>部分を選択します。
Stylesの項目では、 * 上部にcssファイルに記述した内容 * 下部にブラウザが自動的に付けているスタイル
が表示されています。
まず、文字の右側に表示されている黒い点（リストマーク）を消しましょう。
「Styles」のタブ部分を下にスクロールしていくと
user agent stylesheetでul{ list-style-type:disc; }という指定がなされていることが分かります。
この設定のせいでリストマークが表示されてしまっているんですね。
リストマークを表示させないよう、
「Styles」のタブを使って#header liにlist-style:none;を加えてみましょう。
入力内容が反映され、リストマークが消えました！
liタグかくっ付いていて見にくいので、marginの指定も入れてみます。
「Styles」タブ内に打ち込んだ内容は即座に表示に反映されます。
marginを何px打ち込めば綺麗に、もしくはデザイン図通りに仕上がるか悩んでいるときには、cssファイルで値を打ち換える→ブラウザをリロードするを繰り返すよりも早く結果が見られますよ。
最後にヘッダーメニュー部分だけズレてしまっているのを、 タイトルや画像と同じ位置に揃うように直します。
<li>部分にはmarginやpaddingなど右に寄る原因はなさそうですので、
Elementでその親要素となる<ul>タグを選択してみましょう。
user agent stylesheetでpaddingが付いていますね。 講座で使ったプロパティとは違う書き方になっていますが、下の図を見ると左側に40pxのpaddingが付いていることが分かります。
自作cssファイルには#header ulというセレクタを作っていないので、element.style {}に40pxのpaddingを打ち消すためpadding-left:0;を追加してみます。
これで揃いましたね。
「Styles」の部分はドラッグすると選択することが出来ます。 ctrl+cや右クリックでコピーして、上手く行った記述を自分のcssファイルに張り付ければ修正完了です。
ケース2-2カラムにならない
横に並べたい二つのボックスが縦に配置されてしまっています。
このボックス設計は下記の通りです。
【html】
<div id="wrapper">
<div id="header"></div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer"></div>
</div>
【css】
#wrapper {
width: 960px;
background: white;
margin: 0 auto;
padding: 20px;
}
#content {
float: left;
width: 640px;
margin-right: 25px;
}
#sidebar {
float: left;
width:300px;
}
#contentと#sidebar両方にfloatを指定しているのに、floatしていません。
検証ツールで見てみよう
検証ツールで#contentを見てみます。
次に#sidebarを確認。
どちらもwidthやfloatの部分に打ち消し線は入っていません。 設定したcssはきちんと効いているということですね。
こういった場合、ボックスの幅が親要素（このページの場合は#wrapper ）よりも大きくなっている可能性が高いです。 横並びにすると入りきらないため、上下配置されている形ですね。
先ほど見た#contentではmarginの指定がありましたから、一旦オフにしてみましょう。
回り込んで2カラムになりました。
cssファイルに設定したそれそれの幅を確認してみると
#wrappeｒの幅を960pxにしているのに対して、
* #content640px+margin-rightの25px =665px
* #sidebarが300px
・・・665px+300px＝合計965px 5pxオーバーしている事が分かります。
5px削ると回り込むはずなので、margin-rightを20pxにしてみましょう。
これで２つのボックスが横並び、かつ間に少し間隔が出来て見やすくなりました。
あとはcssファイルの該当箇所を修正すれば完成です。
（特に最初のうちは）検証ツールで調べてみても何が原因か思いつかないこともあります。
検証ツールを使ってブラウザ上でHTMLやCSSを変えていくメリットは元のファイルに影響しないこと。検証ツールのパネルに追加・変更を入力してみて仮にサイトがガタガタになってしまっても、リロードしてしまえば元に戻ります。
上手く行かない箇所の原因を何度も調べて触っているうちに「ここじゃないかな」という見当も付けやすくなってきますので、色々と触って試してみて下さい。