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

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

ただいまの
回答率

90.35%

  • CSS

    6171questions

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

  • HTML5

    4282questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 297

miyoshi_work

score 59

管理画面上で登録した文章が表示される部分の、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のあるなしの判別ができず、どうすれば良いのかわからないのでご教授いただけると幸いです。


ソース

.wrap.fl_base.clearfix {
  background: #f1f1f1;
  padding: 8px;
  margin-bottom: 30px;
  width: 780px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-wrap: nowrap;
}
a.pink {
  display: inline-block;
  font-size: 12px;
  padding: 4px;
  color: #fff;
  background: #ff95bf;
}
a.blue {
  display: inline-block;
  font-size: 12px;
  padding: 4px;
  color: #fff;
  background: #95bbff;
}
h4 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin:0
}
h4 a {
  font-size: 18px;
  color: #6c7eca;
  font-weight: bold;
  width:auto;
  max-width: 500px;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
span.icon1 {
  background: #e66262;
  color: #fff;
  font-size: 12px;
  width: 120px;
  display: block;
  margin: 0 8px;
  height: 19px;
  line-height: 20px;
  padding: 0px 2px;
  text-align: center;
}
p.under {
  font-size: 12px;
  margin: 0;
}
.fl_inner.inner_left {
  flex: 1 0 auto;
}
.ptn3 a{
    max-width:570px;
}
.ptn4 a{
    max-width:647px;
}
.ptn5 a{
    max-width:640px;
}
.ptn6 a{
    max-width:710px;
}
.ptn7 a{
    max-width:780px;
}
<body>
<div class="wrap fl_base clearfix">
  <div class="fl_inner inner_left">
    <h4>
      <a href="">
        パターン1:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト
      </a>
      <span class="icon1">アイコン1</span>
    </h4>
    <p class="under">サブテキスト:アイコンが全て出ていて、文字数が長い場合</p>
  </div>
  <p class="fl_inner icon_wrap">
    <a href="#" target="_blank" class="pink">
      アイコン2
    </a>
    <a href="#" target="_blank" class="blue">
      アイコン3
    </a>
  </p>
</div>
<div class="wrap fl_base clearfix">
  <div class="fl_inner inner_left">
    <h4>
      <a href="">
        パターン2:メインテキスト
      </a>
      <span class="icon1">アイコン1</span>
    </h4>
    <p class="under">サブテキスト:”アイコン3”が非表示でかつ文字数が短い場合</p>
  </div>
  <p class="fl_inner icon_wrap">
    <a href="#" target="_blank" class="pink">
      アイコン2
    </a>
  </p>
</div>
<div class="wrap fl_base clearfix">
  <div class="fl_inner inner_left">
    <h4 class="ptn3">
      <a href="">
        パターン3:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト
      </a>
      <span class="icon1">アイコン1</span>
    </h4>
    <p class="under">サブテキスト:”アイコン3”が非表示でかつ文字数が長い場合</p>
  </div>
  <p class="fl_inner icon_wrap">
    <a href="#" target="_blank" class="pink">
      アイコン2
    </a>
  </p>
</div>
<div class="wrap fl_base clearfix">
  <div class="fl_inner inner_left">
    <h4 class="ptn4">
      <a href="">
        パターン4:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト
      </a>
      <span class="icon1">アイコン1</span>
    </h4>
    <p class="under">サブテキスト:”アイコン1”のみ表示の場合</p>
  </div>
</div>
<div class="wrap fl_base clearfix">
  <div class="fl_inner inner_left">
    <h4 class="ptn5">
      <a href="">
        パターン5:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト
      </a>
    </h4>
    <p class="under">サブテキスト:”アイコン1”のみ非表示の場合</p>
  </div>
  <p class="fl_inner icon_wrap">
    <a href="#" target="_blank" class="pink">
      アイコン2
    </a>
    <a href="#" target="_blank" class="blue">
      アイコン3
    </a>
  </p>
</div>
<div class="wrap fl_base clearfix">
  <div class="fl_inner inner_left">
    <h4 class="ptn6">
      <a href="">
        パターン6:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト
      </a>
    </h4>
    <p class="under">サブテキスト:”アイコン2”のみ表示の場合</p>
  </div>
    <p class="fl_inner icon_wrap">
    <a href="#" target="_blank" class="pink">
      アイコン2
    </a>
  </p>
</div>
<div class="wrap fl_base clearfix">
  <div class="fl_inner inner_left">
    <h4 class="ptn7">
      <a href="">
        パターン7:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト
      </a>
    </h4>
    <p class="under">サブテキスト:アイコンが全て出ていない場合</p>
  </div>
</div>
</body>

1/17 追記

すでに解決したのですが備忘録で…

下記の、x_x様の回答で問題なかったのですが、h4にline-height:1を指定するとWindowsのchromeで、アイコン1とh4のテキストが重なるという事が起きました。(Macでは起きず)

line-height:1.5;で解決。
原因がわかってないので時間ある時に調べます。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+3

<div class="wrap fl_base clearfix">
  <div class="fl_inner inner_left">
    <h4>
      <span class="icon1">アイコン1</span>
      <a href="#">
        パターン:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト
      </a>
    </h4>
    <span class="fl_inner icon_wrap">
      <a href="#" target="_blank" class="pink">
        アイコン2
      </a>
      <a href="#" target="_blank" class="blue">
        アイコン3
      </a>
    </span>
  </div>
  <p class="under">サブテキスト</p>
</div>
.wrap.fl_base.clearfix {
  margin-bottom: 30px;
  padding: 8px;
  width: 780px;
  background: #f1f1f1;
}

.fl_inner.inner_left {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}

h4 {
  display: inline-block;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #6c7eca;
}

h4 a {
  font-size: 18px;
  color: #6c7eca;
}

span.icon1 {
  display: inline-block;
  margin: 0 8px;
  padding: 0px 2px;
  float: right;
  width: 120px;
  height: 19px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  background: #e66262;
  color: #fff;
}

a.pink {
  display: inline-block;
  padding: 4px;
  font-size: 12px;
  background: #ff95bf;
  color: #fff;
}

a.blue {
  display: inline-block;
  padding: 4px;
  font-size: 12px;
  background: #95bbff;
  color: #fff;
}

p.under {
  margin: 0;
  font-size: 12px;
}

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

<div class="wrap fl_base clearfix">
  <div class="fl_inner inner_left">
    <h4>
      <span class="icon1">アイコン1</span>
      <a href="#">
        パターン:メインテキストメインテキストメインテキストメインテキストメインテキストメインテキストメインテキスト
      </a>
    </h4>
    <p class="under">サブテキスト</p>
  </div>
  <div class="fl_inner icon_wrap">
    <a href="#" target="_blank" class="pink">
      アイコン2
    </a>
    <a href="#" target="_blank" class="blue">
      アイコン3
    </a>
  </div>
</div>
.wrap.fl_base.clearfix {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  padding: 8px;
  width: 780px;
  background: #f1f1f1;
}

.fl_inner.inner_left {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h4 {
  display: inline;
  white-space: nowrap;
  color: #6c7eca;
}

h4 a {
  font-size: 18px;
  color: #6c7eca;
}

span.icon1 {
  display: inline-block;
  margin: 0 8px;
  padding: 0px 2px;
  float: right;
  width: 120px;
  height: 19px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  background: #e66262;
  color: #fff;
}

.fl_inner.icon_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
}

.fl_inner.icon_wrap > * {
  /* for IE */
  min-width: 60px;
  text-align: center;
}

.fl_inner.icon_wrap > * + * {
  margin-left: .5em;
}

a.pink {
  display: inline-block;
  padding: 4px;
  font-size: 12px;
  background: #ff95bf;
  color: #fff;
}

a.blue {
  display: inline-block;
  padding: 4px;
  font-size: 12px;
  background: #95bbff;
  color: #fff;
}

p.under {
  margin: 0;
  font-size: 12px;
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/11 16:54

    ありがとうございます!!組み方も綺麗でわかりやすいです!!

    仕様に
    ・アイコン2,アイコン3については枠の上下中央の右寄せに配置
    があるので、こちら流用でうまくできないか考えてみたいと思います。

    他に回答なさそうでしたらBAとさせていただきます!

    キャンセル

  • 2018/01/11 17:51

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

    キャンセル

  • 2018/01/12 10:17

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

    キャンセル

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

  • CSS

    6171questions

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

  • HTML5

    4282questions

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