• ベストアンサー

画像横にテキスト

HTML CSS初心者です。 囲み枠内の画像横にテキストを配置したく 【HTML】 <div style="border: #ff8c04 solid 2px; border-left: #ff8c04 solid 10px; padding: 20px; background: #ffffff; box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); font-size: 100%;"> <p style=" margin: 0; padding: 0;"> <div class="flex"> <figure class="image">画像</figure> <div class="right"> <p class="title"><img src="https://187288_20240715191851c11.png" alt="肉球" width="46" height="35" />アイアンマン / Iron Man (2008)</p> <p class="text">【評価】：<span style="color:#FFCC33">★★★★★★★★★★</span> 10<span style="font-size:x-small;">/10</span> <br> 【ストーリー】：……。</p> </div> </div> </p></div><p></p> 【CSS】 .flex { display: flex; } .flex .image { width: 130px; /*画像サイズ指定*/ margin: 0; padding: 0; } .flex .image img { width: 100%; height: auto; } .flex .right { margin: 0 0 0 20px; padding: 0; } .flex .title { margin: 0; padding: 0; font-weight: bold; font-size: 16px; } .flex .text { margin: 10px 0 0; padding: 0; font-size: 15px; } body { margin: 20px; padding: 0; } としたのですが、下部に余白ができてしまいます。 body { margin: 20px; を0にしてみましたが、改善されません。 余白を限りなく無くすにはどうすればよいでしょうか。 よろしくお願いいたします。

画像を拡大する
  • CSS
  • 回答数3
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • Tacochin
  • ベストアンサー率63% (81/127)
回答No.3

imgタグとCSSへ２通り設定しているのが原因と考えられます。 ・imgタグ <img src="https://blog-imgs-165.fc2.com/j/u/n/junch7/entry-24s.jpg" alt="アイアンマン / Iron Man (2008)" width="141" height="200"> の width="141" height="200" の箇所 ・CSS .flex .image { width: 130px; /*画像サイズ指定*/ margin: 0; padding: 0; } の width: 130px; の箇所 タグとCSSの両方へ設定している場合は、CSSの設定が優先されます。従って画像の幅は、タグの141pxよりも若干小さい130pxで設定されてしまいます。 --- タグかCSS、どちらか一方へ設定してください。 ■CSS側で設定する場合： タグの設定（width="141" height="200"）を削除してください。 CSSを130pxから140pxへ変更してください。 ・imgタグ <img src="https://blog-imgs-165.fc2.com/j/u/n/junch7/entry-24s.jpg" alt="アイアンマン / Iron Man (2008)"> ・CSS .flex .image { width: 141px; /*画像サイズ指定*/ margin: 0; padding: 0; } ■タグで設定する場合； CSS側の設定を削除してください。 ・imgタグ <img src="https://blog-imgs-165.fc2.com/j/u/n/junch7/entry-24s.jpg" alt="アイアンマン / Iron Man (2008)" width="141" height="200"> ・CSS .flex .image { margin: 0; padding: 0; }

musicchan
質問者

お礼

何度もお手を煩わせてすみませんでした。 おかげで解決することができました。 ありがとうございました。

その他の回答 (2)

  • Tacochin
  • ベストアンサー率63% (81/127)
回答No.2

終了（閉じ）タグが幾つか余計に記述されていることが直接の原因です。詳細は以下項目の１をご参照ください。１～５の説明の下へ具体的なHTMLソースを貼っておきます。 ---------------------------------- １．終了タグが余計に多い body終了タグ直前の以下の部分が余計です。下方へ余白ができる直接の原因はこれです。 </p></div><p></p> HTMLの構成後は、最終的に文法チェックサイトでエラーが出ないか確認すると良いです。 HTML文法チェックサイト (W3C Markup Validation Service) ↓ https://validator.w3.org/#validate_by_input ２．メイン画像 メインの画像が全く設定されていません。CSSの設定を拝見すると、figureタグの中にimageクラスが設定され画像サイズもここで設定しているようです。 ・”img/abc11.png”のように相対パスで設定 　画像ファイル名をabc11.pngとし、 　imgフォルダへアップロード ・figureタグの中の"画像"の文字列は削除 ３．"【評価】：～"以降の余白設定 .flex .textのpadding パラメータが１個不足。左余白を0で設定追加 padding:10px 0 0 ; ↓ padding:10px 0 0 0; ４．肉球のアイコン画像 ・パス ”https://187288_20240715191851c11.png” 　では取得できないため 　↓、 ”img/187288_20240715191851c11.png” 　のように相対パスで設定。 ・imgタグへのサイズ指定 　↓ 　CSSでのサイズ指定 　class名を「nkico」として追加 ・サイズ 46px×35pxでは、扁平（横長）に崩れる →46px×42pxへ変更 ・文章の画像との縦方向の位置関係 vertical-alignがmiddle（中央）だと質問者さんが提示された添付画像より見た目が少し上に位置するので、微調整するため-40％で設定。 ５，「アイアンマン / Iron Man (2008)」の文字色 .flex .titleの文字色をパープル系の色へ変更 ---------------------------------- CSSの読み込み方法はstyleタグ，インライン（style属性），外部CSSファイルの３種類がありますが、今回は回答の都合上、styleタグで囲んで記述しました。できれば外部ファイルで読み込むことを推奨致します。 また、.flexクラスの親のDIVタグへ直接インライン（style属性）でcssを設定していますが、styleタグか外部CSSファイルで統一された方がよろしいでしょう。今回は変更せず、そのままにしてあります。 ---------------------------------- ソース： <!doctype html> <html lang="ja" dir="ltr"> <head> <meta charset="UTF-8"> <title>画像テスト</title> <style> .flex { display: flex; } .flex .image { width: 130px; /*画像サイズ指定*/ margin: 0; padding: 0; } .flex .image img { width: 100%; height: auto; } .flex .right { margin: 0 0 0 20px; padding: 0; } .flex .title { margin: 0; padding: 0; font-weight: bold; font-size: 16px; color:#e11def; } .flex .text { margin: 10px 0 0 0; padding: 0; font-size: 15px; } .nkico{ margin:0 10px 0 0; width:46px; height:42px; vertical-align:-40%; } body { margin: 20px; padding: 0; } </style> </head> <body> <div style="border: #ff8c04 solid 2px; border-left: #ff8c04 solid 10px; padding: 20px; background: #ffffff; box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); font-size: 100%;"> <p style=" margin: 0; padding: 0;"> <div class="flex"> <figure class="image"> <img src="./img/abc11.jpg" alt="Iron Man"> </figure> <div class="right"> <p class="title"><img src="./img/187288_20240715191851c11.png" alt="肉球" class="nkico">アイアンマン / Iron Man (2008)</p> <p class="text">【評価】：<span style="color:#FFCC33">★★★★★★★★★★</span> 10<span style="font-size:x-small;">/10</span> <br> 【ストーリー】：アメリカ企業と軍事契約を結ぶ巨大軍事企業スターク・インダストリーの社長で、億万長者で発明家の……。</p><!-- .text --> </div><!-- .right --> </div><!-- .flex --> </div><!-- .border --> </body> </html> ---------------------------------- 修正前後の画像を添付します。修正前の画像は質問者さんが提示していただいたソースでのキャプチャー画像です。

画像を拡大する
musicchan
質問者

補足

ご回答ありがとうございます。 教えて頂いた内容で、確かに余白を無くすことはできたのですが 画像サイズ指定が効かなくなり、小さくなってしまいました。 もう一度、ご指示いただければ幸いです。 ちなみに画像は <a href="https://blog-imgs-165.fc2.com/j/u/n/junch7/entry-24.jpg" data-lightbox="group"><img src="https://blog-imgs-165.fc2.com/j/u/n/junch7/entry-24s.jpg" alt="アイアンマン / Iron Man (2008)" width="141" height="200" ></a> です。 よろしくお願いいたします。

回答No.1

記載のHTMLとCSSでは表示確認出来ないので、記載するならHTML全体を記載した方が良いと思います。また、 https://187288_20240715191851c11.png/ は当然ながら、net::ERR_NAME_NOT_RESOLVEDで、エラーになりますね。 <div style="border: #ff8c04 solid 2px; border-left: #ff8c04 solid 10px; padding: 20px; のpaddingの値を小さくしてみるとかで、調整してみてはどうですか？ そちらと同じ状態での表示となっていないので、正しい回答は出来かねます。 もしくは、chromeで、そのhtmlを開いて、F12で開発者ツールを表示後、「要素」タブを開くと、各要素のサイズなどが確認出来るので、それでHTMLを直接、編集し、確認しても良いとは思います。 下も参考にしてください。 https://sqripts.com/2023/12/14/82607/

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する