シリーズ第13回は、Google chromeの開発者ツールで表示の確認と編集をしてみます。うまく表示されていない部分を調整するために、原因究明と仮編集して確認する方法を書いています。これまでこの講座で書いてきたファイルを表示させた時に生じた例を使った実践的な情報です。
表示がおかしい
HTMLやCSSでプログラミングを行い実際に表示させてみると、思ったように表示されないということはよくあります。
これまでの回で書いてきたフッター部分ですが、ブラウザ表示すると何かおかしい。。。
中央寄せされたコピーライトに比べて、上のフッターメニューが少し右に寄っているように見えます。黄色の補助線をひいているので、ズレがよくわかると思います。
何が影響を与えているのか、開発者ツールを使って原因究明してみましょう。
開発者ツールで原因究明
前回解説したように、開発者ツールを表示させてみます。選択マーク（四角の中に矢印）をクリックしてフッターメニュー部分をマウスホバーしてみます。
すると…、画像のようにフッターメニューブロックの左端に微妙な余白（青囲み部分）がついています。
CSS情報を見てみると、これかなと思える記述があります。「padding-inline-start: 40px;」がuser agent stylesheet（ブラウザのデフォルト設定）で指定されています。
これが影響を与えているようです。つまり、先頭の余白があるため、中央寄せした場合でも40pxの余白分右側にずれて表示されるということのようです。
padding-inline-start プロパティについて
MDNでpadding-inline-startについてリファレンスを確認してみます。
概要の説明に「要素のインライン方向の理論的な先頭のパディングを定義」とあります。要するに、先頭に余白がつくということです。画像の黄色囲み部分でもそのことを確認できます。
このプロパティを無効にすれば、先頭の40pxの余白をなくすことができそうです。
仮編集して確認してみる
開発者ツールの良い点は、単に表示くずれの原因を究明できるだけでなく、その場で仮編集をして表示確認ができることです。
画像のように、該当する部分のCSSにpadding-inline-startを無効にするための記述を追加します。実際のstylesheet.cssファイルの66行目からの記述であることも確認できます。クリックすると、追加記述できるようになります。
画像のように、プロパティpadding-inline-startにunsetという値を入れます。すると、これまであたっていたuser agent stylesheetでは、打消し線が引かれpadding-inline-startが無効化されたことが分かります。
実際にブラウザ表示部分を見ると、この記述によりフッターメニューが下のコピーライトと同じように中央寄せできたことを確認できます。
このように原因究明と仮編集での確認ができれば、あとは簡単です。該当する本ファイルを修正してアップロードすればOKです。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第13回】はいかがでしたか。今回は、開発者ツールで表示確認と調整の方法を取り上げました。表示がおかしい部分の原因を調べ、仮編集して確認できる、大変便利なツールです。
こうした原因究明と編集を繰り返すことで、プログラミング知識だけでなく、実際の作業のスキルを磨いて行けますね。
では、次回もお楽しみに！
