スキマを消す
どうもー、
プログラムの勉強とかは進んでません。
でもとりあえずサイトを見やすくしようと思って
ずっと気になっていたメニューの下のスキマを
滅しにかかる。
案の定、目をやられたが得たものもあった！
唐突にインフォメーション
・この記事はサイト作成超初心者のためのものである。
プログラマーは帰った帰った！
はい、凡人だけが残ったところで
今回のお題はこちら！
｢メニューの下の隙間をなくすには」です。
headerやnav,#map,ul,li,h1とかh2
あらゆるもののマージンを殺しても生き残る
しぶとい宿敵
「おのれっ・・！」
と言いつつ敗北の放置状態だったのですが
この度めでたく魔法の呪文を会得しました☆
それがこちら
ul li img {
vertical-align: bottom;
}
スタイルシートにコレを書き込んで瞬殺！
メニュー画像のサイズが悪いの？とか思って
書き直したり何だりと時間を費やしてたのが滑稽だね☆
エクセレーント！ブラボー！
では、以下に私の足取りをだらだら解説。
そういやマージンやパディングを見れるツールが
あったよなぁと記憶を辿る。
私の認識ではプログラマー用の（？）そういうのを
ダウンロードするんだと思っていた
しかし普通にブラウザ機能にあるらしい
思って自分のサイトを開いて右クリック！
（あれ左クリックだったかな？）
コホン、とにかく上記のような四角がでたら
検証とか要素を検証とか
それらしいのをクリックすると
下の方にこんな感じで出るので
気になる隙間はどの要素の領域なのか
見ることが出来るよ！
そして今回はliの領域だったので
「liの余白を無くす」
に的を絞ってネット検索！
どうやらメニューに画像（img）を使っていることが
原因らしい。
親要素とインライン要素の確執！
（言ってみたかっただけです。深い意味はない）
よくわからんが（オイ）
デフォルトの指定だとズレが生じて隙間となるので
vertical-alignで下のラインに合わせる指定をすれば
問題ないということなのだ！
まぁ、なんだ
とにかく隙間でお困りの方は
ひとつお試しあれ☆
結構見やすくなったと思う我のサイト！↓
