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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

3191閲覧

画像の高さの調整ができない

ryoji-1811

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/09/17 14:02

更新ができなかったので再投稿します。
画像の下に変な高さがついてしましました。解決方法のご教授をお願いします。

画像

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5<meta charset="utf-8"> 6<link rel="stylesheet" href="css/style.css"> 7<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> 8</head> 9 10<body> 11 12<div class="wrapper"> 13<div class="container"> 14<header> 15<h1 class="header-title"><span></span>My blog<span></span></h1> 16<p class="header-content">If today were the last day of my life, would I want to do what I am about to do today?</p> 17</header> 18 19<div class="main"> 20<div class="blog"> 21 22<div class="blog-content"> 23<div class="img"><img src="img/blog1.jpg" class="img" height=auto></div> 24<div class="blog-title"> 25<h2 class="title">ブログタイトル</h2> 26<p class="date">2017/04/01</p> 27<p class="text">いつものことだが電車は満員だった。そしていつものことだが若者と娘が腰をおろしとしよりが立っていた。うつむいていた娘が立ってとしよりに席をゆずった。そそくさととしよりが坐った...</p> 28</div> 29 30</div> 31 32</div> 33<div class="sub"></div> 34 35</div> 36 37</div> 38 39</div> 40 41</body> 42 43</html> 44

css

1@charset "UTF-8"; 2 3body{ 4 background-image: url(img/bg.png); 5} 6 7.wrapper{ 8 margin:40px 0; 9 border:1px solid black; 10 background-color: white; 11 width: 1100px; 12 margin:auto ; 13 text-align: center; 14} 15 16.container{ 17 padding:70px 50px 80px 50px; 18 width:998px; 19 20} 21 22header{ 23 margin-bottom: 20px; 24} 25 26.header-title{ 27 color:black; 28 font-size: 50px; 29 font-family: cursive; 30 text-align: center; 31 margin-bottom: 20px; 32} 33 34span{ 35 color:yellowgreen; 36} 37 38.header-content{ 39 font-family: cursive; 40 padding:18px 0; 41 border-top:1px solid black; 42 border-bottom: 1px solid black; 43 text-align: center; 44} 45 46.main{ 47 margin-top: 60px; 48} 49 50.blog{ 51 margin-right: 48px; 52} 53 54.blog-content{ 55 border-bottom: 1px solid black; 56 width:700px; 57 display: flex; 58} 59 60 61 62 63.img{ 64 width: 280px; 65 float:left; 66 padding-bottom: 10px; 67 margin-right: 20px; 68 69} 70 71.blog-title{ 72 width:400px; 73 float:right; 74 75} 76 77.date{ 78 margin-bottom: 20px; 79 margin-top: 2px; 80} 81 82.sub{ 83 width:250px; 84} 85 86.text{ 87 margin-top: 20px; 88} 89 90.title{ 91 92} 93

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

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

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

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

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

guest

回答2

0

ベストアンサー

画像の下の「変な高さ」というのをどうしたいかによります。

右側に文章がありますね。
その文章の上に合わせたいのか、下に合わせたいのか。

まず、画像と文章を囲む要素には、display: flex;が設定されています。

css

1.blog-content{ 2 border-bottom: 1px solid black; 3 width:700px; 4 display: flex; 5}

画像下に余白があるように見えるのはこれのせいです。

flexにはいくつかプロパティがあります。
その中で、質問の事象を引き起こしているのはalign-itemsです。
なにも設定しなければ、align-itemsの初期値はstretchになっています。
flex要素の高さに合わせて、子要素全員の高さが揃うわけです。
高さなんて指定してないじゃん、と思うかもしれませんが、文章を入れたdiv要素が文章によって押し広げられたことで高くなっています。その高さに合わせて、画像を囲むdiv要素の高さも高くなったわけです。
で、画像を囲むdiv要素が高くなっても、その中にあるimgは親要素の上部に配置されますので、下に余白があるように見えるわけですね。

  • 画像を文章の下に合わせたい場合、align-items: flex-end;とします。
  • 画像を文章の真ん中に合わせたい場合、align-items: center;とします。

で、追加でおかしなところを指摘させてもらいますが、画像を囲んだdivにはこんなCSSが書いてあります。

css

1.img{ 2 width: 280px; 3 float:left; 4 padding-bottom: 10px; 5 margin-right: 20px; 6}

float: left;は完全に無駄です。
なぜなら親要素がdisplay: flex;だから。
なので消しましょう。
.blog-titleの方についているfloat: right;も不要なので消しましょう。

投稿2018/09/17 21:43

spookybird

総合スコア1803

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

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

0

画像自体の下部に白い部分があるわけではないんですね?
ないんだとしたらmarginやpaddingを調整することで治ると思います

投稿2018/09/17 16:09

Yaiba184

総合スコア122

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問