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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

317閲覧

【css】幅指定をしないような組み方に修正したい

miyoshi_work

総合スコア69

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/01/11 04:20

編集2018/01/17 08:15

管理画面上で登録した文章が表示される部分の、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;で解決。
原因がわかってないので時間ある時に調べます。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

HTML

1<div class="wrap fl_base clearfix"> 2 <div class="fl_inner inner_left"> 3 <h4> 4 <span class="icon1">アイコン1</span> 5 <a href="#"> 6 パターン:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト 7 </a> 8 </h4> 9 <span class="fl_inner icon_wrap"> 10 <a href="#" target="_blank" class="pink"> 11 アイコン2 12 </a> 13 <a href="#" target="_blank" class="blue"> 14 アイコン3 15 </a> 16 </span> 17 </div> 18 <p class="under">サブテキスト</p> 19</div>

CSS

1.wrap.fl_base.clearfix { 2 margin-bottom: 30px; 3 padding: 8px; 4 width: 780px; 5 background: #f1f1f1; 6} 7 8.fl_inner.inner_left { 9 display: flex; 10 justify-content: space-between; 11 white-space: nowrap; 12} 13 14h4 { 15 display: inline-block; 16 margin: 0; 17 white-space: nowrap; 18 overflow: hidden; 19 text-overflow: ellipsis; 20 color: #6c7eca; 21} 22 23h4 a { 24 font-size: 18px; 25 color: #6c7eca; 26} 27 28span.icon1 { 29 display: inline-block; 30 margin: 0 8px; 31 padding: 0px 2px; 32 float: right; 33 width: 120px; 34 height: 19px; 35 text-align: center; 36 line-height: 20px; 37 font-size: 12px; 38 background: #e66262; 39 color: #fff; 40} 41 42a.pink { 43 display: inline-block; 44 padding: 4px; 45 font-size: 12px; 46 background: #ff95bf; 47 color: #fff; 48} 49 50a.blue { 51 display: inline-block; 52 padding: 4px; 53 font-size: 12px; 54 background: #95bbff; 55 color: #fff; 56} 57 58p.under { 59 margin: 0; 60 font-size: 12px; 61}

-- 17:47 要件漏れのため修正

HTML

1<div class="wrap fl_base clearfix"> 2 <div class="fl_inner inner_left"> 3 <h4> 4 <span class="icon1">アイコン1</span> 5 <a href="#"> 6 パターン:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト 7 </a> 8 </h4> 9 <p class="under">サブテキスト</p> 10 </div> 11 <div class="fl_inner icon_wrap"> 12 <a href="#" target="_blank" class="pink"> 13 アイコン2 14 </a> 15 <a href="#" target="_blank" class="blue"> 16 アイコン3 17 </a> 18 </div> 19</div>

CSS

1.wrap.fl_base.clearfix { 2 display: flex; 3 justify-content: space-between; 4 margin-bottom: 30px; 5 padding: 8px; 6 width: 780px; 7 background: #f1f1f1; 8} 9 10.fl_inner.inner_left { 11 display: inline-block; 12 white-space: nowrap; 13 overflow: hidden; 14 text-overflow: ellipsis; 15} 16 17h4 { 18 display: inline; 19 white-space: nowrap; 20 color: #6c7eca; 21} 22 23h4 a { 24 font-size: 18px; 25 color: #6c7eca; 26} 27 28span.icon1 { 29 display: inline-block; 30 margin: 0 8px; 31 padding: 0px 2px; 32 float: right; 33 width: 120px; 34 height: 19px; 35 text-align: center; 36 line-height: 20px; 37 font-size: 12px; 38 background: #e66262; 39 color: #fff; 40} 41 42.fl_inner.icon_wrap { 43 display: flex; 44 justify-content: space-between; 45 align-items: center; 46 white-space: nowrap; 47} 48 49.fl_inner.icon_wrap > * { 50 /* for IE */ 51 min-width: 60px; 52 text-align: center; 53} 54 55.fl_inner.icon_wrap > * + * { 56 margin-left: .5em; 57} 58 59a.pink { 60 display: inline-block; 61 padding: 4px; 62 font-size: 12px; 63 background: #ff95bf; 64 color: #fff; 65} 66 67a.blue { 68 display: inline-block; 69 padding: 4px; 70 font-size: 12px; 71 background: #95bbff; 72 color: #fff; 73} 74 75p.under { 76 margin: 0; 77 font-size: 12px; 78}

投稿2018/01/11 06:39

編集2018/01/11 08:49
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyoshi_work

2018/01/11 07:54

ありがとうございます!!組み方も綺麗でわかりやすいです!! 仕様に ・アイコン2,アイコン3については枠の上下中央の右寄せに配置 があるので、こちら流用でうまくできないか考えてみたいと思います。 他に回答なさそうでしたらBAとさせていただきます!
x_x

2018/01/11 08:51

すみません、完全に考慮外で修正しました。 ……が、IEのためアイコン2、3の幅を指定してください。
miyoshi_work

2018/01/12 01:17

修正までありがとうございました! 一度仮でwidth指定して組んだものの、それが先行してなかなか思いつけず悩んでしまっていたので助かりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問