東京ビートルズに続いて今回は 新HTML/CSS入門講座 で作成した架空の動物園サイト「Zooloppa」で検証ツールを使ってみましょう。
講座と一緒に作成されると、こうなることは無いかもしれませんが… 配置が上手く行かなかった場合を想定し、検証ツールで原因と修正方法を探してみます。
全体の完成イメージはこちらです。
FlexBoxの割合がおかしい時
flexプロパティを使って画像部分：テキスト部分＝2：5の割合に設定したはずなのに、画像部分の幅が大きくなってしまいました。
現在のHTMLと設定しているCSSはこちらです（必要部位のみ抜粋）。
【html】
<article class="section">
<div class="image">
<img src="images/s_panda.png">
</div>
<div class="desc">
<h3>パンダ</h3>
<p>ジャイアントパンダは、哺乳綱食肉目クマ科ジャイアントパンダ属に分類される食肉類。白と黒にはっきりと分かれた体毛が際立った特徴である。</p>
</div>
</article>
【css】
.section {
display: flex;
}
.image {
flex: 2;
}
.desc {
flex: 5;
padding: 0 2rem;
}
割合の指定（flexプロパティ）が効いていない原因を検証ツールで見てみましょう。
「image」クラスのdiv
「desc」クラスのdiv
一見どちらも問題無く
flexプロパティが効いているように見えます。
しかし.imageのflexプロパティ部分を無効化（チェックを外す）してみても表示は変わりません。
Stylesの最下部にあるボックスサイズ部分を見てみると、imageクラスを持つdivの幅は400pxになっています。
Elementsでその下のimgタグをクリックしても、幅は400px。
画像のサイズが大きいので、Flexアイテムの幅が引き伸ばされてしまったことが分かります。
画像が2:5に設定したFlexアイテムの幅内に収まるように
imgタグに対して「max-width:100%;」を入れてみましょう。
画像部分の大きさが変わりました。
cssファイルに
.image img{
max-width: 100%
}
と追加すると全ての画像部分のサイズが揃います。
ちなみに、
パンダと象の間はくっ付いていて
象のライオンの間に隙間がある
これも検証ツールで見ると原因がすぐにわかります。
オリジナルのcssファイルでは何も指定していませんが、
user agent stylesheet＝ブラウザ側の方で<p>タグにmarginを付けているんですね。
このためテキストが長い「象」のところは
margin部分が写真よりも下にはみ出した形になり、
次のブロック(<article>）タグとの間に隙間が出来てしまっているのですね。
均等に間隔を開けたい場合は * descクラス内のpタグに対してだけmarginを変更する * 下図のようにsectionに対してmarginを加える
などして調節します。
Firefoxの場合
各ブラウザの検証ツールは共通点も多いですが、それぞれ個性もあります。 先ほど使ったzooloppaサイトをFirefoxの検証ツールでも見てみましょう
Firefoxの検証ツールはChromeと同じくF12キー、右クリックメニューの「要素を調査」から開きます。
Firefoxの検証ツールには「レイアウト」という項目があります。
Flexboxデザインの検証にこの「レイアウト」パネルはとても便利。 FlexコンテナとFlexアイテムとなる要素のリストであったり、Flexアイテムのサイズ等を分かりやすく表示してくれます。
Firefoxの検証ツール（レイアウト項目）でZooloppaサイトの.imageを見ると、
フレックスアイテムが伸長される設定になっていて、 本来（flex:2;の場合）のサイズよりも150.58px横に呼びている という事が表示されています。
こちらの方が原因が分かりやすいかもしれません。
また、レイアウトのパネルの一番上には 「article.sectionのFlexアイテム」と、Flexコンテナが何かが表示されています。
Flexコンテナとなっている<article class="section">をクリックすると
Flexアイテムとして認識されている要素の一覧も見る事が出来ます。
Chromeを使用するという決まりはありませんので、使いやすいブラウザの検証ツールを使ってください。行き詰ってしまった時に別のブラウザから見てみるとヒントがある…という事もあるかもしれません。