質問編集履歴
2
ソースコードにHTML全体を追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,7 +12,182 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
### 該当のソースコード
|
|
15
|
+
```HTML
|
|
16
|
+
※HTML全体を追記します。
|
|
17
|
+
<!DOCTYPE html>
|
|
18
|
+
<html lang="ja">
|
|
19
|
+
<head>
|
|
20
|
+
<meta charset="UTF-8">
|
|
21
|
+
<link rel="stylesheet" href="css/reset.css">
|
|
22
|
+
<link rel="stylesheet" href="css/style.css">
|
|
23
|
+
|
|
24
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
25
|
+
|
|
26
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
27
|
+
<meta name="format-detection" content="telephone=no">
|
|
28
|
+
|
|
29
|
+
<link rel="icon" sizes="192×192" href="img/apple-touch-icon.png">
|
|
30
|
+
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
|
|
31
|
+
<title>CAT</title>
|
|
32
|
+
</head>
|
|
33
|
+
<body>
|
|
34
|
+
<header id="header" class="header">
|
|
35
|
+
<div class="container">
|
|
36
|
+
<nav id="gnav" class="gnav">
|
|
37
|
+
<img src="./img/CAT-1.png" alt="header-logo" class="header-logo">
|
|
38
|
+
<ul class="gnav-list">
|
|
39
|
+
<li><a href="#cat1">CAT1</a></li>
|
|
40
|
+
<li><a href="#cat2">CAT2</a></li>
|
|
41
|
+
<li><a href="#cat3">CAT3</a></li>
|
|
42
|
+
</ul>
|
|
43
|
+
</nav>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="header-visual">
|
|
46
|
+
<h1 class="brand-logo"><img src="./img/CAT.png" alt="brand-logo"></h1>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="container">
|
|
49
|
+
<div class="header-text">
|
|
50
|
+
<p class="text-title">吾輩は猫である。名前はまだ無い。</p>
|
|
51
|
+
<p>どこで生れたか頓と見當がつかぬ。<br> 何でも薄暗いじめじめした所で<br> ニヤーニヤー泣いて居た事丈は記憶して居る。<br> 吾輩はこゝで始めて人間といふものを見た。</p>
|
|
52
|
+
<p>然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。<br> 此書生といふのは時々我々を捕へて煮て食ふといふ話である。</p>
|
|
53
|
+
<p>然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。<br> 但彼の掌に載せられてスーと持ち上げられた時<br> 何だかフハフハした感じが有つた許りである。</p>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</header>
|
|
57
|
+
<main id="main" class="main">
|
|
58
|
+
<section id="cat1" class="cat1 section">
|
|
59
|
+
<div class="container">
|
|
60
|
+
<h2 class="heading">CAT1</h2>
|
|
61
|
+
<div class="cat1-item cat-item pc-col2">
|
|
62
|
+
<div class="cat1-img">
|
|
63
|
+
<img src="./img/cat1-1/cat1-1@2x.png" srcset="./img/cat1-1/cat1-1@2x.png 2x, ./img/cat1-1/cat1-1.png" alt="cat1-1">
|
|
64
|
+
</div>
|
|
65
|
+
<div class="cat1-text">
|
|
66
|
+
<p>掌の上で少し落ち付いて書生の顔を見たのが所謂人間といふものゝ見始であらう。此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顔の眞中が餘りに突起して居る。</p>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="cat1-item cat-item pc-col2">
|
|
70
|
+
<div class="cat1-img">
|
|
71
|
+
<img src="./img/cat1-2/cat1-2@2x.png" srcset="./img/cat1-2/cat1-2@2x.png 2x, ./img/cat1-2/cat1-2.png" alt="cat1-2">
|
|
72
|
+
</div>
|
|
73
|
+
<div class="cat1-text">
|
|
74
|
+
<p>そうして其穴の中から時々ぷうぷうと烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飲む烟草といふものである事は漸く此頃知つた。此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。</p>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="cat1-item cat-item pc-col2">
|
|
78
|
+
<div class="cat1-img">
|
|
79
|
+
<img src="./img/cat1-3/cat1-3@2x.png" srcset="./img/cat1-3/cat1-3@2x.png 2x, ./img/cat1-3/cat1-3.png" alt="cat1-3">
|
|
80
|
+
</div>
|
|
81
|
+
<div class="cat1-text">
|
|
82
|
+
<p>到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。</p>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="cat1-item cat-item pc-col2">
|
|
86
|
+
<div class="cat1-img">
|
|
87
|
+
<img src="./img/cat1-3/cat1-3@2x.png" srcset="./img/cat1-3/cat1-3@2x.png 2x, ./img/cat1-3/cat1-3.png" alt="cat1-3">
|
|
88
|
+
</div>
|
|
89
|
+
<div class="cat1-text">
|
|
90
|
+
<p>到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。</p>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</section>
|
|
95
|
+
<section id="cat2" class="cat2 section">
|
|
96
|
+
<div class="container">
|
|
97
|
+
<h2 class="heading">CAT2</h2>
|
|
98
|
+
<div class="cat2-item cat-item pc-col2">
|
|
99
|
+
<div class="cat2-img">
|
|
100
|
+
<img src="./img/cat2-1/cat2-1@2x.png" srcset="./img/cat2-1/cat2-1@2x.png 2x, ./img/cat2-1/cat2-1.png" alt="cat2-1">
|
|
101
|
+
</div>
|
|
102
|
+
<div class="cat2-text">
|
|
103
|
+
<p>果てな何でも容子が可笑いと、のそのそ這ひ出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。</p>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="cat2-item cat-item pc-col2">
|
|
107
|
+
<div class="cat2-img">
|
|
108
|
+
<img src="./img/cat2-2/cat2-2@2x.png" srcset="./img/cat2-2/cat2-2@2x.png 2x, ./img/cat2-2/cat2-2.png" alt="cat2-2">
|
|
109
|
+
</div>
|
|
110
|
+
<div class="cat2-text">
|
|
111
|
+
<p>漸くの思ひで笹原を這ひ出すと向ふに大きな池がある。吾輩は池の前に坐つてどうしたらよからうと考へて見た。別に是といふ分別も出ない。</p>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</section>
|
|
116
|
+
<aside class="aside">
|
|
117
|
+
<div class="message-text">ニヤー、ニヤーと試みにやつて見たが誰も來ない。其内池の上をさらさらと風が渡つて日が暮れかゝる。腹が非常に減つて來た。 泣き度くても聲が出ない。仕方がない、何でもよいから食物のある所迄あるかうと決心をしてそろりそろりと池を左りに廻り始めた。 どうも非常に苦しい。そこを我慢して無理やりに這つて行くと漸くの事で何となく人間臭い所へ出た。 此所へ這入つたら、どうにかなると思つて竹垣の崩れた穴から、とある邸内にもぐり込んだ。</div>
|
|
118
|
+
</aside>
|
|
119
|
+
<section id="cat3" class="section">
|
|
120
|
+
<div class="container">
|
|
121
|
+
<h2 class="heading">CAT3</h2>
|
|
122
|
+
<div class="cat3-info">
|
|
123
|
+
<dl>
|
|
124
|
+
<dt>2018.02.09</dt>
|
|
125
|
+
<dd><span class="new">新着</span>縁は不思議なもので、もし此竹垣が破れて居なかつたなら、</dd>
|
|
126
|
+
</dl>
|
|
127
|
+
<dl>
|
|
128
|
+
<dt>2018.02.09</dt>
|
|
129
|
+
<dd><span class="new">新着</span>吾輩は遂に路傍に餓死したかも知れんのである。一樹の蔭とはよく云つたものだ。</dd>
|
|
130
|
+
</dl>
|
|
131
|
+
<dl>
|
|
132
|
+
<dt>2018.02.09</dt>
|
|
133
|
+
<dd><span class="new">新着</span>此垣根の穴は今日に至る迄吾輩が隣家の三毛を訪問する時の通路になつて居る。</dd>
|
|
134
|
+
</dl>
|
|
135
|
+
<dl>
|
|
136
|
+
<dt>2018.02.09</dt>
|
|
137
|
+
<dd><span class="new">新着</span>偖邸へは忍び込んだものゝ</dd>
|
|
138
|
+
</dl>
|
|
139
|
+
<dl>
|
|
140
|
+
<dt>2018.02.09</dt>
|
|
141
|
+
<dd><span class="new">新着</span>是から先どうして善いか分らない。其内に暗くなる、腹は減る、寒さは寒し、雨が降つて來るといふ 始末でもう一刻も猶豫が出來なくなつた。</dd>
|
|
142
|
+
</dl>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</section>
|
|
146
|
+
<aside class="aside pc-col3">
|
|
147
|
+
<div class="list-item">
|
|
148
|
+
<div class="list-title">主人は餘り口を聞かぬ人と見えた。</div>
|
|
149
|
+
<ul>
|
|
150
|
+
<li>下女は口惜しさうに</li>
|
|
151
|
+
<li>吾輩を臺所へ抛り出した。</li>
|
|
152
|
+
<li>かくして吾輩は遂に此家を</li>
|
|
153
|
+
<li>自分の住家と</li>
|
|
154
|
+
<li>自分の住家と</li>
|
|
155
|
+
</ul>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="list-item">
|
|
158
|
+
<div class="list-title">主人は餘り口を聞かぬ人と見えた。</div>
|
|
159
|
+
<ul>
|
|
160
|
+
<li>下女は口惜しさうに</li>
|
|
161
|
+
<li>吾輩を臺所へ抛り出した。</li>
|
|
162
|
+
<li>かくして吾輩は遂に此家を</li>
|
|
163
|
+
<li>自分の住家と</li>
|
|
164
|
+
<li>自分の住家と</li>
|
|
165
|
+
</ul>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="list-item">
|
|
168
|
+
<div class="list-title">主人は餘り口を聞かぬ人と見えた。</div>
|
|
169
|
+
<ul>
|
|
170
|
+
<li>下女は口惜しさうに</li>
|
|
171
|
+
<li>吾輩を臺所へ抛り出した。</li>
|
|
172
|
+
<li>かくして吾輩は遂に此家を</li>
|
|
173
|
+
<li>自分の住家と</li>
|
|
174
|
+
<li>自分の住家と</li>
|
|
175
|
+
</ul>
|
|
176
|
+
</div>
|
|
177
|
+
</aside>
|
|
178
|
+
</main>
|
|
179
|
+
<footer id="footer" class="footer">
|
|
180
|
+
<div class="container">
|
|
181
|
+
<img src="./img/CAT.svg" alt="cat" class="footer-img">
|
|
182
|
+
<p>copyright 2018 Iam a cat</p>
|
|
183
|
+
</div>
|
|
184
|
+
</footer>
|
|
15
185
|
|
|
186
|
+
</body>
|
|
187
|
+
</html>
|
|
188
|
+
|
|
189
|
+
```
|
|
190
|
+
|
|
16
191
|
```HTML
|
|
17
192
|
<div class="pc-col2">
|
|
18
193
|
<div class="item-img">
|
1
質問文の３行目最後、「くくりが４行できます」が「３行」になっていたので修正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
お世話になります。
|
|
4
4
|
CSSでflexboxを用いて、画像とテキストをまとめたflexアイテム4つの内、２番目・４番目を逆並びにして、左右交互に並べようとしています。
|
|
5
|
-
親要素は"pc-col2"を使用しており、flexboxでdisplay:flex;とwrapを指定すると左に画像、右にテキストのくくりが
|
|
5
|
+
親要素は"pc-col2"を使用しており、flexboxでdisplay:flex;とwrapを指定すると左に画像、右にテキストのくくりが４行できます。
|
|
6
6
|
|
|
7
7
|
今悩んでいるのは、そこから２番目と４番目のpc-col2の中の画像とテキストを交互にしたいのですが、
|
|
8
8
|
ソースコードの指定をすると何故か１，３番目の画像とテキストが逆になってしまいます。
|