【備忘録】display:tableで見出し作ったら結構良かった

ジェネーレションギャップは消費したコンテンツの違いがもたらすような気がする。若者の考えが分かんないっていうおじさんおばさんに若者が消費してる漫画アニメ映画小説雑談タイムラインラインのやりとりを浴びせたら若者の考えが分かると思う

CSS勉強中です。
ブログ本文中の見出しを作っていたのですが、背景にマークを書きたくなりまして。

SnapCrab_NoName_2017-7-10_11-56-4_No-00.png
こういう感じにしたくなったので、

<body>
  <h1>なにかものすごい見出し</h1>
</body>
h1 {
    display: inline-block;
    position: relative;
    margin: 75px 5px;
    z-index: 0;
}

h1::before {
    content: "";
    position: absolute;
    background: #a0e7ff;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

こんな風にしました。

結果は上の画像の通りになったので、早速使おうと思ったのですが……

SnapCrab_NoName_2017-7-10_11-57-45_No-00.png

まぁ、当然inline-blockでインラインにしてあるので、前後に文章があるとこうなっちゃうわけですよ。
でも見出しなので前後に改行を設けてほしかったのです。
かと言ってdisplay:block要素にしてしまうと幅が100%になってしまうので、後ろの円が文字の見出し文の真ん中ではなくて画面の真ん中に来てしまうんですよね。
見出し文は不定なので、あらかじめwidthを指定することもできず…。

つまり、幅がコンテンツに合わせて変形し、かつブロックのような要素がほしいわけです。
必死にinline-blockの前後に改行を挟む方法などを調べましたがよくわかりませんでした。
しかし、display:tableというスタイルを見つけました。
これを指定すると、インライン要素のように幅はコンテンツに合わせますが、ブロック要素のように前後に改行されるようになります(だいぶ適当な説明)です。
本来はテーブルのようなレイアウトを作るときに使いますが、今回の目的にぴったりだったので使用してみました。
さきほどのCSSのdisplayをdisplay: tableに変更します。
すると
SnapCrab_NoName_2017-7-10_12-4-59_No-00.png

おお、イメージ通りになりました。
ありがとう、display:table

つ、つかれた……もっと簡単にできる方法があったら教えてほしい……

[紹介元] CSSタグが付けられた新着投稿 – Qiita 【備忘録】display:tableで見出し作ったら結構良かった

  • コメント

    1. 匿名希望
      2017/08/18(金) 14:59:27

      ジェネーレションギャップは消費したコンテンツの違いがもたらすような気がする。若者の考えが分かんないっていうおじさんおばさんに若者が消費してる漫画アニメ映画小説雑談タイムラインラインのやりとりを浴びせたら若者の考えが分かると思う

    記事に戻る

関連記事