質問編集履歴

2

画像を追加しました。

2019/08/15 04:33

投稿

yzfr1
yzfr1

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,9 @@
1
+ ![![![イメージ説明](9db77811034e891ca535590f9d34750a.png)](a148edffeef215637eefc4518d156b63.png)](a73b55f9b622f9420c1df4c3abfd41fb.png)
2
+
3
+ こんな感じに表示されます。
4
+
5
+
6
+
1
7
  初歩的な質問ですいません。
2
8
 
3
9
  header部分を作ってh1画像と横にliタグで並べて下に画像を置きたいのですが

1

画像では見にくかったので、コードを書きました。

2019/08/15 04:33

投稿

yzfr1
yzfr1

スコア13

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,10 @@
4
4
 
5
5
  うまく配置できません。どこが悪いのか教えていただけませんか。
6
6
 
7
+ ①+② 横並びにして
8
+
9
+ その下に③を配置したい。
10
+
7
11
 
8
12
 
9
13
  ```- ```ここに言語を入力
@@ -14,7 +18,41 @@
14
18
 
15
19
  ```
16
20
 
21
+
22
+
23
+
24
+
25
+ ![イメージ説明](1ffdf7ebef657a6cb2eddc9bf83db774.png)
26
+
27
+
28
+
29
+ <!DOCTYPE html>
30
+
31
+ <html>
32
+
33
+ <head>
34
+
35
+ <title>shimaenaga</title>
36
+
37
+ <meta charset="utf-8">
38
+
39
+ <meta name="description" content="shimaenaga">
40
+
41
+ <meta name="keywords" content="レストラン,フレンチ,原宿">
42
+
43
+
44
+
45
+ <link rel="stylesheet" href="css/sanitize.css">
46
+
47
+ <link rel='stylesheet' href="css/style.css">
48
+
49
+ </head>
50
+
51
+
52
+
53
+ <body>
54
+
17
- <header class="page-header">
55
+ <header class="page-header">
18
56
 
19
57
  <h1><a href="index.html"><img class="left_content" src="img/logo.png" alt="simaenaga"> </a></h1>
20
58
 
@@ -34,9 +72,97 @@
34
72
 
35
73
  </header>
36
74
 
37
-
75
+ <main>
76
+
77
+
78
+
38
-
79
+ <h1>Our Ability</h1>
80
+
81
+
82
+
83
+ <img class="contents" src="img/img1.png" alt="simaenaga">
84
+
85
+ <p>Heal </p>
86
+
87
+ <p>We are excellent.</p>
88
+
89
+
90
+
91
+ <img class="contents" src="img/img2.png" alt="simaenaga">
92
+
93
+ <p>Fly </p>
94
+
39
- ![イメージ説明](1ffdf7ebef657a6cb2eddc9bf83db774.png)
95
+ <p>We are talented..</p>
96
+
97
+
98
+
99
+ <img class="contents" src="img/img3.png" alt="simaenaga">
100
+
101
+ <p>Sleep </p>
102
+
103
+ <p>We are clever.</p>
104
+
105
+ </main>
106
+
107
+
108
+
109
+ <fotter>
110
+
111
+ <h1>We are necessary for human life. </h1>
112
+
113
+ <p>Because we are very cute. Please leave it to us if you need help.</p>
114
+
115
+
116
+
117
+ <p>MORE</p>
118
+
119
+
120
+
121
+ <img class="contents" src="img/img-right.jpg" alt="simaenaga">
122
+
123
+ <p>copyright 2019 Shima-Enaga</p>
124
+
125
+
126
+
127
+ </fotter>
128
+
129
+
130
+
131
+ </body></html>
132
+
133
+
134
+
135
+
136
+
137
+
138
+
139
+
140
+
141
+ @charset"UTF=8"
142
+
143
+
144
+
145
+ html {
146
+
147
+ font-size: 100%;
148
+
149
+ }
150
+
151
+
152
+
153
+ img {
154
+
155
+ max-width: 100%;
156
+
157
+ }
158
+
159
+
160
+
161
+ .wrapper {
162
+
163
+ max-width: 980px;
164
+
165
+ }
40
166
 
41
167
 
42
168
 
@@ -83,3 +209,9 @@
83
209
  opacity: 1;
84
210
 
85
211
  }
212
+
213
+
214
+
215
+
216
+
217
+ ![イメージ説明](69d813b7a8b06c8aad9fe72387f9083b.png)