Programing

【勉強用】cssで各セクションの隙間を修正|デベロッパーツールを活用

デベロッパーツールでCSSを簡単に修正
プログラマー
プログラマー
サイトを作成したものの、セクションの間にすき間ができてしまって、どうにか埋めたい……

このような悩みを解決するためのポイントは、デベロッパーツールを活用することです。

コードの問題点がわかり、短時間で修正を済ませることができます。

今回は、私が開発したサイトを例に、デベロッパーツールを活用して、cssを修正するコツをまとめました。

まずはサイトの修正したい部分を確認

今回、修正したい部分は、以下の3点。

①トップの上部

ナビバーとファーストビューの間の隙間です。

修正①

②セクションの間

修正②

③フッターの上の部分

サンプルスタジオ2の裏の画像とフッターの間の白い部分です。

修正③

デベロッパーツールを活用!修正開始!

では、さっそくデベロッパーツールを活用して隙間の白い部分を修正していきます。

①ナビバー下部

修正①

こちらの白い隙間を埋めていきます。

修正したページを開いた画面の右上の「×ボタン」の直下に、縦に三つ並んだ点があります。そこをクリックしましょう。

すると、「その他のツール」があります。そこから「デベロッパーツール」をクリックします。

Ctrl+Shift+I

ショートカットキーを使用したい方は、こちらでできます。

デベロッパーツールを起動すると、以下の画面が出てきます。

デベロッパーツール

右側の部分を注意深く見ていきます。

デベロッパーツールズーム

こちらの左側がHTML、右側のStylesタブがCSSを表しています。

右側のcssの記述にマウスを当てていくと、以下のようなチェックボックスが現れることがポイントです。

mainpage

すると、実際の画面の該当箇所が色づきます。

塗りつぶし

ということで、以下のコードが空白の原因となっていることが特定できました。

.main-page{

margin-top: 50px;

}

こちらのコードを消すと、以下のように隙間が消えました。これで、この部分の修正が完了しました。

修正後

同様に残りの2つの部分も修正します。

ビフォーアフターまとめ

①トップの上部

修正前

修正①

修正後

修正後

②セクションの間

修正前

修正②

修正後

修正後②

③フッターの上の部分

サンプルスタジオ2の裏の画像とフッターの間の白い部分をなくしました。

修正前

修正③

修正後

修正後③

まとめ

デベロッパーツールを活用すると、どのコードが修正したい部分と繋がっているのかをすぐに見つけることができます。

ページを修正したい時は、デベロッパーツールを活用してみてください。

ABOUT ME
Ryo
【複業家】会社員をしながら、web関連の事業を個人で行っています。SEOコンサル、Lステップ構築、ボイスパーカッション講師。