質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.12%

overflow: hidden;を加えるとスタイルが崩れてしまう。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 758

gunmed

score 55

崩れた画像

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

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

イメージ説明

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スタンダードレイアウト</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/myself.css">
</head>
<body>
  <body>
    <header class="header">
        <a href="#" class="logo">
          <h1>sample site</h1>
        </a>
    <nav class="global-nav">
      <ul>
        <li class="nav-item active"><a href="#">HOME</a></li>
        <li class="nav-item"><a href="#">ABOUT</a></li>
        <li class="nav-item"><a href="#">NEWS</a></li>
        <li class="nav-item"><a href="#">TOPICS</a></li>
        <li class="nav-item"><a href="#">DOCS</a></li>
        <li class="nav-item"><a href="#">BLOG</a></li>
      </ul>
    </nav>
    </header>
    <div class="wrapper clearfix">
      <main class="main">
        <h2 class="hidden">HOT TOPICS</h2>
        <a href="#" class="hot-topic clearfix">
          <img class="image" src="./images/hot-topic.jpg" alt="コーディング画面">
          <div class="content"><!--divで囲うのを忘れずに-->
            <h3 class="title">実務で使えるHTML/CSS<br>モダンコーディングTIPS</h3>
            <p class="desc">Webフロントエンドの進化の勢いはとどまるところを知りません。新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用して...</p>
            <time class="date" datetime="2015-09-01">2015.09.01 TUE</time>
          </div>
        </a>
<!--これ以下が質問に関する部分-->
        <h2 class="heading">NEWS</h2>
        <ul class="scroll-list">
          <li class="scroll-item">
            <a href="#">
              <time class="date" datetime="2015-08-23">2015.08.23 SUN</time>
              <span class="category news">NEWS</span>
              <span class="title">WORKSを更新しました。</span>
            </a>
          </li>
          <li class="scroll-item">
            <a href="#">
              <time class="date" datetime="2015-08-12">2015.08.12 WED</time>
              <span class="category">TOPIC</span>
              <span class="title">CSSでここまでできる!?ホントに使えるCSSセレクタ10選!</span>
            </a>
          </li>
          <li class="scroll-item">
            <a href="#">
              <time class="date" datetime="2015-08-04">2015.08.04 TUE</time>
              <span class="category news">NEWS</span>
              <span class="title">TOPICSを更新しました。</span>
            </a>
          </li>
          <li class="scroll-item">
            <a href="#">
              <time class="date" datetime="2015-07-25">2015.07.25 SAT</time>
              <span class="category">TOPIC</span>
              <span class="title">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向をチェックしよう</span>
            </a>
          </li>
          <li class="scroll-item">
            <a href="#">
              <time class="date" datetime="2015-07-09">2015.07.09 THU</time>
              <span class="category">TOPIC</span>
              <span class="title">HTML5の新しい属性で手軽にフォームバリデーション</span>
            </a>
          </li>
          <li class="scroll-item">
            <a href="#">
              <time class="date" datetime="2015-06-30">2015.06.30 TUE</time>
              <span class="category news">NEWS</span>
              <span class="title">WORKSを更新しました。</span>
            </a>
          </li>
        </ul><h2 class="hidden">ARTICLES</h2>
      </main>
      <div class="sidemenu">
          <h2 class="heading">RANKING</h2>
          <h2 class="heading">DOCUMENTS</h2>
          <h2 class="hidden">SEARCH</h2>
      </div>
    </div> 
    <footer class="footer">
    </footer>
  </body>
  </html>

CSS

@charset "UTF-8";

html {
  font-size: 62.5%;
}
body {
  color: #333;
  font-size: 1.2 rem;
  font-family: "Hiragino Kaku Gothic ProN","Meiryo", sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
  color: salmon;
  text-decoration: none;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.header {
  width: 100%;
  height: 140px;
  padding: 28px 0 10px;
  background: url('../images/bg-header.gif') repeat-x;
  box-shadow: 0 0 10px 1px;
}
.logo {
  width:225px;
  height: 56px;
  display: block;
  background: url('../images/logo.png') no-repeat;
  margin: 0 auto;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.global-nav {
  text-align: center;
}
.global-nav .nav-item {
  display: inline-block;
  text-align: center;
  margin: 10px;
}

.global-nav .nav-item a {
  display:block;
  font-size: 1.2rem;
  width: 100px;
  line-height: 30px;
  border-radius: 10px;
  color: #666;
  transition: 0.15s;
  letter-spacing: 1px;
}
.nav-item.active a, .nav-item a:hover {
  background-color: #d03c56;
  color: white;
}
.hidden {
  display: none;
}
.wrapper {
  width: 970px;
  margin: 30px auto 20px;
}
.main {
  width: 660px;
  /*display: block;*/
}
.hot-topic {
  width: 100%;
  display: block;
  margin-bottom: 30px;
  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.15);
}
.hot-topic .image {
  width: 50%;
  float: left;
}
.hot-topic .content {
  width: 50%;
  float: right;
  background-color: #2d3d54;
  height: 300px;
  display: block;
  color: white;
  padding: 110px 25px 0;
  position: relative;
}
.hot-topic .title {
  font-size: 2.0rem;
  line-height: 1.6;
  letter-spacing: 1px;
  font-weight: normal;
}
.hot-topic .desc {
  color: #D8D9C9;
  padding-top: 10px;
  font-size: 1.2rem;
  line-height: 1.5;
}
.hot-topic .date {
  position: absolute;
  top:45px;
  left: 0px;
  background-color: white;
  color:  #2d3d54;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 5px;
}
.hot-topic:hover {
  opacity: 0.85;
}

/*これ以下が質問に関する部分*/
.heading {
  background: url("../images/bg-slash.gif");
  padding: 10px 22px ;
  letter-spacing: 1px;
  font-size: 1.6rem;
}
.scroll-list {
  font-size: 0;
  margin-bottom: 30px;
  color: #333333
}
.scroll-list .scroll-item {
  display: block;
  height: 35px;
  line-height: 35px;
}
.scroll-list .scroll-item:nth-of-type(even) {
  background: url("../images/bg-slash.gif");
}
.scroll-list .date {
  display: inline-block;
  width: 17%;
  font-size: 1.0rem;
  text-align: center;
}
.scroll-item .category {
  background-color: #CF3C55;
  line-height:1.6;
  display: inline-block;
  width: 8%;
  font-size: 1.0rem;
  text-align: center;
  letter-spacing: 1px;
  border-radius: 5px;
}
.scroll-list .title {
  display: inline-block;
  width: 75%;
  font-size: 1.2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
/*以下のを加えるとスタイルが崩れます*/
  overflow: hidden;
}
.scroll-list .category.news {
  background-color: #2C3C53;
}

mac 10.14.4
google chrome

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

.scroll-list .scroll-item a {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}

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

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


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

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;


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

.scroll-list {
  font-size: 0; /* ← これは display: inline-block; の隙間をなくすためのもの */
  margin-bottom: 30px;
  color: #333333
}
/* 以下は不要なので削除
.scroll-list .scroll-item {
  display: block; ← 削除
  height: 35px; ← 削除
  line-height: 35px; ← 削除
}
ここまで*/
.scroll-list .scroll-item:nth-of-type(even) {
  background: url("../images/bg-slash.gif");
}
/* 以下を追加して padding で間隔を調整します */
.scroll-list .scroll-item a {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}
/* ここまで */
.scroll-list .date {
  display: inline-block;
  width: 17%;
  font-size: 1.0rem;
  text-align: center;
  vertical-align: middle; /* ← 追加 */
}
.scroll-item .category {
  background-color: #CF3C55;
  line-height:1.6;
  display: inline-block;
  width: 8%;
  font-size: 1.0rem;
  text-align: center;
  letter-spacing: 1px;
  border-radius: 5px;
  vertical-align: middle; /* ← 追加 */
}
.scroll-list .title {
  display: inline-block;
  width: 75%;
  font-size: 1.2rem;
  /* ↓ の3点セットで省略記号がでます */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  /* ここまで */
  vertical-align: middle; /* ← 追加 */
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/22 15:56

    丁寧な回答ありがとうございます。
    内容を読ませていただいたのですが、とても丁寧な解説をしていただいており、とても感謝しております。
    実際にこちらでも修正できましたし、さらに、font-size: 0;以外のやり方を提示していただき、非常に勉強になりました。

    今後ともよろしくお願いいたします。

    キャンセル

  • 2019/10/22 16:54

    無事解決できて良かったです!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る