質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.38%
Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

789閲覧

HTML/CSSの画像の張り方

kougai

総合スコア3

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/23 04:23

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

簡単なホームページを作っている最中です。しかし、画像を一列に表示しようとしても二列になってしまいます。画像の大きさを変えてもかわりません。どうしたらいいでしょうか。

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

エラーメッセージ なし ### 該当のソースコード 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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

snowdropAPP

2021/06/23 04:46 編集

```css .contents-items { float: left; } ``` なぜfloatを使ったのでしょうか CSSで横並びにする場合はdisplay:flexを使うのが一般的です。 https://csshtml.work/img-3sidebyside/ ここがおすすめです
kougai

2021/06/23 06:17

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

回答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
K_3578

総合スコア1282

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kougai

2021/06/23 06:15

ありがとうございます。すごく助かりました。
K_3578

2021/06/23 06:17

解決されたのなら良かったです。 お手数ですが、質問文は編集できますので、ソースコードは私の回答の様に コードブロックに入れてくれると他の方が見られるときに見やすくなって助かります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.38%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問