- ベストアンサー
画像横にテキスト
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にしてみましたが、改善されません。 余白を限りなく無くすにはどうすればよいでしょうか。 よろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- Tacochin
- ベストアンサー率63% (81/128)
終了（閉じ）タグが幾つか余計に記述されていることが直接の原因です。詳細は以下項目の１をご参照ください。１～５の説明の下へ具体的な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> ---------------------------------- 修正前後の画像を添付します。修正前の画像は質問者さんが提示していただいたソースでのキャプチャー画像です。
補足
ご回答ありがとうございます。 教えて頂いた内容で、確かに余白を無くすことはできたのですが 画像サイズ指定が効かなくなり、小さくなってしまいました。 もう一度、ご指示いただければ幸いです。 ちなみに画像は <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> です。 よろしくお願いいたします。
- type0（@type0）
- ベストアンサー率56% (345/613)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
何度もお手を煩わせてすみませんでした。 おかげで解決することができました。 ありがとうございました。