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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

2回答

3842閲覧

BootstrapのCardで表示させた画像に余白が出来てしまう。

manmaru

総合スコア31

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/09/10 16:19

編集2019/09/15 16:49

イメージ説明
添付画像の通り、カードと画像の間に余白が出来てしまい解消方法が見いだせずに困っています。
※wordpress化しながら制作しているのでhtmlの記述については、phpファイルの中に記述しているhtmlです。

試してだめだったこと。
1.htmlにmin-heightで高さを無理やりだす
2.cssにmin-heightで高さを無理やりだす
3.htmlのimg要素取っ払って、cssでbackgroud-imageで画像読み込んで、”cover”指定して表示させる

1と2は力業というかこれで実現したところで端末によって画像がはみ出したり問題が起こりそうな気がするのですが、、。
2については、デベロッパーツールで見ると表示されているので生きているようなのですが、実際画像は150pxになっておらず。
またデベロッパーツールで確認したところ特にmarginは効いてないようでした。
イメージ説明

php

1<?php get_header(); ?> 2<div class="container"> 3 <div class="row"> 4 <div class="col-lg-12"> 5 <nav> 6 <h1 class="page-header"></h1> 7 <ol class="breadcrumb"> 8 <li><a href="<?php echo home_url('/'); ?>">Home</a></li> 9 <li class="active"><?php the_title(); ?></li> 10 </ol> 11 </nav> 12 </div> 13 </div> 14<div class="container"> 15 <div class="room_topic"> 16<h2>宿&nbsp;</h2> 17 <p>お部屋には温泉風呂が付いており、日本画のような景観が望めるお部屋を1室づつコーディネートしております。<br>お部屋は全部で13部屋。ツイン、ダブルのお部屋に加え、160㎡以上を有する数寄屋造りの特別室を2部屋ご用意しております。<br>全てのお部屋から相模湾を望む、全室オーシャンビュー。</p> 18 </div> 19 <div class="row"> 20 <div class="card mb-3" style="width: 500px;"> 21 <div class="no-gutters"> 22 <div class="room_photo01"> 23 <img src="<?php echo get_template_directory_uri(); ?>/images/1_thumb2.jpg" class="card-img" alt="..." min-height="150px"> 24 </div> 25 <div class="col-md-8"> 26 <div class="card-body"> 27 <h2 class="card-title">梅の間</h2> 28 <p class="card-text"><small>日本の空間美を大切にした館内で一番広い特別室<br>一泊22,000円~</small></p> 29 <button type="button" a href="#" class="btn btn-outline-secondary btn-lg">詳細を見る</button> 30 <button type="button" a href="page-reserve.php" class="btn btn-outline-info btn-lg">この部屋を予約する</button> 31 </div> 32 </div> 33 </div> 34 </div> 35 36 <div class="card mb-3" style="width: 500px;"> 37 <div class="row no-gutters"> 38 <div class="col-md-4 room_photo01"> 39 <img src="<?php echo get_template_directory_uri(); ?>/images/1412_01.jpg" class="card-img" alt="..." min-height="150px"> 40 </div> 41 <div class="col-md-8"> 42 <div class="card-body"> 43 <h2 class="card-title">竹の間</h2> 44 <p class="card-text"><small>竹と和の風情に心癒される数寄屋造りの特別室<br>★一泊22,000円~</small></p> 45 <button type="button" a href="#" class="btn btn-outline-secondary btn-lg">詳細を見る</button> 46 <button type="button" a href="page-reserve.php" class="btn btn-outline-info btn-lg">この部屋を予約する</button> 47 </div> 48 </div> 49 </div> 50 </div> 51 52 <div class="card mb-3" style="width: 500px;"> 53 <div class="row no-gutters"> 54 <div class="col-md-4 room_photo01"> 55 <img src="<?php echo get_template_directory_uri(); ?>/images/2_thumb1.jpg" class="card-img" alt="..." min-height="150px"> 56 </div> 57 <div class="col-md-8"> 58 <div class="card-body"> 59 <h2 class="card-title">松の間</h2> 60 <p class="card-text"><small>松の木と和の風情に心癒される数寄屋造りの特別室<br>★一泊22,000円~</small></p> 61 <button type="button" a href="#" class="btn btn-outline-secondary btn-lg">詳細を見る</button> 62 <button type="button" a href="page-reserve.php" class="btn btn-outline-info btn-lg">この部屋を予約する</button> 63 </div> 64 </div> 65 </div> 66 </div> 67 68 <div class="card mb-3" style="width: 500px;"> 69 <div class="row no-gutters"> 70 <div class="col-md-4 room_photo01"> 71 <img src="<?php echo get_template_directory_uri(); ?>/images/3_thumb1.jpg" class="card-img" alt="..." min-height="150px"> 72 </div> 73 <div class="col-md-8"> 74 <div class="card-body"> 75 <h2 class="card-title">スイートルーム</h2> 76 <p class="card-text"><small>ゆったりとした広さ眺望を満喫できるテラス付き<br>★一泊19,000円~</small></p> 77 <button type="button" a href="#" class="btn btn-outline-secondary btn-lg">詳細を見る</button> 78 <button type="button" a href="page-reserve.php" class="btn btn-outline-info btn-lg">この部屋を予約する</button> 79 </div> 80 </div> 81 </div> 82 </div> 83 84 <div class="card mb-3" style="width: 500px;"> 85 <div class="row no-gutters"> 86 <div class="col-md-4 room_photo01"> 87 <img src="<?php echo get_template_directory_uri(); ?>/images/4_thumb1.jpg" class="card-img" alt="..." min-height="150px"> 88 </div> 89 <div class="col-md-8"> 90 <div class="card-body"> 91 <h2 class="card-title">2F ツイン</h2> 92 <p class="card-text"><small>相模湾の眺望をテラスからも楽しめるお部屋<br>★一泊18,000円~</small></p> 93 <button type="button" a href="#" class="btn btn-outline-secondary btn-lg">詳細を見る</button> 94 <button type="button" a href="page-reserve.php" class="btn btn-outline-info btn-lg">この部屋を予約する</button> 95 </div> 96 </div> 97 </div> 98 </div> 99 100 <div class="card mb-3" style="width: 500px;"> 101 <div class="row no-gutters"> 102 <div class="col-md-4 room_photo01"> 103 <img src="<?php echo get_template_directory_uri(); ?>/images/5_thumb1.jpg" class="card-img" alt="..." min-height="150px"> 104 </div> 105 <div class="col-md-8"> 106 <div class="card-body"> 107 <h2 class="card-title">1F ツイン/ダブル</h2> 108 <p class="card-text"><small>明るく開放感あふれる窓から相模湾を望むお部屋<br>★一泊18,000円~</small></p> 109 <button type="button" a href="#" class="btn btn-outline-secondary btn-lg">詳細を見る</button> 110 <button type="button" a href="page-reserve.php" class="btn btn-outline-info btn-lg">この部屋を予約する</button> 111<!-- <button type="button" class="btn btn-outline-info btn-sm"><a href="<?php echo home_url(); ?>/reserve">この部屋を予約する</a></button> --> 112 </div> 113 </div> 114 </div> 115 </div> 116</div> 117</div> 118</div> 119 <?php get_footer(); ?>

css

1/* ------------------------------------------------- * 2 * 客室ページ 3 * ------------------------------------------------- */ 4 /*↓画像をcssの背景画像として読み込み”cover”を設定してみたが、変わらず。*/ 5 /*.room_photo01 {background: url("<?php echo get_template_directory_uri(); ?>/images/3_thumb1.jpg") center no-repeat / cover;}*/ 6 /*↓上記cssを消した上で、img要素に無理やり高さを出したが、変わらず。*/ 7/*.room_photo01 img{ 8max-height: 150px; 9}*/ 10 11.row .no-gutters { 12 display: flex !important; 13 flex-wrap: nowrap !important; 14 margin-right: 0 !important; 15 margin-left: 0 !important; 16 height: 200px !important; 17} 18.room_photo01 img { 19 min-height: 190px; 20 margin: 5px; 21} 22 23.room_topic { 24 max-width: 1050px; 25 padding: 20px 0px 20px 0px; 26} 27.card:nth-child(even) { 28 margin-left: 3rem; 29} 30.card:nth-child(odd) { 31 margin-left: 15px 32 ; 33}

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

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

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

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

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

guest

回答2

0

自己解決

期日が近くどうにも分からなかったので、BootstrapのCardを元にcol系の記述をとっぱらい、
flex-boxで無理やり画像の余白のないカードにしました。
もう上書きをしてしまったので、問題の記述が残っておらず、、。

ただ、このカードの余白問題は2度目でいまだ未解決なので、
来週中に再度質問用にカードを組み込んで投稿させて頂きます。

投稿2019/09/15 16:54

編集2019/09/15 16:56
manmaru

総合スコア31

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

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

0

原因1, 画像の高さより文字の高さが高い
原因2, 提示のコード以外にどこかにmarginが効いている。

投稿2019/09/11 00:05

編集2019/09/11 00:11
kyoya0819

総合スコア10429

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

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

manmaru

2019/09/11 01:24

早々にご返答くださりありがとうございます。 原因1: 文字を少なくしてもテキスト幅は変わらず、bootstrap.css内のmarginをすべて取っ払ってみましたが、画像よりもテキスト幅を縮めることが私のスキルではできませんでした、、。 とはいえ、サンプルを見るともっと文字量があるので、私が記述しているテキスト料であれば原因にはなりにくいかなと思います。 原因2: 上記と重複しますが、bootstrap.css内のmarginすべてをデベロッパーツール上で取り消ししてみましたが、余白については変わらずでした。 申し訳ありません。。 ※デベロッパーツール上での表示について、画像を追加添付させて頂きました。
manmaru

2019/09/11 01:27

追伸: 私がお伝えしそびれていたのですが、画像にmin-height:150pxの指定は私が余白をなんとか埋めようと 追記した情報です。
kyoya0819

2019/09/11 01:36

min-height属性は存在しません
manmaru

2019/09/11 03:56

min-height属性は存在しないのですね。 申し訳ありません。 引き続き解決策を探っていきます。
kyoya0819

2019/09/14 00:47

uuum_umさん > 該当のコード全部載せてください。 これは私におっしゃっていますか? それとも質問者さんにおっしゃっていますか?
退会済みユーザー

退会済みユーザー

2019/09/14 09:08

間違えました。 質問者さんに対しての質問になります。 大変失礼いたしました。
kyoya0819

2019/09/14 09:19

了解しました。
manmaru

2019/09/15 16:53

ご返信が遅くなってしまい誠に申し訳ございません。 期日が近くどうにも分からなかったので、BootstrapのCardを元にcol系の記述をとっぱらい、 flex-boxで無理やり画像の余白のないカードにしました。 もう上書きをしてしまったので、問題の記述が残っておらず、、。 ただ、このカードの余白問題は2度目でいまだ未解決なので、 来週中に再度質問用にカードを組み込んで投稿させて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問