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

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

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

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

CSS

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

Q&A

解決済

2回答

936閲覧

余白が無駄に残っている現状があります。原因を追究し、下記の画像にしたいです。

free_teku

総合スコア103

HTML5

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

CSS

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

0グッド

0クリップ

投稿2021/08/18 04:21

編集2021/08/18 09:54

この原因を追究するために
Googleツールを利用し、確認しましたがなぜ初めのliだけ余白が残るのか
理解できず、質問しています。
大変恐れ入りますが、教えていただけると幸いです。

現状

前提・実現したいこと

余白が無駄に残っている現状があります。原因を追究し、下記の画像にしたいです。
完成

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

余白が無駄に残っている現状があります。画像のオレンジの外側です。

該当のソースコード

HTML

1<section class="features"> 2 <div class="inner blog-bg"> 3 <p class="jp-ttl">ユアコーディング3つの特徴</p><!-- /.jp-ttl --> 4 <p class="en-ttl">FEATURES</p><!-- /.en-ttl --> 5 6 <!--1--> 7 <h4 class="features-ttl">高速コーディング</h4><!--features-ttl / --> 8 <ul class="features-list"> 9 <li class="features-item features-flex"> 10 <figure><img class="feat-img" src="./image/cto.png" alt=""></figure> 11 <div class="features-txt"> 12 <p class="feat-sub">コーディングに特化したフリーランスのため、 スピード感を持った開発が可能。</p> 13 <p class="features-desc">開発は常にスピードとの勝負です。<br> ユアコーディングはコーディングに特化しているため、 <br> 素早く納品することで、クライアントがデザインに注力 <br> する助けとなります。</p><!-- /.feat-dec --> 14 </div><!-- /.feat-txt --> 15 </li><!-- /.features-item --> 16 </ul><!-- /.features-list --> 17 18 <!--2--> 19 <h4 class="features-ttl">高品質</h4><!--features-ttl / --> 20 <ul class="features-list"> 21 <li class="features-item features-flex"> 22 <figure><img class="feat-img" src="./image/building_website.png" alt=""></figure> 23 <div class="features-txt"> 24 <p class="feat-sub">正しいマークアップで、 内部SEOに強いコーディングを デフォルトで行います。</p> 25 <p class="feat-desc">ユアコーディングでは、「予測しやすい」「再利用しやすい」<br> 「保守しやすい」「拡張しやすい」と言った設計をもとに <br> きちんとコーディングを行うため、納品後も安心です。</p><!-- /.feat-dec --> 26 </div><!-- /.feat-txt --> 27 </li><!-- /.features-item --> 28 </ul><!-- /.features-list --> 29 30 <!--3--> 31 <h4 class="features-ttl">迅速なレスポンス</h4><!--features-ttl / --> 32 <ul class="features-list"> 33 <li class="features-item features-flex"> 34 <figure><img class="feat-img" src="./image/new_message.png" alt=""></figure> 35 <div class="features-txt"> 36 <p class="feat-sub">原則いただいたメッセージは、 業務時間内であれば6時間以内に お返しいたします。</p> 37 <p class="feat-desc">連絡を返さないフリーランスが多い中、 <br> ユアコーディングでは定期的な進捗報告など、 <br> 社会人としての基本を踏まえて仕事を行なって <br> おります。</p><!-- /.feat-dec --> 38 </div><!-- /.feat-txt --> 39 40 </li><!-- /.features-item --> 41 </ul><!-- /.features-list -->

feat.scss

1features.scss 2 3.features{ 4 .features-ttl{ 5 font-size: 2.8rem; 6 line-height: 1.4; 7 color: $txt-color; 8 font-weight: bold; 9 text-align: center; 10 11 } 12 13 .features-list{ 14 margin: 0 auto; 15 16 .features-item{ 17 display: flex; 18 justify-content: space-between; 19 align-items: center; 20 margin-top: 50px; 21 22 .feat-img{ 23 display: block; 24 width: 380px; 25 margin-left: 152px; 26 } 27 28 .features-item:nth-child(2){ 29 display: flex; 30 flex-direction: row-reverse; 31 .feat-img{ 32 display: block; 33 width: 380px; 34 margin-right: 135px; 35 36 } 37 } 38 } 39 40 41 .features-txt{ 42 width: 500px; 43 height: 350px; 44 45 .feat-sub{ 46 display: block; 47 font-size: 2.4rem; 48 line-height: 2; 49 font-weight: bold; 50 margin-bottom: 54px; 51 52 } 53 .feat-desc{ 54 55 } 56 } 57 58 } 59}

試したこと

googleツールで原因を探すも、コードが表記されず、余白の原因がつかめない。
marginの原因かと考え、features-txt、などをチェック
<1>→<2>にコピペして変更→classm名の間違いかを確認

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

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

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

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

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

hatena19

2021/08/18 05:47

提示のHTMLには featuresクラスがないので現象を検証できません。 検証可能なHTMLコードを提示してください。 あと、 </div><!-- /.feat-flex --> に対応する開始タグがありません。
free_teku

2021/08/18 06:09

修正しました。ご確認いただけると幸いです。 何卒よろしくお願いいたします。
hatena19

2021/08/18 06:24

まだ、開始タグと閉じタグの対応がおかしいですよ。 対応をインデントで表示できるコード用エディターを使うようにするのが先決かと。
guest

回答2

0

ベストアンサー

<li>の左に空白が残るのは、<ul>のデフォルトのパディングだと思います。箇条書きのマーカー表示のためのスペースです。
.features-listpadding: 0;を設定してみてください。

投稿2021/08/18 08:26

itagagaki

総合スコア8402

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

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

0

.feat-imgmargin-left: 152px;を設定してますよね。
そのとおりにレイアウトされているのでは?

投稿2021/08/18 04:32

itagagaki

総合スコア8402

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

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

free_teku

2021/08/18 04:38

itagakiさん、ご回答ありがとうございます。 設定しているのですが、152pxはオレンジ部分で、左側に理解ができない白い余白があるんです。 →これを改善したいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問