挿入した画像(img要素)が開いているブラウザのウインドウサイズより小さいと横並びになってしまいます。
たいていの写真サイズとノートパソコン程度の画面で見ているのであれば、自動的にカラム落ちして縦並びになっているのかもしれません。ですが、小さい画像を使っている時に突然横並びになっている状態を目の当たりにして混乱してしまう人もいると思います。
そんな時は、まず、どうして画像(img要素)がそのままだと縦に並ばないのか、画像(img要素)の特徴をおさらいしてみましょう。
imgタグ
- インラインブロック要素
- Image(イメージ)の略
- 画像を表示したい時に使う
- 使用できる画像の形式はgif,jpeg,pngの3種類
- html4から必ずalt属性をつける必要がある
alt属性
alt属性は画像を表示できない時に代わりに表示するテキストを指定する時に使います。また、読み上げソフトで音声として画像を認識されたり、画像の読み込みに時間がかかる時にはそれまでの間、テキストが代わりに表示されます。
webがどんな人にでも使いやすくあるために、必須条件となったんだと思います。なので、忘れずにつけるようにしましょう。
画像(img要素)が横並びになってしまう理由と縦並びにする方法
画像はインラインブロック要素なので、cssで何も指定していないとどんどん横に並んでいきます。なので、これをブロック要素に指定して、縦に積まれるようにする必要があります。逆に言えば、指定さえすれば縦並びにはなります。
<img src="sample.png">
<img src="sample2.png">
<img src="sample3.png">
img {
display: block;
}
img src="sample.png"
img src="sample.png"
img src="sample.png"
img {
display: block;
}
画像(img要素)をセンタリング(中央寄せ)する方法
縦並びにすることができたら次はセンタリング(中央寄せ)してみましょう。ブロック要素をセンタリングするには上下のmargin(一番外側の幅)の上下を0にして、左右をauto(要素が本来持っている大きさ)をcssやsass(scss)で指定してあげればOKです。
img {
display: block;
marigin: 0 auto;
}
img {
display: block;
marigin: 0 auto;
}
画像(img要素)にmargin(マージン)を指定していて「margin: 0 auto;」が使えない場合の方法
例えば、画像(img要素)を縦並びでセンタリング(中央寄せ)にしたいけど、画像同士の上下に間をあけたい！という時。上下のマージンを指定してリロードした瞬間に左寄せに戻ってしまいます。
こんな時はどうするかというと、わたしの場合は、liタグで画像(img要素)を囲います。
htmlはそのままでOKです。
liタグはブロック要素なので、cssでmargin: 0 auto;を指定したい所ですが、今回は上下のマージンを指定したいので、それでは二の舞となってしまいます。
なので、親要素であるulタグにtext-align: center;を指定します。
また、liタグを指定すると黒丸が先頭に出てきてしまうので、lisut-style: none;を指定して、黒丸を消しましょう。
これで画像(img要素)がセンタリング(中央寄せ)できたはずです！
ul {
text-align: center;
}
ul li {
list-style: none;
margin: 20px 0;
}
ul {
text-align: center;
li {
list-style: none;
margin: 20px 0;
}
}
あれ？少し右にズレてる？
画像が少し右にズレているかも・・・と思った人はいないでしょうか？それは、正解です！見間違いではありません。
実は、bodyタグやulタグ自体にもmarginやpaddingが初期値として与えられているのです。なんででしょうね。まだまだ勉強したてのわたしにとってはちょっぴり邪魔です(>o<)
というわけなので、bodyタグ、ulタグのcssの指定をとっぱらっておきましょう。
htmlはそのまんまでOKでしゅ、
body {
margin: 0;
}
ul {
text-align: center;
padding: 0;
}
ul li {
list-style: none;
margin: 20px 0;
}
body {
margin: 0;
}
ul {
text-align: center;
li {
list-style: none;
margin: 20px 0;
}
}