フレックス犬

フレックス犬

この記事は横幅の広い画面で閲覧することを推奨します。

ある日、一個のFlexとして表示されているケージがありました。

ケージは何かが入ってくるのをずっと待っていました。

誰も入ってこない現状に暇を持て余していたその時、
三匹の犬がケージに入ってきました。



一匹の赤い犬は、「ワン」と吠えました。
瞬く間に赤い犬は伸び、空いていたスペースを全て陣取りました。



一匹の犬が吠えたと思えば、もう一匹の青い犬も「ワン」と吠えました。
すると、スペースの取り合いになるかと思いきや、ニ匹の犬はそれぞれでスペースを「均等に」分け合いました。



真ん中にいた緑の犬は窮屈そうです。
そう思っていたら、緑の犬が「ヨン」と吠えました。



緑の犬は、ヨンと吠えるなり他の犬より大きく伸びました。
ワンと吠えた赤と青の犬は縮んでいました。

待ってください…これは、ワン:ヨン:ワンの構成ではありませんか?



1
4
1

そんなことに気を取られていたら、猫が入ってきました。
猫は、他の犬がドラマティックに吠えて伸びているので、窮屈そうです。




猫が「ニャー」と鳴きました。




猫はニャーと鳴くので、猫は1:4:1:28で非常に広いスペースを持つことは周知の事実でしょう。
結局のところ犬は窮屈になってしまいました。犬は悲しみに暮れています。
思わず、吹き出しさえも自身の陣地からはみ出しています。

~おしまい~

使った技術

  • HTML5
  • CSS
  • Codesandbox
  • Firefox Developer Edition 132.0b8 64 bit
  • Windows 11 24H2 26100.2152 Insider Preview
  • Firefox の about:blank (プロトタイプの作成に使用)
  • Firefox の 開発ツール (プロトタイプの作成とデバッグに使用)
  • Visual Studio Code
  • Github
  • Win+. の絵文字ピッカー
  • Google 日本語入力
  • キーボード(US配列 TKL)
    • キースイッチ いっぱい
    • キーキャップ いっぱい
    • とそれを接続する基板
  • マウス
  • フルHD のモニター
  • 大量のケーブル
  • 電気会社から供給される電気

のびる

ホバーするかTabでアクティブにするとのびるよ




CodeSandbox

元々about:blankで書いていましたが、CodeSandboxで作り直しました。
記事部分も含めてCodeSandboxの中で書いています。元々の状態が見たい場合は、このCodeSandboxページから見れます。

CasualCSS

Posted by CYakigasi