記載日2023/12/2
更新日2023/12/12
フロントエンドを学び始めた時に、HTMLのdisplayの挙動が理解し難かったので、容易に動きを確認できるツールを作ってみました。 "On ～" ボタンを押すことで、設定のあるなしでの見え方の変化を確認できます。
ツールで確認できるプロパティは flex, inline-flex, block, inline-block, grid の５つです。
ツールは こちら （ "Go CSS Display Page" ボタンでツールページへ移動してください。）
HTMLを現在学んでいる方に対して、少しでも役にたてばと思います。
より詳しいことが知りたい方は、”参考にさせて頂いたサイト”を確認ください。
ツールの概要
ツールの画面は以下のような感じです。
"HTMLの記述エリア" と "ブラウザの見え方エリア" の２つが表示されます。
画面上部のセレクタから以下５つのどれかを選択し、”HTMLの記述エリア”にあるボタン（"On ~"）を押すと、スタイルのあり／なしの変化が確認できます。
・display : flex
・display : inline-flex
・display : block
・display : inline-block
・display : grid
また、画面下部の "Set outline / Remove outline" ボタンを押すことで、HTMLエレメントに枠線が表示されて、エレメント配置がどのように変化するかも確認できます。
参考にさせて頂いたサイト