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

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

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

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

CSS

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

Q&A

解決済

1回答

812閲覧

余分な余白を改善したい

orcagame

総合スコア6

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/02/29 09:22

編集2020/02/29 09:27

前提・実現したいこと

こんにちはプログラミング学習を始めて一か月のものです。
ページの模写をしているのですが思い道理にいかなくて困っています。

 模写しようとしているページ

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

発生している問題 florisutとFor yourselfとの間で余分な余白ができてしまっている。

該当のソースコード

<section class="work"> <div class="common-inner"> <h2 class="section-title">Work</h2> <p class="section-text">オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br> ウェディングやイベントの装花なども行なっています。<br> 一人一人にあったご提案をさせていただきます。</p> <div class="work-list"> <div class="work-list__block work-block"> <p class="work-block__image"><img src="C:\Users\Web 1280 – 1/work_gift.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Gift</h3> <p class="work-block__text">花束をお送りしたいお相手、伝えたいお気持ちに合わせた <br> プレゼント用花束のアレンジメントをさせていただきま。花言葉などの豆知識もお伝えします。</p> </div> </div> <div class="work-list__block work-block"> <p class="work-block__image"><img src="C:\Users\Web 1280 – 1/work_wedding.png" alt=""><p> <div class="work-block__wrapper"> <h3 class="work-block__title">Wedding</h3> <p class="work-block__text">ウエディングドレスに合わせたブーケや式場の雰囲気に合う装花をご提案。お打ち合わせの流れや回数、費用などにつきましてはお問い合わせください。</p> </div> </div> <div id="photo" class="work-list__block work-block"> <p class="work-block__image"><img src="C:\Users\Web 1280 – 1/work_decoretion.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Decoration</h3> <p class="work-block__text">お写真を彩るお花を一輪から販売。<br> 一定期間のご契約で定期的にご自宅へ配送させていただくことも可能です。</p> </div> </div> <div class="work-list__block work-block"> <p class="work-block__image"><img src="C:\Users\Web 1280 – 1/work_for_yourself.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">For yourself</h3> <p class="work-block__text">お部屋の雰囲気やライフスタイルをお聞きしてご自宅用の 花束をご提案し、少しでも長く咲かせるコツもお教えします 。花束に合った花瓶をご提案することも可能です。</p> </div> </div> </div> </div> </section> <section class="florist"> <div class="common-inner"> <h2 class="section-title">Florist</h2> <p class="section-text">Shiro専属のフローリストたちをご紹介。<br> 得意の分野であなたのオーダーを最大限に叶えます。</p> <div class="florist-list"> <div class="florist-list__item florist-block"> <p><img src="C:\Users\Web 1280 – 1/florist_shiyu.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Shiyu</h3> <p class="work-block__text">お花茶屋大学フラワーアレンジメント科を卒業後、さまざまな白い花を探すために世界を一周し、Shiroの創業者となる。</p> </div> </div> <div class="florist-list__item florist-block"> <p><img src="C:\Users\Web 1280 – 1/florist_mao.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Mao</h3> <p class="work-block__text">花の魅力に惹かれ、空間デザインの世界からフローリストの道を歩む。主に結婚式やイベントで使用するお花のディレクション担当。</p> </div> </div> <div class="florist-list__item florist-block"> <p><img src="C:\Users\Web 1280 – 1/florist_omichan.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Omichan</h3> <p class="work-block__text">フローリスト兼ガーデナーという特殊な経歴をもつ。豊富な知識と技術でお客様のオーダーを叶える。</p> </div> </div> </div> </div> </section> </body> </html>

css

1 2@charset "UTF-8"; 3 4*, *::before, *::after { 5 box-sizing: border-box; 6 margin: 0; 7 padding: 0; 8} 9body { 10 margin: 0; 11 font-family: sans-serif; 12 font-size: 16px; 13 color: #2b2b2b; 14} 15 16h1, h2, h3, p { 17 margin: 0; 18 padding: 0; 19} 20 21a { 22 color: #2b2b2b; 23 text-decoration: none; 24} 25 26section { 27 text-align: center; 28} 29 30 31 32.common-inner{ 33 padding: 80px 0; 34 max-width: 960px; 35 margin: 0 auto; 36} 37 38 39 40 41 42.work-list{ 43 display: flex; 44 flex-direction: column; 45 flex-wrap: wrap; 46 align-content: space-between; 47 height: 1680px; 48 max-width: 960px; 49 50} 51 52.work-block{ 53 width: 420px; 54} 55 56 57 58.work-block:not(:last-child){ 59 padding-bottom: 80px; 60} 61 62#photo { 63 padding-top:120px ; 64 65} 66 67.work-block__wrapper{ 68 padding-top:16px ; 69 text-align: left; 70 71 72} 73 74.work-block__title{ 75 font-size: 24px; 76 line-height: 1.0; 77} 78 79.work-block__text{ 80 padding-top: 5px; 81 font-size: 16px; 82 line-height: 1.75; 83} 84 85.florist{ 86 background: linear-gradient(white 50%, #ededed 50%); 87 width: 100%; 88 89 90} 91 92.florist-list{ 93 display: flex; 94 width: 100%; 95} 96 97 98 99 100 101 102 103 104

試したこと

問題一つ目で試したこと
いろいろなところのpaddinngやmarginをいじったが解決しなかった。

問題二つ目で試したこと
親要素にdisplay:flex;したが横並びにならなかった。
一応子要素にもやってみたが解決しなかった。

補足情報(FW/ツールのバージョンなど)

なし

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

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

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

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

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

guest

回答1

0

ベストアンサー

.work-list の高さを 1680px と固定で指定していますが、それに対して中身の高さが少ないので余白があきます。

この高さを小さくすれば余白は縮まります。

模写先と比較すると、.section-title のフォントサイズや下部余白が小さかったり、.section-textの下部余白が小さいので、それを大きくすれば、 1680px のままでも余白は縮まります。

投稿2020/02/29 13:48

hatena19

総合スコア34075

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

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

orcagame

2020/03/01 01:48

なるほど、高さを調整したらなおりました! ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問