teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問文章の下線の長さについて

編集履歴

質問編集履歴

5

ソースコード

2017/11/21 05:35

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,7 @@
4
4
 
5
5
  ![イメージ説明](bec80d0fd926a4f815fd53c0fb23966b.png)
6
6
 
7
- PHP HTML5
8
-
9
- ```ここに言語を入力
7
+ ```PHP
10
8
 
11
9
  <section id="news" class="news">
12
10
 
@@ -34,9 +32,7 @@
34
32
 
35
33
  ```
36
34
 
37
- CSS3 SCSS
35
+ ```SCSS
38
-
39
- ```ここに言語を入力
40
36
 
41
37
  /*--------------------------------------------------------------
42
38
 
@@ -160,9 +156,7 @@
160
156
 
161
157
  完成しました、ありがとうございます。
162
158
 
163
- PHP HTML5
164
-
165
- ```ここに言語を入力
159
+ ```PHP
166
160
 
167
161
  <ul class="scroll-list">
168
162
 
@@ -196,9 +190,7 @@
196
190
 
197
191
  ```
198
192
 
199
- CSS3 SCSS
193
+ ```SCSS
200
-
201
- ```ここに言語を入力
202
194
 
203
195
  /*--------------------------------------------------------------
204
196
 

4

ソースコード

2017/11/21 05:35

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -319,3 +319,7 @@
319
319
  }
320
320
 
321
321
  ```
322
+
323
+ 画像になります。
324
+
325
+ ![イメージ説明](dc355ab3cbf4f29fc1d3fd1c1f15c9f9.png)

3

ソースコード

2017/11/21 05:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,7 @@
4
4
 
5
5
  ![イメージ説明](bec80d0fd926a4f815fd53c0fb23966b.png)
6
6
 
7
-
8
-
9
- HHTML5
7
+ PHP HTML5
10
8
 
11
9
  ```ここに言語を入力
12
10
 
@@ -36,9 +34,7 @@
36
34
 
37
35
  ```
38
36
 
39
-
40
-
41
- CSS3
37
+ CSS3 SCSS
42
38
 
43
39
  ```ここに言語を入力
44
40
 
@@ -161,3 +157,165 @@
161
157
  }
162
158
 
163
159
  ```
160
+
161
+ 完成しました、ありがとうございます。
162
+
163
+ PHP HTML5
164
+
165
+ ```ここに言語を入力
166
+
167
+ <ul class="scroll-list">
168
+
169
+ <?php
170
+
171
+ $args = array( 'posts_per_page' => 4 );
172
+
173
+
174
+
175
+ $myposts = get_posts( $args );
176
+
177
+ foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
178
+
179
+
180
+
181
+ <li class="scroll-item">
182
+
183
+ <time class="entry-date" itemprop="datePublished" datetime="<?php the_modified_date('c') ?>"><?php echo get_the_date( 'Y/m/d' ); ?></time>
184
+
185
+ <h3 class="entry-title"><?php the_title(); ?></h3>
186
+
187
+ </li>
188
+
189
+
190
+
191
+ <?php endforeach;
192
+
193
+ wp_reset_postdata();?>
194
+
195
+ </ul>
196
+
197
+ ```
198
+
199
+ CSS3 SCSS
200
+
201
+ ```ここに言語を入力
202
+
203
+ /*--------------------------------------------------------------
204
+
205
+ # news
206
+
207
+ --------------------------------------------------------------*/
208
+
209
+ .news {
210
+
211
+ position: relative;
212
+
213
+ padding: 20rem 0 70rem 0;
214
+
215
+ background:
216
+
217
+ url(images/illust-news01.png) 90% 60% no-repeat,
218
+
219
+ url(images/illust-access02.png) 5% 0% no-repeat,
220
+
221
+ url(images/bg-news.png) center top /cover no-repeat;
222
+
223
+ }
224
+
225
+
226
+
227
+ .news .news-img {
228
+
229
+ display: block;
230
+
231
+ margin: 0 auto;
232
+
233
+ }
234
+
235
+
236
+
237
+ .news .lines {
238
+
239
+ margin: 0;
240
+
241
+ border-top: .1rem solid $white;
242
+
243
+ }
244
+
245
+
246
+
247
+ .news .scroll-list {
248
+
249
+ list-style: none;
250
+
251
+ padding: 0;
252
+
253
+ color: $white;
254
+
255
+ @include media-breakpoint-down(sm) {
256
+
257
+ margin-bottom: 3rem;
258
+
259
+ }
260
+
261
+ }
262
+
263
+ .news .scroll-item {
264
+
265
+ border-bottom: .1rem dotted $white;
266
+
267
+ }
268
+
269
+
270
+
271
+ .news .twitter-timeline {
272
+
273
+ position: absolute !important;
274
+
275
+ top: 74rem;
276
+
277
+ left: 40rem;
278
+
279
+ @include media-breakpoint-down(sm) {
280
+
281
+ position: relative !important;
282
+
283
+ top: 0;
284
+
285
+ left: 0;
286
+
287
+ }
288
+
289
+ }
290
+
291
+
292
+
293
+ .entry-date {
294
+
295
+ display: inline-block;
296
+
297
+ padding: 1rem 1rem;
298
+
299
+ @include media-breakpoint-down(sm) {
300
+
301
+
302
+
303
+ }
304
+
305
+ }
306
+
307
+
308
+
309
+ .news .entry-title {
310
+
311
+ display: inline-block;
312
+
313
+ font-size: 1rem;
314
+
315
+ @include media-breakpoint-down(sm) {
316
+
317
+ }
318
+
319
+ }
320
+
321
+ ```

2

ソースコード

2017/11/21 05:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -3,3 +3,161 @@
3
3
  下線の長さをいっぱいに伸ばしたいのですが、ご教示いただければ幸いです。
4
4
 
5
5
  ![イメージ説明](bec80d0fd926a4f815fd53c0fb23966b.png)
6
+
7
+
8
+
9
+ HHTML5
10
+
11
+ ```ここに言語を入力
12
+
13
+ <section id="news" class="news">
14
+
15
+ <div class="container">
16
+
17
+ <div class="section-header">
18
+
19
+ <h2><img class="img-fluid news-img" src="<?php echo get_template_directory_uri(); ?>/images/title-news.png" alt="title-news"></h2>
20
+
21
+ </div>
22
+
23
+ <hr class="lines">
24
+
25
+ <div class="row">
26
+
27
+ <?php get_template_part( 'template-parts/content', 'news' ); ?>
28
+
29
+ <a class="twitter-timeline" width="600px" height="300px" href="https://twitter.com/only4106?ref_src=twsrc%5Etfw">Tweets by only4106</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
30
+
31
+ </div>
32
+
33
+ </div>
34
+
35
+ </section><!-- .news -->
36
+
37
+ ```
38
+
39
+
40
+
41
+ CSS3
42
+
43
+ ```ここに言語を入力
44
+
45
+ /*--------------------------------------------------------------
46
+
47
+ # news
48
+
49
+ --------------------------------------------------------------*/
50
+
51
+ .news {
52
+
53
+ position: relative;
54
+
55
+ padding: 20rem 0 70rem 0;
56
+
57
+ background:
58
+
59
+ url(images/illust-news01.png) 90% 60% no-repeat,
60
+
61
+ url(images/illust-access02.png) 5% 0% no-repeat,
62
+
63
+ url(images/bg-news.png) center top /cover no-repeat;
64
+
65
+ }
66
+
67
+
68
+
69
+ .news .news-img {
70
+
71
+ display: block;
72
+
73
+ margin: 0 auto;
74
+
75
+ }
76
+
77
+
78
+
79
+ .news .lines {
80
+
81
+ border-top: .1rem solid $white;
82
+
83
+ }
84
+
85
+
86
+
87
+ .news ul {
88
+
89
+ list-style: none;
90
+
91
+ color: $white;
92
+
93
+ @include media-breakpoint-down(sm) {
94
+
95
+ margin-bottom: 3rem;
96
+
97
+ }
98
+
99
+ }
100
+
101
+ ul li {
102
+
103
+ width: 100%;
104
+
105
+ border-bottom: 1px solid $white;
106
+
107
+ }
108
+
109
+
110
+
111
+ .news .twitter-timeline {
112
+
113
+ position: absolute !important;
114
+
115
+ top: 74rem;
116
+
117
+ left: 40rem;
118
+
119
+ @include media-breakpoint-down(sm) {
120
+
121
+ position: relative !important;
122
+
123
+ top: 0;
124
+
125
+ left: 0;
126
+
127
+ }
128
+
129
+ }
130
+
131
+
132
+
133
+ .entry-date {
134
+
135
+ margin-bottom: 0;
136
+
137
+ @include media-breakpoint-down(sm) {
138
+
139
+ display: block;
140
+
141
+ margin-bottom: .5rem;
142
+
143
+ }
144
+
145
+ }
146
+
147
+
148
+
149
+ .news .entry-title {
150
+
151
+ display: inline-block;
152
+
153
+ font-size: 1rem;
154
+
155
+ @include media-breakpoint-down(sm) {
156
+
157
+ display: block;
158
+
159
+ }
160
+
161
+ }
162
+
163
+ ```

1

タイトル

2017/11/20 00:56

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 下線の長さんについて
1
+ 文章の下線の長さについて
test CHANGED
File without changes