関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
デジタル関連コミュニティ
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
ホームページ作成
【ホームページ作成】画像の下に謎の隙間ができるのを防ぐには
画像の表示・活用 (HTML,CSS,JavaScript)
更新日：2006年06月09日
画像の下に謎の隙間ができるのを防ぐには
背景色を付けたボックス内に画像を配置した場合など、画像の下側に謎の余白が現れることがあります。この余白は、なぜ現れるのでしょうか。また、この余白をなくすには、どうすればよいでしょうか？
画像の下に余白ができないようにするには？
「行の中での縦方向の位置」を指定するための vertical-align というプロパティを使えば、 下図のように、画像がベースラインではなく下端に揃えられるようになります。
画像がdiv要素の中にある場合は、次のようにスタイルを記述します。
<style type="text/css">
div img { vertical-align: text-bottom; }
</style>
div img { vertical-align: text-bottom; }
</style>
もし、div要素ではなくh1要素の中にある場合には、次のように記述します。
<style type="text/css">
h1 img { vertical-align: text-bottom; }
</style>
h1 img { vertical-align: text-bottom; }
</style>
上記のように、vertical-alignプロパティの値に text-bottom を指定すると、 下端が「テキスト（文字）の下端」に揃うようになります。
その結果、冒頭でご紹介したHTMLの表示結果は、下図のようになります。
画像の横に、ベースラインの下側にはみ出る文字を書いてみるとよく分かります。
先ほどのスタイルを適用することによって、画像の下端が、ベースラインではなく文字の下端に揃っていることがお分かり頂けるでしょう。
おわりに
今回は、画像の下側に現れる余計な隙間を、スタイルシートを使ってなくす方法をご紹介致しました。
この方法を頭の隅に入れておくと、画像を使った様々なデザインの途中で余計な余白が出てしまった場合でも、簡単に対処できるでしょう。
関連記事
この記事の担当ガイド
関連キーワード[PR]
住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！ さぁ、いますぐチェック！
人気ホームページ作成ランキング
Powered by 価格.com
関連キーワード[PR]
関連キーワード[PR]
メルマガ登録
【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。
おすすめ厳選サイト
季節特集
専門家を探せる、相談できる。
All About モバイル
Copyright(c) All About, Inc. All rights reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます