Q&A
#崩れた画像
以下のように、本来であれば、一直線であったはずなのに、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件
0
ベストアンサー
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}
投稿2019/10/21 13:35
編集2019/10/21 23:26
総合スコア484
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/22 06:56
2019/10/22 07:54