実現方法がパッと思いつかなかった CSS の実装

はじめに

本記事は Qiita Advent Calendar 2022 の 17 日目です！

自分が UI の実装を進めていく中で、実現方法に辿り着くのに少し時間がかかった CSS の実装を紹介します！

ある要素の上方向に、高さが可変の小窓を余白を空けたうえで表示する

例えばボタンを押した際に、そのボタンの上方向に吹き出しのような小窓を表示させたいとします。
その小窓の高さが固定で余白も必要ない場合は、以下のような形で実装ができます。

See the Pen Untitled by taka-k (@taka-k) on CodePen.

• ボタンを div タグ等で囲み、そのタグに position: relative; を指定する
• その div タグ内に小窓のタグを入れ、小窓のタグに以下の CSS を指定する
  • bottom: 100%;
  • position: absolute;
  • z-index: 1;
    • 小窓を前面に出したい場合

要は、bottomに小窓の高さと同じ値を指定してあげれば良いわけです。

ただ、小窓内の要素の高さが決まっておらず、一定の距離を離して表示したい場合は上記の手段は使えません。
試行錯誤した結果、以下のように指定するとうまくいきました。

See the Pen Untitled by taka-k (@taka-k) on CodePen.

• 基本的には高さが固定の場合の指定方法のままでOK
• bottomのみ、calc(100% + {余白の幅})のように指定する

calc で高さを計算し、それを bottom に指定することで高さ分離して表示してくれるわけですね。
そして余白を空けたい場合は、calc(100% + 8px)のように余白分の幅をプラスしたうえで計算するとうまくいきます。
わかってしまえば単純ですが、閃くまでに結構時間がかかりました...

文字列の左右に border を表示する

See the Pen 文字列の左右に border を表示する by taka-k (@taka-k) on CodePen.

• 文字列タグに以下の CSS を指定する
  • align-items: center;
  • display: flex;
• 文字列タグに::before、::after擬似要素で以下の CSS を指定する
  • background-color: rgba(0, 0, 0, 0.12);
    • 色はお好みで
  • content: "";
  • flex-grow: 1;
  • height: 1px;
    • 線の高さなのでお好みで

文字列と border の間に余白を空けたい場合は、それぞれの擬似要素に margin-left及びmargin-right を指定してあげるとうまくいきます。