html css でのspanについて

前提・実現したいこと

文字を横一列に並べたい　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行になってしまいます）

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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が入ることにより２列表記になってしまったってことでいいのでしょうか？

行動規範の内容に同意します