teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問【初心者】要素の横並びについて

編集履歴

質問編集履歴

5

全文に修正

2019/10/04 16:11

投稿

chomu.
chomu.

スコア7

test CHANGED
File without changes
test CHANGED
@@ -35,12 +35,6 @@
35
35
 
36
36
 
37
37
 
38
-
39
-
40
-
41
- <br />
42
-
43
- <div class="ggmap"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.672294855372!2d139.738253915628!3d35.68507028019345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c65324c5317%3A0x96bfd8d9097e9688!2z44CSMTAyLTAwODMg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy66bq555S677yS5LiB55uu77yR77yQ4oiS77yT!5e0!3m2!1sja!2sjp!4v1570186113584!5m2!1sja!2sjp" width="100%" height="450px" frameborder="0" style="border:0;" allowfullscreen=""></iframe></div>
44
38
 
45
39
  ```
46
40
 

4

前文に修正

2019/10/04 16:11

投稿

chomu.
chomu.

スコア7

test CHANGED
File without changes
test CHANGED
@@ -14,43 +14,33 @@
14
14
 
15
15
  ```ここに言語名を入力
16
16
 
17
+ <p class="center"><span style="font-size:30px; font-weight:bold;">SERVICE</span></p>
18
+
19
+ <p class="center">広告運用をメインとし、様々なジャンルに挑戦します。<br />
20
+
17
- <div class="flex">
21
+ 【ITの力を使い私たちの生活をより豊かにする】<br />
22
+
23
+ をモットーに日々従業員が同じ方向を向き、切磋琢磨しています。</p>
18
24
 
19
25
 
20
26
 
21
- <div class="item">
27
+ <div class="flex"><div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/60927f3819e3733123e6472fba396936_s.jpg" alt=""><p class="center"><span class="title1">Web広告運用</span><br/>リスティング広告、ディスプレイ広告、SNS広告、ネイティブ広告、動画広告を扱い、サイト（記事）制作から運用まで全て行っています。</p></div>
22
28
 
23
- <img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/60927f3819e3733123e6472fba396936_s.jpg" alt=""><p class="center"><span class="title1">Web広告運用</span><br/>リスティング広告、ディスプレイ広告、SNS広告、ネイティブ広告、動画広告を扱い、サイト（記事）制作から運用まで全て行っています。</p>
29
+ <div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/f2a748f11f557513492b2fc602fcf30e_s.jpg" alt=""><p class="center"><span class="title2">Webマーケティング</span><br/>当社ではWebでの広告運用のみを行なっております。情報や結果を数値化することが可能です。出た結果を元に傾向の分析、改善を素早く行うことができます。</p></div>
24
30
 
25
- </div>
31
+ <div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/0959dddafae5c6f16f02555991ea1741_s.jpg" alt=""><p class="center"><span class="title3">Webコンサルティング</span><br/>当社が広告運用の事業で培った、Web広告を用いた「集客」「販売」「改善」のノウハウを活かし、様々なジャンルの業会社にコンサルティングを行います。</p></div>
32
+
33
+ <div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/ec2afdb24003aa2bed87dc741d4d694b_s.jpg" alt=""><p class="center"><span class="title1">アプリ開発</span><br/>「世の中の人に役立つアプリ」を作成します。現在人員不足により、開発には至っておりませんが今後アプリのリリースも視野に入れ、人員を増やす予定です。</p></div></div>
26
34
 
27
35
 
28
36
 
29
- <div class="item">
30
-
31
- <img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/f2a748f11f557513492b2fc602fcf30e_s.jpg" alt=""><p class="center"><span class="title2">Webマーケティング</span><br/>当社ではWebでの広告運用のみを行なっております。情報や結果を数値化することが可能です。出た結果を元に傾向の分析、改善を素早く行うことができます。</p>
32
-
33
- </div>
34
37
 
35
38
 
36
39
 
37
- <div class="item">
38
40
 
39
- <img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/0959dddafae5c6f16f02555991ea1741_s.jpg" alt=""><p class="center"><span class="title3">Webコンサルティング</span><br/>当社が広告運用の事業で培った、Web広告を用いた「集客」「販売」「改善」のノウハウを活かし、様々なジャンルの業会社にコンサルティングを行います。</p>
41
+ <br />
40
42
 
41
- </div>
42
-
43
-
44
-
45
- <div class="item">
46
-
47
- <img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/ec2afdb24003aa2bed87dc741d4d694b_s.jpg" alt=""><p class="center"><span class="title1">アプリ開発</span><br/>「世の中の人に役立つアプリ」を作成します。現在人員不足により、開発には至っておりませんが今後アプリのリリースも視野に入れ、人員を増やす予定です。</p>
48
-
49
- </div>
50
-
51
-
52
-
53
- </div>
43
+ <div class="ggmap"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.672294855372!2d139.738253915628!3d35.68507028019345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c65324c5317%3A0x96bfd8d9097e9688!2z44CSMTAyLTAwODMg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy66bq555S677yS5LiB55uu77yR77yQ4oiS77yT!5e0!3m2!1sja!2sjp!4v1570186113584!5m2!1sja!2sjp" width="100%" height="450px" frameborder="0" style="border:0;" allowfullscreen=""></iframe></div>
54
44
 
55
45
  ```
56
46
 

3

修正

2019/10/04 16:10

投稿

chomu.
chomu.

スコア7

test CHANGED
File without changes
test CHANGED
@@ -166,7 +166,9 @@
166
166
 
167
167
  font-size: 18px;
168
168
 
169
+ }
170
+
169
- }```
171
+ ```
170
172
 
171
173
 
172
174
 

2

情報の追加

2019/10/04 15:51

投稿

chomu.
chomu.

スコア7

test CHANGED
File without changes
test CHANGED
@@ -53,3 +53,121 @@
53
53
  </div>
54
54
 
55
55
  ```
56
+
57
+
58
+
59
+
60
+
61
+ CSS
62
+
63
+ ```
64
+
65
+ .center {
66
+
67
+ text-align: center;
68
+
69
+ }
70
+
71
+
72
+
73
+ .flex{
74
+
75
+ max-width: 1200px;
76
+
77
+ margin: 0 auto;
78
+
79
+ }
80
+
81
+
82
+
83
+ img{
84
+
85
+ max-width: 100%;
86
+
87
+ display: block;
88
+
89
+ margin: 0 auto;
90
+
91
+ width:300px;
92
+
93
+ height:150px;
94
+
95
+ object-fit: center;
96
+
97
+ }
98
+
99
+
100
+
101
+ @media only screen and (min-width:400px) {
102
+
103
+ .flex{
104
+
105
+ display:flex;
106
+
107
+ flex-wrap:nowrap;
108
+
109
+ justify-content:space-between;
110
+
111
+ }
112
+
113
+ .item+.item{
114
+
115
+ margin-left:1.0em;
116
+
117
+
118
+
119
+ }
120
+
121
+ }
122
+
123
+
124
+
125
+ .title1{
126
+
127
+ color: #b3274a;
128
+
129
+ font-weight: bold;
130
+
131
+ font-size: 18px;
132
+
133
+ }
134
+
135
+
136
+
137
+ .title2{
138
+
139
+ color: #356598;
140
+
141
+ font-weight: bold;
142
+
143
+ font-size: 18px;
144
+
145
+ }
146
+
147
+
148
+
149
+ .title3{
150
+
151
+ color: #0fa334;
152
+
153
+ font-weight: bold;
154
+
155
+ font-size: 18px;
156
+
157
+ }
158
+
159
+
160
+
161
+ .title4{
162
+
163
+ color: #684579;
164
+
165
+ font-weight: bold;
166
+
167
+ font-size: 18px;
168
+
169
+ }```
170
+
171
+
172
+
173
+ ![イメージ説明](cb59fbb5d354b82aa426bda14127b0c8.png)

1

コードを見やすく

2019/10/04 15:50

投稿

chomu.
chomu.

スコア7

test CHANGED
@@ -1 +1 @@
1
- 【HTML・CSS】要素の横並びについて
1
+ 【初心者】要素の横並びについて
test CHANGED
@@ -14,28 +14,42 @@
14
14
 
15
15
  ```ここに言語名を入力
16
16
 
17
- <div class="flex"><div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/60927f3819e3733123e6472fba396936_s.jpg" alt=""><p class="center"><span class="title1">Web広告運用</span><br/>リスティング広告、ディスプレイ広告、SNS広告、ネイティブ広告、動画広告を扱い、サイト（記事）制作から運用まで全て行っています。</p></div>
18
-
19
- <div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/f2a748f11f557513492b2fc602fcf30e_s.jpg" alt=""><p class="center"><span class="title2">Webマーケティング</span><br/>当社ではWebでの広告運用のみを行なっております。情報や結果を数値化することが可能です。出た結果を元に傾向の分析、改善を素早く行うことができます。</p></div>
20
-
21
- <div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/0959dddafae5c6f16f02555991ea1741_s.jpg" alt=""><p class="center"><span class="title3">Webコンサルティング</span><br/>当社が広告運用の事業で培った、Web広告を用いた「集客」「販売」「改善」のノウハウを活かし、様々なジャンルの業会社にコンサルティングを行います。</p></div>
22
-
23
- <div class="item"><img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/ec2afdb24003aa2bed87dc741d4d694b_s.jpg" alt=""><p class="center"><span class="title1">アプリ開発</span><br/>「世の中の人に役立つアプリ」を作成します。現在人員不足により、開発には至っておりませんが今後アプリのリリースも視野に入れ、人員を増やす予定です。</p></div></div>
24
-
25
- ```
17
+ <div class="flex">
26
18
 
27
19
 
28
20
 
29
- ### 試したこと
21
+ <div class="item">
22
+
23
+ <img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/60927f3819e3733123e6472fba396936_s.jpg" alt=""><p class="center"><span class="title1">Web広告運用</span><br/>リスティング広告、ディスプレイ広告、SNS広告、ネイティブ広告、動画広告を扱い、サイト（記事）制作から運用まで全て行っています。</p>
24
+
25
+ </div>
30
26
 
31
27
 
32
28
 
33
- ここに問題に対して試したことを記載してください。
29
+ <div class="item">
30
+
31
+ <img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/f2a748f11f557513492b2fc602fcf30e_s.jpg" alt=""><p class="center"><span class="title2">Webマーケティング</span><br/>当社ではWebでの広告運用のみを行なっております。情報や結果を数値化することが可能です。出た結果を元に傾向の分析、改善を素早く行うことができます。</p>
32
+
33
+ </div>
34
34
 
35
35
 
36
36
 
37
- ### 補足情報（FW/ツールのバージョンなど）
37
+ <div class="item">
38
+
39
+ <img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/0959dddafae5c6f16f02555991ea1741_s.jpg" alt=""><p class="center"><span class="title3">Webコンサルティング</span><br/>当社が広告運用の事業で培った、Web広告を用いた「集客」「販売」「改善」のノウハウを活かし、様々なジャンルの業会社にコンサルティングを行います。</p>
40
+
41
+ </div>
38
42
 
39
43
 
40
44
 
41
- ここにより詳細な情報を記載してください。
45
+ <div class="item">
46
+
47
+ <img src="http://tkd-llc.co.jp/wp-content/uploads/2019/10/ec2afdb24003aa2bed87dc741d4d694b_s.jpg" alt=""><p class="center"><span class="title1">アプリ開発</span><br/>「世の中の人に役立つアプリ」を作成します。現在人員不足により、開発には至っておりませんが今後アプリのリリースも視野に入れ、人員を増やす予定です。</p>
48
+
49
+ </div>
50
+
51
+
52
+
53
+ </div>
54
+
55
+ ```