回答編集履歴
3
コードを修正しました
answer
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
overflow: hidden;
|
|
26
26
|
text-overflow: ellipsis;
|
|
27
27
|
```
|
|
28
|
-
いろいろと説明しましたが、最後に修正が必要な部分のコードを以下に書きました。こちらでどうでしょうか・・・
|
|
28
|
+
いろいろと説明しましたが、最後に修正が必要な部分のコードを以下に書きましたのでコピペしてみてください。こちらでどうでしょうか・・・
|
|
29
29
|
[サンプル](https://thimbleprojects.org/takopo/710891/)
|
|
30
30
|
```css
|
|
31
31
|
.scroll-list {
|
|
@@ -33,11 +33,13 @@
|
|
|
33
33
|
margin-bottom: 30px;
|
|
34
34
|
color: #333333
|
|
35
35
|
}
|
|
36
|
+
/* 以下は不要なので削除
|
|
36
37
|
.scroll-list .scroll-item {
|
|
37
|
-
display: block;
|
|
38
|
+
display: block; ← 削除
|
|
38
|
-
|
|
39
|
+
height: 35px; ← 削除
|
|
39
|
-
|
|
40
|
+
line-height: 35px; ← 削除
|
|
40
41
|
}
|
|
42
|
+
ここまで*/
|
|
41
43
|
.scroll-list .scroll-item:nth-of-type(even) {
|
|
42
44
|
background: url("../images/bg-slash.gif");
|
|
43
45
|
}
|
2
修正
answer
CHANGED
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
</a>
|
|
19
19
|
```
|
|
20
20
|
また後半の部分に関してはまず`white-space: nowrap;`で文章をを改行させないようにします。そうすると文字が右にはみ出してしまうので、`overflow: hidden;`ではみ出した部分を隠します。
|
|
21
|
-
そして、はみ出した部分に対して`text-overflow: ellipsis;`を指定することで省略記号を出すことができます。
|
|
21
|
+
そして、はみ出した部分に対して`text-overflow: ellipsis;`を指定することで省略記号を出すことができます。なので下の3つはセットで使います。
|
|
22
|
-
なので下の3つはセットで使います。
|
|
23
22
|
[参考](https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow)
|
|
24
23
|
```css
|
|
25
24
|
white-space: nowrap;
|
|
@@ -27,6 +26,7 @@
|
|
|
27
26
|
text-overflow: ellipsis;
|
|
28
27
|
```
|
|
29
28
|
いろいろと説明しましたが、最後に修正が必要な部分のコードを以下に書きました。こちらでどうでしょうか・・・
|
|
29
|
+
[サンプル](https://thimbleprojects.org/takopo/710891/)
|
|
30
30
|
```css
|
|
31
31
|
.scroll-list {
|
|
32
32
|
font-size: 0; /* ← これは display: inline-block; の隙間をなくすためのもの */
|
1
文章の修正
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
`display: inline-block;`を指定した要素は、デフォルトで縦の位置がベースラインに合わせているので、これが
|
|
1
|
+
`display: inline-block;`を指定した要素は、デフォルトで縦の位置がベースラインに合わせているので、これが崩れる原因だと思います。
|
|
2
2
|
これを直すには`display: inline-block`を指定した要素に`vertical-align: middle;`を指定します。
|
|
3
3
|
|
|
4
4
|
`.scroll-item` の中にある、`height: 35px;`と`line-height: 35px;`は高さを揃えるためだと思うのですが、高さを固定してしまうのはあまり良くないので、基本は`padding`で調整します。以下を追記しました。
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
}
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
`.scroll-list`の中に`font-size: 0;`がついていますが、これは`display: inline-block;`の要素を並べたときにできる隙間をなくすためのものですが、下のようにhtmlを1行で書けば隙間をなくすことができます。
|
|
13
|
+
`.scroll-list`の中に`font-size: 0;`がついていますが、これは`display: inline-block;`の要素を並べたときにできる隙間をなくすためのものですが、下のようにhtmlを1行で書けば隙間をなくすことができます。
|
|
14
|
+
[参考](https://qiita.com/BEMU/items/0f500e0306471073ed63)
|
|
14
15
|
```html
|
|
15
16
|
<a href="#">
|
|
16
17
|
<time class="date" datetime="2015-08-23">2015.08.23 SUN</time><span class="category news">NEWS</span><span class="title">WORKSを更新しました。</span>
|
|
@@ -18,7 +19,8 @@
|
|
|
18
19
|
```
|
|
19
20
|
また後半の部分に関してはまず`white-space: nowrap;`で文章をを改行させないようにします。そうすると文字が右にはみ出してしまうので、`overflow: hidden;`ではみ出した部分を隠します。
|
|
20
21
|
そして、はみ出した部分に対して`text-overflow: ellipsis;`を指定することで省略記号を出すことができます。
|
|
22
|
+
なので下の3つはセットで使います。
|
|
21
|
-
|
|
23
|
+
[参考](https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow)
|
|
22
24
|
```css
|
|
23
25
|
white-space: nowrap;
|
|
24
26
|
overflow: hidden;
|
|
@@ -38,7 +40,6 @@
|
|
|
38
40
|
}
|
|
39
41
|
.scroll-list .scroll-item:nth-of-type(even) {
|
|
40
42
|
background: url("../images/bg-slash.gif");
|
|
41
|
-
background-color: #fcc;
|
|
42
43
|
}
|
|
43
44
|
/* 以下を追加して padding で間隔を調整します */
|
|
44
45
|
.scroll-list .scroll-item a {
|