管理画面上で登録した文章が表示される部分の、html・cssを組んでいます。
(ソースは下部に提示)
登録される文に規則性はなく、幾つかのパターンで表示されることが予測されます。
表示パターンは以下スクショの全部で7パターンです。
- win10以上動作対象
- 枠は780px内
- メインテキスト・サブテキストはどんな場合でも必ず表示される
- メインテキストは長い場合と短い場合がある。
- メインテキストは必ず1行で表示。長い場合は
text-overflow
で省略
- アイコンは全部で3つ
- アイコンは、1つだけ・2つだけ・全部表示の3パターンの表示がある
- アイコン2,アイコン3については枠の上下中央の右寄せに配置
- メインテキストが短い場合にはアイコン1はメインテキストの文末に
- メインテキストが長い場合、
text-overflow
で省略された…の文末にアイコン1を表示 - アイコンが表示されていない箇所については、メインテキストが長い場合には詰めて余白を作ることなく表示させる。
といった仕様です。
MAC Chrome63.0.3239.132 で組んでいます。
(下記cssでベンダープレフィックス等記述が足りておらず、崩れがあるかもです)
下記では、アイコンあるなしの状況に応じて、見出しにクラスを振り分け、max-widthで切り分けるような書き方をしました。(.ptn3 .ptn4 .ptn5...
)
この書き方だと、例えば、スクショのパターン1の状態から**”アイコン2”、”アイコン3”を消した場合に、メインテキストに幅指定がしてあるため、消したアイコン分の余白が空いてしまいます。
なので、パターン1からアイコン2,3を消した場合にはパターン4のデザイン**になるような組み方をcssだけでしたいです。(説明下手ですみません)
flexでの制御を考えたのですが、そうするとアイコン1のあるなしの判別ができず、どうすれば良いのかわからないのでご教授いただけると幸いです。
ソース
css
1.wrap.fl_base.clearfix { 2 background: #f1f1f1; 3 padding: 8px; 4 margin-bottom: 30px; 5 width: 780px; 6 display: -webkit-flex; 7 display: -moz-flex; 8 display: -ms-flex; 9 display: -o-flex; 10 display: flex; 11 -webkit-box-align: center; 12 -ms-flex-align: center; 13 align-items: center; 14 flex-wrap: nowrap; 15} 16a.pink { 17 display: inline-block; 18 font-size: 12px; 19 padding: 4px; 20 color: #fff; 21 background: #ff95bf; 22} 23a.blue { 24 display: inline-block; 25 font-size: 12px; 26 padding: 4px; 27 color: #fff; 28 background: #95bbff; 29} 30h4 { 31 display: -webkit-flex; 32 display: -moz-flex; 33 display: -ms-flex; 34 display: -o-flex; 35 display: flex; 36 margin:0 37} 38h4 a { 39 font-size: 18px; 40 color: #6c7eca; 41 font-weight: bold; 42 width:auto; 43 max-width: 500px; 44 vertical-align: middle; 45 overflow: hidden; 46 white-space: nowrap; 47 text-overflow: ellipsis; 48 display: block; 49} 50span.icon1 { 51 background: #e66262; 52 color: #fff; 53 font-size: 12px; 54 width: 120px; 55 display: block; 56 margin: 0 8px; 57 height: 19px; 58 line-height: 20px; 59 padding: 0px 2px; 60 text-align: center; 61} 62p.under { 63 font-size: 12px; 64 margin: 0; 65} 66.fl_inner.inner_left { 67 flex: 1 0 auto; 68} 69.ptn3 a{ 70 max-width:570px; 71} 72.ptn4 a{ 73 max-width:647px; 74} 75.ptn5 a{ 76 max-width:640px; 77} 78.ptn6 a{ 79 max-width:710px; 80} 81.ptn7 a{ 82 max-width:780px; 83}
html
1<body> 2<div class="wrap fl_base clearfix"> 3 <div class="fl_inner inner_left"> 4 <h4> 5 <a href=""> 6 パターン1:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト 7 </a> 8 <span class="icon1">アイコン1</span> 9 </h4> 10 <p class="under">サブテキスト:アイコンが全て出ていて、文字数が長い場合</p> 11 </div> 12 <p class="fl_inner icon_wrap"> 13 <a href="#" target="_blank" class="pink"> 14 アイコン2 15 </a> 16 <a href="#" target="_blank" class="blue"> 17 アイコン3 18 </a> 19 </p> 20</div> 21<div class="wrap fl_base clearfix"> 22 <div class="fl_inner inner_left"> 23 <h4> 24 <a href=""> 25 パターン2:メインテキスト 26 </a> 27 <span class="icon1">アイコン1</span> 28 </h4> 29 <p class="under">サブテキスト:”アイコン3”が非表示でかつ文字数が短い場合</p> 30 </div> 31 <p class="fl_inner icon_wrap"> 32 <a href="#" target="_blank" class="pink"> 33 アイコン2 34 </a> 35 </p> 36</div> 37<div class="wrap fl_base clearfix"> 38 <div class="fl_inner inner_left"> 39 <h4 class="ptn3"> 40 <a href=""> 41 パターン3:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト 42 </a> 43 <span class="icon1">アイコン1</span> 44 </h4> 45 <p class="under">サブテキスト:”アイコン3”が非表示でかつ文字数が長い場合</p> 46 </div> 47 <p class="fl_inner icon_wrap"> 48 <a href="#" target="_blank" class="pink"> 49 アイコン2 50 </a> 51 </p> 52</div> 53<div class="wrap fl_base clearfix"> 54 <div class="fl_inner inner_left"> 55 <h4 class="ptn4"> 56 <a href=""> 57 パターン4:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト 58 </a> 59 <span class="icon1">アイコン1</span> 60 </h4> 61 <p class="under">サブテキスト:”アイコン1”のみ表示の場合</p> 62 </div> 63</div> 64<div class="wrap fl_base clearfix"> 65 <div class="fl_inner inner_left"> 66 <h4 class="ptn5"> 67 <a href=""> 68 パターン5:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト 69 </a> 70 </h4> 71 <p class="under">サブテキスト:”アイコン1”のみ非表示の場合</p> 72 </div> 73 <p class="fl_inner icon_wrap"> 74 <a href="#" target="_blank" class="pink"> 75 アイコン2 76 </a> 77 <a href="#" target="_blank" class="blue"> 78 アイコン3 79 </a> 80 </p> 81</div> 82<div class="wrap fl_base clearfix"> 83 <div class="fl_inner inner_left"> 84 <h4 class="ptn6"> 85 <a href=""> 86 パターン6:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト 87 </a> 88 </h4> 89 <p class="under">サブテキスト:”アイコン2”のみ表示の場合</p> 90 </div> 91 <p class="fl_inner icon_wrap"> 92 <a href="#" target="_blank" class="pink"> 93 アイコン2 94 </a> 95 </p> 96</div> 97<div class="wrap fl_base clearfix"> 98 <div class="fl_inner inner_left"> 99 <h4 class="ptn7"> 100 <a href=""> 101 パターン7:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト 102 </a> 103 </h4> 104 <p class="under">サブテキスト:アイコンが全て出ていない場合</p> 105 </div> 106</div> 107</body> 108
1/17 追記
すでに解決したのですが備忘録で…
下記の、x_x様の回答で問題なかったのですが、h4にline-height:1
を指定するとWindowsのchromeで、アイコン1とh4のテキストが重なるという事が起きました。(Macでは起きず)
line-height:1.5;
で解決。
原因がわかってないので時間ある時に調べます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/11 07:54
2018/01/11 08:51
2018/01/12 01:17