#崩れた画像
以下のように、本来であれば、一直線であったはずなのに、overflow: hidden;を加えると崩れてしまっています。
下記にhtmlとcssを載せます。
スタイル崩れの原因となるcssはcssシートの一番下の方にあります。
どうしても、スタイルを崩さないことができないので、なぜoverflow: hidden;を加えただけで、こんなに崩れてしまったのかが自分一人では解決できませんでしたので、ご指導いただけると幸いです。

そもそも、自分が参考にしている本では、overflowと同時に、text-overflow: ellipsis;も同時に記述していたのですが、text-overflowではみ出た文字は...になるので、そもそもoverflow: hidden;は要らないのかなとも思い始めていますが、どうでしょうか？

HTML

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>スタンダードレイアウト</title>
6  <link rel="stylesheet" href="css/reset.css">
7  <link rel="stylesheet" href="css/myself.css">
8</head>
9<body>
10  <body>
11    <header class="header">
12        <a href="#" class="logo">
13          <h1>sample site</h1>
14        </a>
15    <nav class="global-nav">
16      <ul>
17        <li class="nav-item active"><a href="#">HOME</a></li>
18        <li class="nav-item"><a href="#">ABOUT</a></li>
19        <li class="nav-item"><a href="#">NEWS</a></li>
20        <li class="nav-item"><a href="#">TOPICS</a></li>
21        <li class="nav-item"><a href="#">DOCS</a></li>
22        <li class="nav-item"><a href="#">BLOG</a></li>
23      </ul>
24    </nav>
25    </header>
26    <div class="wrapper clearfix">
27      <main class="main">
28        <h2 class="hidden">HOT TOPICS</h2>
29        <a href="#" class="hot-topic clearfix">
30          <img class="image" src="./images/hot-topic.jpg" alt="コーディング画面">
31          <div class="content"><!--divで囲うのを忘れずに-->
32            <h3 class="title">実務で使えるHTML/CSS<br>モダンコーディングTIPS</h3>
33            <p class="desc">Webフロントエンドの進化の勢いはとどまるところを知りません。新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用して...</p>
34            <time class="date" datetime="2015-09-01">2015.09.01 TUE</time>
35          </div>
36        </a>
37<!--これ以下が質問に関する部分-->
38        <h2 class="heading">NEWS</h2>
39        <ul class="scroll-list">
40          <li class="scroll-item">
41            <a href="#">
42              <time class="date" datetime="2015-08-23">2015.08.23 SUN</time>
43              <span class="category news">NEWS</span>
44              <span class="title">WORKSを更新しました。</span>
45            </a>
46          </li>
47          <li class="scroll-item">
48            <a href="#">
49              <time class="date" datetime="2015-08-12">2015.08.12 WED</time>
50              <span class="category">TOPIC</span>
51              <span class="title">CSSでここまでできる！？ホントに使えるCSSセレクタ10選！</span>
52            </a>
53          </li>
54          <li class="scroll-item">
55            <a href="#">
56              <time class="date" datetime="2015-08-04">2015.08.04 TUE</time>
57              <span class="category news">NEWS</span>
58              <span class="title">TOPICSを更新しました。</span>
59            </a>
60          </li>
61          <li class="scroll-item">
62            <a href="#">
63              <time class="date" datetime="2015-07-25">2015.07.25 SAT</time>
64              <span class="category">TOPIC</span>
65              <span class="title">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向をチェックしよう</span>
66            </a>
67          </li>
68          <li class="scroll-item">
69            <a href="#">
70              <time class="date" datetime="2015-07-09">2015.07.09 THU</time>
71              <span class="category">TOPIC</span>
72              <span class="title">HTML5の新しい属性で手軽にフォームバリデーション</span>
73            </a>
74          </li>
75          <li class="scroll-item">
76            <a href="#">
77              <time class="date" datetime="2015-06-30">2015.06.30 TUE</time>
78              <span class="category news">NEWS</span>
79              <span class="title">WORKSを更新しました。</span>
80            </a>
81          </li>
82        </ul><h2 class="hidden">ARTICLES</h2>
83      </main>
84      <div class="sidemenu">
85          <h2 class="heading">RANKING</h2>
86          <h2 class="heading">DOCUMENTS</h2>
87          <h2 class="hidden">SEARCH</h2>
88      </div>
89    </div> 
90    <footer class="footer">
91    </footer>
92  </body>
93  </html>
94

CSS

css
1@charset "UTF-8";
2
3html {
4  font-size: 62.5%;
5}
6body {
7  color: #333;
8  font-size: 1.2 rem;
9  font-family: "Hiragino Kaku Gothic ProN","Meiryo", sans-serif;
10}
11*, *::before, *::after {
12  box-sizing: border-box;
13}
14a:link, a:visited, a:hover, a:active {
15  color: salmon;
16  text-decoration: none;
17}
18.clearfix::after {
19  content: '';
20  display: block;
21  clear: both;
22}
23.header {
24  width: 100%;
25  height: 140px;
26  padding: 28px 0 10px;
27  background: url('../images/bg-header.gif') repeat-x;
28  box-shadow: 0 0 10px 1px;
29}
30.logo {
31  width:225px;
32  height: 56px;
33  display: block;
34  background: url('../images/logo.png') no-repeat;
35  margin: 0 auto;
36  text-indent: 100%;
37  white-space: nowrap;
38  overflow: hidden;
39}
40
41.global-nav {
42  text-align: center;
43}
44.global-nav .nav-item {
45  display: inline-block;
46  text-align: center;
47  margin: 10px;
48}
49
50.global-nav .nav-item a {
51  display:block;
52  font-size: 1.2rem;
53  width: 100px;
54  line-height: 30px;
55  border-radius: 10px;
56  color: #666;
57  transition: 0.15s;
58  letter-spacing: 1px;
59}
60.nav-item.active a, .nav-item a:hover {
61  background-color: #d03c56;
62  color: white;
63}
64.hidden {
65  display: none;
66}
67.wrapper {
68  width: 970px;
69  margin: 30px auto 20px;
70}
71.main {
72  width: 660px;
73  /*display: block;*/
74}
75.hot-topic {
76  width: 100%;
77  display: block;
78  margin-bottom: 30px;
79  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.15);
80}
81.hot-topic .image {
82  width: 50%;
83  float: left;
84}
85.hot-topic .content {
86  width: 50%;
87  float: right;
88  background-color: #2d3d54;
89  height: 300px;
90  display: block;
91  color: white;
92  padding: 110px 25px 0;
93  position: relative;
94}
95.hot-topic .title {
96  font-size: 2.0rem;
97  line-height: 1.6;
98  letter-spacing: 1px;
99  font-weight: normal;
100}
101.hot-topic .desc {
102  color: #D8D9C9;
103  padding-top: 10px;
104  font-size: 1.2rem;
105  line-height: 1.5;
106}
107.hot-topic .date {
108  position: absolute;
109  top:45px;
110  left: 0px;
111  background-color: white;
112  color:  #2d3d54;
113  font-size: 1.2rem;
114  font-weight: bold;
115  padding: 5px;
116}
117.hot-topic:hover {
118  opacity: 0.85;
119}
120
121/*これ以下が質問に関する部分*/
122.heading {
123  background: url("../images/bg-slash.gif");
124  padding: 10px 22px ;
125  letter-spacing: 1px;
126  font-size: 1.6rem;
127}
128.scroll-list {
129  font-size: 0;
130  margin-bottom: 30px;
131  color: #333333
132}
133.scroll-list .scroll-item {
134  display: block;
135  height: 35px;
136  line-height: 35px;
137}
138.scroll-list .scroll-item:nth-of-type(even) {
139  background: url("../images/bg-slash.gif");
140}
141.scroll-list .date {
142  display: inline-block;
143  width: 17%;
144  font-size: 1.0rem;
145  text-align: center;
146}
147.scroll-item .category {
148  background-color: #CF3C55;
149  line-height:1.6;
150  display: inline-block;
151  width: 8%;
152  font-size: 1.0rem;
153  text-align: center;
154  letter-spacing: 1px;
155  border-radius: 5px;
156}
157.scroll-list .title {
158  display: inline-block;
159  width: 75%;
160  font-size: 1.2rem;
161  text-overflow: ellipsis;
162  white-space: nowrap;
163/*以下のを加えるとスタイルが崩れます*/
164  overflow: hidden;
165}
166.scroll-list .category.news {
167  background-color: #2C3C53;
168}

mac 10.14.4
google chrome

行動規範の内容に同意します

回答1件

ベストアンサー

display: inline-block;を指定した要素は、デフォルトで縦の位置がベースラインに合わせているので、これが崩れる原因だと思います。
これを直すにはdisplay: inline-blockを指定した要素にvertical-align: middle;を指定します。

.scroll-item の中にある、height: 35px;とline-height: 35px;は高さを揃えるためだと思うのですが、高さを固定してしまうのはあまり良くないので、基本はpaddingで調整します。以下を追記しました。

css
1.scroll-list .scroll-item a {
2  display: block;
3  padding-top: 5px;
4  padding-bottom: 5px;
5}

.scroll-listの中にfont-size: 0;がついていますが、これはdisplay: inline-block;の要素を並べたときにできる隙間をなくすためのものですが、下のようにhtmlを1行で書けば隙間をなくすことができます。
参考

html
1<a href="#">
2  <time class="date" datetime="2015-08-23">2015.08.23 SUN</time><span class="category news">NEWS</span><span class="title">WORKSを更新しました。</span>
3</a>

また後半の部分に関してはまずwhite-space: nowrap;で文章をを改行させないようにします。そうすると文字が右にはみ出してしまうので、overflow: hidden;ではみ出した部分を隠します。
そして、はみ出した部分に対してtext-overflow: ellipsis;を指定することで省略記号を出すことができます。なので下の3つはセットで使います。
参考

css
1white-space: nowrap;
2overflow: hidden;
3text-overflow: ellipsis;

いろいろと説明しましたが、最後に修正が必要な部分のコードを以下に書きましたのでコピペしてみてください。こちらでどうでしょうか・・・
サンプル

css
1.scroll-list {
2  font-size: 0; /* ← これは display: inline-block; の隙間をなくすためのもの */
3  margin-bottom: 30px;
4  color: #333333
5}
6/* 以下は不要なので削除
7.scroll-list .scroll-item {
8  display: block; ← 削除
9  height: 35px; ← 削除
10  line-height: 35px; ← 削除
11}
12ここまで*/
13.scroll-list .scroll-item:nth-of-type(even) {
14  background: url("../images/bg-slash.gif");
15}
16/* 以下を追加して padding で間隔を調整します */
17.scroll-list .scroll-item a {
18  display: block;
19  padding-top: 5px;
20  padding-bottom: 5px;
21}
22/* ここまで */
23.scroll-list .date {
24  display: inline-block;
25  width: 17%;
26  font-size: 1.0rem;
27  text-align: center;
28  vertical-align: middle; /* ← 追加 */
29}
30.scroll-item .category {
31  background-color: #CF3C55;
32  line-height:1.6;
33  display: inline-block;
34  width: 8%;
35  font-size: 1.0rem;
36  text-align: center;
37  letter-spacing: 1px;
38  border-radius: 5px;
39  vertical-align: middle; /* ← 追加 */
40}
41.scroll-list .title {
42  display: inline-block;
43  width: 75%;
44  font-size: 1.2rem;
45  /* ↓ の3点セットで省略記号がでます */
46  text-overflow: ellipsis;
47  white-space: nowrap;
48  overflow: hidden;
49  /* ここまで */
50  vertical-align: middle; /* ← 追加 */
51}