Q&A
ソースコードはMarkDownのcode機能で提示してください。
参考質問:https://teratail.com/questions/238564
画像を横並びにしたいです。
簡単なホームページを作っている最中です。しかし、画像を一列に表示しようとしても二列になってしまいます。画像の大きさを変えてもかわりません。どうしたらいいでしょうか。
発生している問題・エラーメッセージ
エラーメッセージ なし ### 該当のソースコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="header"> <div class="header-logo"> すずめの世界 </div> <div class="header-list"> <ul> <li>プロフィール</li> <li>Twitter</li> <li>お問い合わせ</li> </ul> </div> </div> <div class="main"> <h1 class="main-logo">HELLO SUZUME WORLD</h1> <h2>すずめの世界へようこそ</h2> <div class="contents"> <h3>すずめを知ろう</h3> <div class="contents-items"> <img src="image/snow_on_suzume.jpg"> </div> <div class="contents-items"> <img src="image/susume_winter.jpg"> </div> <div class="contents-items"> <img src="image/suzume1.jpg"> </div> <div class="contents-items"> <img src="image/suzume2.jpg"> </div> </div> </div> </body> </html> css .header { background: #7fffd4; height: 60px; color: white; } .header-logo { font-size: 30px; float: left; padding: 10px 40px; } .header-list { font-size: 20px; } .header-list li { float: left; padding: 20px 20px; list-style: none; } .main { padding: 20px 40px 0 40px; } .main-logo { font-size: 52px; margin-bottom: 5px; } .main h2 { font-size: 28px; margin-top: 5px; } .contents-items img { width: 25%; height: 25%; } .contents-items { float: left; }
```css
.contents-items {
float: left;
}
```
なぜfloatを使ったのでしょうか
CSSで横並びにする場合はdisplay:flexを使うのが一般的です。
https://csshtml.work/img-3sidebyside/ ここがおすすめです
わかりました。ありがとうございます。
回答1件
0
ベストアンサー
css
1.contents { 2 display: flex; 3} 4
動作確認してないけどとりあえず親要素にdisplay:flex;する。
floatで横並びにするのはかなり古い技術です。
CSS フレックスボックスレイアウト -MDN
このままだとh3がフレックスボックスレイアウトに突っ込まれるので、
<div class="contents">の中から出してあげた方が良いと思われる。
質問者氏の期待する動作がどうか分からないので憶測だが
投稿2021/06/23 04:38
編集2021/06/23 04:49総合スコア1282
あなたの回答
tips
プレビュー
