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

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

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

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

CSS

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

Q&A

解決済

1回答

773閲覧

html css でのspanについて

tafuji12

総合スコア1

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/05/28 06:50

編集2020/05/28 09:29

前提・実現したいこと

文字を横一列に並べたい Brackets 使用です

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

参考にしている動画ではこの表記で横一列の表?になっている

該当のソースコード

HTML

1<html lang"en"> 2 <head> 3 <link ref="stylesheet" type="text/css" href="vendors/css/normalize.css"> 4 <link ref="stylesheet" type="text/css" href="vendors/css/grid.css"> 5 <link rel="stylesheet" type=" text/css" href="resources/css/style.css"> 6 <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet"> 7 <title>Omnifood</title> 8 9 </head> 10 <body> 11 <header> 12 <nav> 13 <div class="row"> 14 <img src="resources/img/logo-white.png" alt="Omnifood logo" class="logo"> 15 <ul class="main-nav"> 16 <li><a href="#">Food delivery</a></li> 17 <li><a href="#">How it works</a></li> 18 <li><a href="#">Our cities</a></li> 19 <li><a href="#">Sign up</a></li> 20 </ul> 21 </div> 22 23 </nav> 24 <div class="hero-text-box"> 25 <h1>Goodbye junk food.<br> Hello super healthy meals.</h1> 26 <a class="btn btn-full" href="#">I'm hungry</a> 27 <a class="btn btn-ghost"href="#">Show me more</a> 28 </div> 29 30 31 32 </header> 33 34 <section class="section-features"> 35 <div class="row"> 36 <h2>Get food fast &mdash; not fast food.</h2> 37 <p class="long-copy"> 38 Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise! 39 </p> 40 </div> 41 42 <div class="row"> 43 <div class="col span-1-of-4"> 44 <h3>Up to 365 days/year</h3> 45 <p> 46 Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style. 47 </p> 48 </div> 49 <div class="col span-1-of-4"> 50 <h3>Ready in 20 minutes</h3> 51 <p> 52 You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy. 53 </p> 54 </div> 55 <div class="col span-1-of-4"> 56 <h3>100% organic</h3> 57 <p> 58 All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better! 59 </p> 60 </div> 61 <div class="col span-1-of-4"> 62 <h3>Order anything</h3> 63 <p> 64 We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p> 65 </div> 66 </div> 67 68 69 </section> 70 71 72 </body> 73 74 75 76</html> 77 78 <

CSS

1 2*{ 3 margin: 0; 4 padding: 0; 5 box-sizing: border-box; 6} 7 8html{ 9 background-color: #fff; 10 color: #555; 11 font-family :"Lato",'Arial',sans-serif; 12 font-weight: 300; 13 font-size: 20px; 14 text-rendering: optimizeLegibility; 15} 16 17 18/* ------------------------------------*/ 19/* REUSABLE COMPONENTS*/ 20/* ------------------------------------*/ 21 22 23 24 25.row{ 26 max-width: 1140px; 27 margin: 0 auto 28 29} 30 31/* --------HEADINGS--------*/ 32 33 34h1{ 35 margin-top:0; 36 margin-bottom: 20px; 37 color: #fff; 38 font-size: 240%; 39 font-weight: 300; 40 text-transform: uppercase; 41 letter-spacing: 1px; 42 word-spacing: 4px 43 44} 45 46 47/* --------BUTTONS--------*/ 48 49.btn:link, 50.btn:visited{ 51 padding: 10px 30px; 52 display: inline-block; 53 font-weight: 300; 54 text-decoration: :none; 55 border-radius:200px; 56 transition:background-color 0.2s, border 0.2s, color 0.2s; 57} 58 59.btn-full:link, 60.btn-full:visited{ 61 background-color: #e67e22; 62 border: 1px solid #e67e22; 63 color:#fff; 64 margin-right: 15px; 65 66} 67.btn-ghost:link, 68.btn-ghost:visited{ 69 border: 1px solid #e67e22; 70 color:#e67e22; 71 72} 73.btn:hover, 74.btn:active{ 75 background-color: #cf6d17; 76} 77 78.btn-full:hover, 79.btn-full:active{ 80 border: 1px solid #cf6d17; 81} 82.btn-ghost:hover, 83.btn-ghost:active{ 84 border: 1px solid #cf6d17; 85 color:#fff;} 86 87 88 89/* ------------------------------------*/ 90/* HEADE*/ 91/* ------------------------------------*/ 92 93 94 95header{ 96 background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url(img/hero.jpg); 97 background-size: cover; 98 background-position: center; 99 height: 100vh 100} 101 102.hero-text-box{ 103 position:absolute; 104 width: 1140px; 105 top: 50%; 106 left: 50%; 107 transform: translate(-50%,-50%); 108} 109 110.logo{ 111 height: 100px; 112 width: auto; 113 float: left; 114 margin-top: 20px; 115 116} 117 118.main-nav{ 119 float: right; 120 list-style: none; 121} 122 123.main-nav li{ 124 display: inline-block; 125 margin-left: 40px; 126 margin-top: 55px; 127} 128 129.main-nav li a:link, 130.main-nav li a:visited{ 131 padding:8px 0; 132 color: #fff; 133 text-decoration:none; 134 text-transform: uppercase; 135 font-size; 90%; 136 border-bottom: 2px solid transparent; 137 transition: 0.2s; 138} 139.main-nav li a:hover, 140.main-nav li a:active { 141 border-bottom: 2px solid #e67e22; 142 143}

grid css 全て入りませんでした。

.span-4-of-4 { width: 100%; } .span-3-of-4 { width: 74.6%; } .span-2-of-4 { width: 49.2%; } .span-1-of-4 { width: 23.8%; }

CSS追加とHTML書き換えたところ形は同じになりました。

CSS

1 2.law { 3 display: flex; 4} 5 6.law{ 7 max-width: 1140px; 8 margin: 0 auto}

HTML

1<section class="section-features"> 2 <div class="row"> 3 <h2>Get food fast &mdash; not fast food.</h2> 4 <p class="long-copy"> 5 Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise! 6 </p> 7 </div> 8 9 <div class="law"> 10 <div class="col span-1-of-4"> 11 <h3>Up to 365 days/year</h3> 12 <p> 13 Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style. 14 </p> 15 </div> 16 <div class="col span-1-of-4"> 17 <h3>Ready in 20 minutes</h3> 18 <p> 19 You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy. 20 </p> 21 </div> 22 <div class="col span-1-of-4"> 23 <h3>100% organic</h3> 24 <p> 25 All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better! 26 </p> 27 </div> 28 <div class="col span-1-of-4"> 29 <h3>Order anything</h3> 30 <p> 31 We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p> 32 </div> 33 </div> 34 35 36 </section>

試したこと

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

https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/learn/lecture/2619774?start=360#overview

動画URL

イメージ説明 動画

イメージ説明 私(Get... の部分が2行になってしまいます)

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

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

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

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

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

maisumakun

2020/05/28 06:52

何かしらのCSSを適用していませんか?
tafuji12

2020/05/28 07:00

ご回答ありがとうございます .row{ max-width: 1140px; margin: 0 auto これのみでした。参考動画もこれを適応しておりました。
tafuji12

2020/05/28 07:03

*{ margin: 0; padding: 0; box-sizing: border-box; } html{ background-color: #fff; color: #555; font-family :"Lato",'Arial',sans-serif; font-weight: 300; font-size: 20px; text-rendering: optimizeLegibility; } 漏れがございました。 よろしくお願いします。
kei344

2020/05/28 07:48

(質問文は編集できます)質問文のCSS/HTMLはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
tafuji12

2020/05/28 07:59

指摘ありがとうございます!編集いたしました。
kei344

2020/05/28 08:02

提示されたHTML/CSSだけでは状況が再現できません。もしBootstrapを使用されているなら、バージョン情報を追記した上で質問タグ「Bootstrap」を追加することをお勧めします。使用されていないなら、残りのCSSを質問文に追加願います。
tafuji12

2020/05/28 08:05

ありがとうございます。 追加編集いたします。
kei344

2020/05/28 08:14

https://jsfiddle.net/8j32sbe4/ ← 再現できませんでした。normalize.css は多分これ、というものがわかるのですが、grid.css はわかりません。取得元URLを提示してください。
tafuji12

2020/05/28 08:15

失礼しました。 追加いたします。
tafuji12

2020/05/28 09:07

Grid css ですがすべて張ろうとしたところ字数オーバーでした。 また講座についても有料でしたので張れなく、申し訳ありません 一応使用した場所のgrid css 記入いたしました
tafuji12

2020/05/28 09:55

どうにか再現することができました! 至らぬところましたがご教示いただきありがとうございました!
guest

回答1

0

ベストアンサー

こちらでいかがでしょうか?

CSS

1.row { 2 display: flex; 3} 4.col { 5 flex: 1 1 0%; 6}

「span-1-of-4」というクラス名から推測すると、以下のような実装なのかもしれません。

CSS

1.row { 2 display: flex; 3} 4.span-1-of-4 { 5 flex-grow: 0; 6 flex-shrink: 0; 7 flex-basis: calc(100% / 4); 8}

ただこちらだと、要素が3つになったり、5つになったりしたときに対応できないので多くのシチュエーションで不便ではないかと思います。


私(Get... の部分が2行になってしまいます)

ソースコードのご教示ありがとうございます!
「Get food fast — not fast food.」とその右隣の「Hello, we’re Omnifood...」については、
動画のキャプチャ画像を見るに、横並びになっていません。

以下のように「class="row"」を削除すると動画のキャプチャ画像と同じような配置になると思います。

HTML

1<div><!-- 「class="row"」を削除。.rowはグリッドなど、横並びになる子要素を囲う親要素に指定されることが多いクラス名です。 --> 2 <h2>Get food fast &mdash; not fast food.</h2> 3 <p class="long-copy"> 4 Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise! 5 </p> 6</div>

投稿2020/05/28 07:12

編集2020/05/28 09:37
new1ro

総合スコア4528

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

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

tafuji12

2020/05/28 07:24

かなり近い形までいくことはできたのですが、ほかの場所に影響がでてしまいました・・・ 画像が張れればいいのですが、もう一度質問しないと無理画像は張れないですよね?
dit.

2020/05/28 07:31

質問は編集することができます。 おそらく質問文の下あたりに編集するボタンがあると思いますので確認してみてください。 https://teratail.com/questions/44783
new1ro

2020/05/28 07:48

編集して画像を貼る際に、以下もお願いします。 ・HTMLを「```」で囲んで貼る ・CSSを「```」で囲んで貼る
tafuji12

2020/05/28 07:59

指摘ありがとうございます 編集いたしました
new1ro

2020/05/28 08:17

いただいたソースコードをCodePenに適用してみました。 https://codepen.io/new1ro/pen/oNjrjax ・「Get..」の部分がないので貼り付けてほしいです。そのため「Get... の部分が2行になってしまいます」  について、なぜそうなっているのかを調べることができません ・「かなり近い形」に達したあとのソースコードについて、  「.row」だけでなく多めに貼り付けてほしいです。 ------- 現状、全体像が見えません。「ソースコードを貼り付けてほしい」のですが、 tafuji12さんが思っている行の前後50行ずつ多めに貼り付けると、おそらく回答者側が欲しているボリュームになると思います。
tafuji12

2020/05/28 08:54

回答ありがとうございます すべて張ってみます
tafuji12

2020/05/28 09:14

htmlとcssについては現状すべて張り付けている状態になっております。 https://necolas.github.io/normalize.css/8.0.1/normalize.css 現在張っているコードであると近い形に再現できました。 近い形のコードにつきましてはnew1ro様に張っていただいたコードを張った形になります normalize css につきましてはこちらになります。
new1ro

2020/05/28 09:38

回答に、追記しました! ご確認ください。
tafuji12

2020/05/28 09:53

ありがとうございます!再現できました! いろいろ至らぬところ教えていただきありがとうございました! .rowが入ることにより2列表記になってしまったってことでいいのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問