かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

CSS完全に理解した

Google の新しい棒でも話題の「CSS完全に理解した」をやってみた。

CSS完全に理解した
Gboard 棒バージョン - YouTube

CSS 完全に理解した!

俺のアンサーはこれだ!!!

See the Pen CSS 完全に理解した by KIKIKI (@kikiki_kiki) on CodePen.

コード

HTML はとてもシンプルに

<div class='css center'>CSS<wbr>完全に理解した</div>

<wbr> を使って改行箇所の指定を入れているのがポイント。半角英数の後には半角スペース入れる派なので overflow-wrapword-break をいい感じに指定しておけば CSS の後で改行されるはずだけど <wbr> 使ってみたかっただけ。半角スペース入れないなら普通に <br> で良いと思う。

CSS

:root {
  --box-width: 8em;
  --box-padding: 1rem;
  --translate-x: 3.5rem;
}

.css {
  position: relative;
  display: block;
  padding: var(--box-padding);
  overflow-wrap: break-word;
  word-break: keep-all;
  width: var(--box-width);
  transform: translateX(var(--translate-x));
}

.css:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,1);
  border-radius: 1em;
  transform: translateX(calc(-1 * var(--translate-x)));
}

:before 要素をフレームにしてズラしているだけって単純な構成です。
ポイントとしては同じ CSS 変数をネガティブ値に変換する方法に calc で calc(-1 * var(--translate-x)) って無駄な頑張りをしてるくらいかな

所管

遊んででナウでヤングな新しい CSS の知らないことたくさんあるな〜ってなった。定期的にこういう遊びをやるのは学びになりそう。

色々サンプルが載ってる Qiita も発見しました。みんな「CSS 完全に理解した」好きだよね!!

みんなの「CSS 完全に理解した」も見せてくれ〜!!


[参考]