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

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

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

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

CSS

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

Q&A

解決済

1回答

1479閲覧

flexboxの子要素を親要素のちょうど三等分にしたい

chifflot

総合スコア11

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/05/06 06:49

編集2020/05/06 07:23

「無料でお部屋を掲載」、「ホスティング方法を設定」、「はじめてのゲストが来ます!」のそれぞれのブロックを親要素ulの丁度三等分割にして真ん中に寄せたいです。
親要素ulの幅は1200pxとなっています。そして、前に挙げた三つのブロックであるliの幅はそれぞれ400pxに設定してあります。
しかしグーグルの検証で見てみると、なぜか三つのブロックは384pxになり親要素の中央から少しズレています。この原因がわからなくて困っております。分かる人がいたら、教えて頂けると非常に助かります。

イメージ説明
イメージ説明

HTML

1<!doctype html> 2 <html> 3 <head> 4 <title>模倣</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="style.css"> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 </head> 9<body> 10 <div class="point1"> 11 <div class="point1__break"></div> 12 <div class="point1__title">3ステップでホスティング</div> 13 <ul class="point1__steps"> 14 <li class="point1__steps__block"> 15 <i class="far fa-check-circle fa-3x"></i> 16 <div class="steps__title">無料でお部屋を掲載</div> 17 <div class="steps__txt">共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</div> 18 </li>   19 <li class="point1__steps__block"> 20 <i class="far fa-check-circle fa-3x"></i> 21 <div class="steps__title">ホスティング方法を設定</div> 22 <div class="steps__txt">スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</div> 23 </li>   24 <li class="point1__steps__block"> 25 <i class="far fa-check-circle fa-3x"></i> 26 <div class="steps__title">はじめてのゲストが来ます!</div> 27 <div class="steps__txt">リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</div> 28 <div class="steps__host-check"> 29 <a href="#">ホストをはじめる方法をチェック</a> 30 </div> 31 </li>   32 </ul> 33 </div> 34 35 36</body> 37</html>

SCSS

1*{ 2 margin:0; 3 padding:0; 4} 5 6 7.point1{ 8 width: 1200px; 9 margin: 0 auto; 10 &__break{ 11 width: 100px; 12 height: 2px; 13 border: 1px solid black; 14 margin: auto; 15 } 16 &__title{ 17 text-align: center; 18 font-size: 60px; 19 font-weight: bold; 20 } 21 22 &__steps{ 23 display: flex; 24 width: 1200px; 25 list-style: none; 26 &__block{ 27 width: 400px; 28 box-sizing: border-box; 29 .steps__title{ 30 font-size: 23px; 31 font-weight: bold; 32 margin:20px 0 20px 0; 33 } 34 .steps__host-check{ 35 margin-top: 20px; 36 a{ 37 color: green; 38 text-decoration: none; 39 } 40 a:hover{ 41 text-decoration: underline; 42 } 43 } 44 } 45 } 46}

CSS

1* { 2 margin: 0; 3 padding: 0; 4} 5 6.point1 { 7 width: 1200px; 8 margin: 0 auto; 9} 10.point1__break { 11 width: 100px; 12 height: 2px; 13 border: 1px solid black; 14 margin: auto; 15} 16.point1__title { 17 text-align: center; 18 font-size: 60px; 19 font-weight: bold; 20} 21.point1__steps { 22 display: flex; 23 width: 1200px; 24 list-style: none; 25} 26.point1__steps__block { 27 width: 400px; 28 box-sizing: border-box; 29} 30.point1__steps__block .steps__title { 31 font-size: 23px; 32 font-weight: bold; 33 margin: 20px 0 20px 0; 34} 35.point1__steps__block .steps__host-check { 36 margin-top: 20px; 37} 38.point1__steps__block .steps__host-check a { 39 color: green; 40 text-decoration: none; 41} 42.point1__steps__block .steps__host-check a:hover { 43 text-decoration: underline; 44}

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

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

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

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

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

guest

回答1

0

自己解決

なんとhtmlに全角スペースが入っていたのが原因でした。

投稿2020/05/06 07:59

chifflot

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問