このような悩みを解決するためのポイントは、デベロッパーツールを活用することです。
コードの問題点がわかり、短時間で修正を済ませることができます。
今回は、私が開発したサイトを例に、デベロッパーツールを活用して、cssを修正するコツをまとめました。
まずはサイトの修正したい部分を確認
今回、修正したい部分は、以下の3点。
①トップの上部
ナビバーとファーストビューの間の隙間です。
②セクションの間
③フッターの上の部分
サンプルスタジオ２の裏の画像とフッターの間の白い部分です。
デベロッパーツールを活用！修正開始！
では、さっそくデベロッパーツールを活用して隙間の白い部分を修正していきます。
①ナビバー下部
こちらの白い隙間を埋めていきます。
修正したページを開いた画面の右上の「×ボタン」の直下に、縦に三つ並んだ点があります。そこをクリックしましょう。
すると、「その他のツール」があります。そこから「デベロッパーツール」をクリックします。
Ctrl＋Shift＋I
ショートカットキーを使用したい方は、こちらでできます。
デベロッパーツールを起動すると、以下の画面が出てきます。
右側の部分を注意深く見ていきます。
こちらの左側がHTML、右側のStylesタブがCSSを表しています。
右側のcssの記述にマウスを当てていくと、以下のようなチェックボックスが現れることがポイントです。
すると、実際の画面の該当箇所が色づきます。
ということで、以下のコードが空白の原因となっていることが特定できました。
.main-page{
margin-top: 50px;
}
こちらのコードを消すと、以下のように隙間が消えました。これで、この部分の修正が完了しました。
同様に残りの2つの部分も修正します。
ビフォーアフターまとめ
①トップの上部
修正前
修正後
②セクションの間
修正前
修正後
③フッターの上の部分
サンプルスタジオ２の裏の画像とフッターの間の白い部分をなくしました。
修正前
修正後
まとめ
デベロッパーツールを活用すると、どのコードが修正したい部分と繋がっているのかをすぐに見つけることができます。
ページを修正したい時は、デベロッパーツールを活用してみてください。
