WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:サイトのコンテンツが足りずフッターが浮き上がってしまう問題の対処法(JavaScript編)
HOME
次の記事:WordPress新オリジナルテーマ進捗状況

余白設定を完璧にしているはずなのに、画像の下に余白が出来てしまう問題の対処方

Web知識|WordPress

 

WordPressオリジナルテーマのカスタムヘッダー機能搭載時にタイトルの問題が発生しました。ちなみにWordPressのカスタムヘッダー機能というのは、ユーザーが簡単にヘッダー部分を編集出来るようにする為の機能です(ヘッダー画像の切り替え等)。

 

ヘッダー画像の下に余白

ほんの僅かですが、ヘッダー画像の下に余白が出来てしまっています。ヘッダー画像を覆うボックスには最小高さ180px(min-height: 180px;)を設定しており、表示している画像の高さもピッタリ180pxです。

※何故ヘッダー画像を覆うボックスに180px固定の高さを設定していないかというと、ユーザーの投稿する画像サイズによって、そのボックスの高さをケースバイケースで変える必要がある為です。

 

ヘッダーに配置されている要素全てのmargin、paddingは適切に設定されています。

しかし、実はここで問題になっているのは要素の余白設定ではなく、画像の配置設定です。

結論から言うと、ヘッダー画像となっているimg要素に vertical-align: bottom; を適用すると解決します。

 

ヘッダー画像の下の余白が無くなった

ヘッダー画像下の余白が無くなりました。

 

この問題が発生した時、「あぁ、こういう時にimg要素のvertical-alignを設定すればいいのか」とすぐにピンと来ました。というのも、私が勉強しているウェブデザイン技能検定という資格試験で、過去にこれと同じケースを例にとった問題が出題された事があり、その試験問題をこのブログで解説していたからです。以下、その試験問題と解説になります。

 

第11問(H26第4回試験より)

次のCSSが適用されたHTMLコードをウェブブラウザで表示すると、図のように画像の下部には指定したマージン以上の余白ができていた。画像下部のみ余白が広くなる理由の説明として最も適切なものを、以下より1つ選択しなさい。

問題図
─────HTML─────
<p><img src="img.png" width="300" height="424" alt=""></p>
─────CSS─────
p {
 width: 304px;
 margin: 0 auto;
 border: 1px solid #333;
}
p img {
 margin: 2px;
}
  1. 特定のウェブブラウザのバグによるものである。
  2. pタグに高さを指定していないためである。
  3. 画像下部が、テキストのベースラインに揃えられて表示されるためである。
  4. ウェブブラウザごとの仕様の差によるものである。

3

ベースライン図解

※uの部分に間違えてyを打ち込んでいます

小文字のアルファベットを打ち込んでいき、xの上下に線を引きます。この線はアルファベットの見た目を整える基準線となります。そして下の基準線がベースラインとなります。pやyなど、ベースラインを突き抜けて表示されるアルファベットの為にスペースが確保されているので、画像の下部をベースラインに合わせると余白が出来ます。

 

画像の位置調整

vertical-align: bottom;を指定すると、初期設定でベースラインに揃っていた画像下部の位置を、行ボックスの下に変更する事が出来ます。

 

選択肢2「pタグに高さを指定していないためである」が間違いなのは、仮にp要素の高さを画像サイズと同じにしても、子要素(img要素)が親要素(p要素)のベースライン設定を引き継ぐ為、どちらかの要素のベースライン設定を変更しなければ問題は解消しない、という事だと思います。

|

余白設定を完璧にしているはずなのに、画像の下に余白が出来てしまう問題の対処方

0件のコメント

コメント

カテゴリ

月別アーカイブ