画像を縦並びににしたい

Question

前提・実現したいこと

画像を縦並びにしたいです。

発生している問題・エラーメッセージ

画像が横並びになって表示されてしまいます。

該当のソースコード

< body>

<header > < img src＝”img”/blog.png” width＝”20” height＝”20” alt＝”ブログの紹介画像です。”>

< img src＝”img”/photos.png” width＝”20” height＝”20” alt＝”写真の紹介画像です。”>

</header> </body>

Answer 1

imgタグはインライン要素なので横並びになります。

div要素で囲むか、CSSでブロック要素に変換すればいいでしょう。

header img {
  display: block;
}

あるいはflexで縦並びにするか。

header {
  display: flex;
  flex-direction: column;
}

Comments

[teruyoru]

回答ありがとうございます。ドットインストールのコードを真似して書いたつもりなのですが、ドットインストールの方ではこのコードで画像が縦に並んでいます。なのになぜこのコードで横並びになってしまうのでしょうか？

[hatena19]

このHTMLだけでは縦並びにならないです。
CSSがどうなっているか確認しましょう。

[teruyoru]

わかりました。
ありがとうございます。

Answer 2

手っ取り早いのはimgをblockにしてしまうこと

img {display:block;}

あとは運用方法によります

Comments

[teruyoru]

回答ありがとうございます。ドットインストールのコードを真似して書いたつもりなのですが、ドットインストールの方ではこのコードで画像が縦に並んでいます。なのになぜこのコードで横並びになってしまうのでしょうか？

[yambejp]

cssの指定がおかしいのでは？

<style>
img {display:block;}
</style>
<img src="https://placehold.jp/ff0000/00ffff/20x20.png?text=1">
<img src="https://placehold.jp/00ff00/ff00ff/20x20.png?text=2">
<img src="https://placehold.jp/0000ff/ffff00/20x20.png?text=3">
<img src="https://placehold.jp/000000/ffffff/20x20.png?text=4">

[teruyoru]

ありがとうございます。