画像の表示方法に関して

ITカレッジ愛西では、ITスキルを身につけたいと思って通っている方のために、学習環境を整えております。
就労移行支援の訓練生用のパソコンでは、Webページ作成のためのソフトとして、最新のDreamweaverを使用することができます。

最近、Webページの勉強をしているときにここでつまずいた、という声を訓練生から聞きましたので、こちらに例を提示いたします。

まず、枠内に隙間なく画像を1つ配置しようと思います。

HTML

<div class="sample-bordered">
  <img class="sample-img" src="（画像のパス）" alt="任意の画像">
</div>

CSS

.sample-bordered {
  box-sizing: content-box;
  max-width: 250px; /* 画像サイズの最大幅は好みで変更可 */
  border: 3px solid #000; /* 枠線の太さや色は好みで変更可 */
}

このように、下に隙間ができてしまいました。

実は、imgタグは文章と同様インライン要素なのですが、初期状態では「vertical-align: baseline;」がかかっています。
すなわち、アルファベットのxの下側に合わせる形をとっていまして、これが隙間の原因になっています。

次に、imgタグに「display: block;」を入れてみます。

img.sample-img {
  display: block;
}

今度は隙間が無くなりました。

別の方法として、imgタグに「vertical-align: bottom;」を入れてみます。

img.sample-img {
  vertical-align: bottom;
}

こちらも隙間が無くなりました。

いずれにしても、CSSでスタイルを編集する場合は、クラス（「class=”~~”」の部分）を指定することで、変更される要素を限定することができます。

基本的にはITの勉強は自主学習として取り組んでいただいていますが、不明点が出てきた場合には、Web制作などやチラシ制作、ロゴのデザイン制作などの担当スタッフが説明いたしております。

皆さんも、行き詰まることを恐れず知識を深めていきましょう❗