The Acorn Spirit's Journey

GridガントチャートのCSS/HTMLのサンプルです。※動的化が前提です。 サンプルhtmlはこちら ※Bootstrap使用。※Grid関連、細部のcssはhtml内に書いてます。　　

まず、bootstrap5のソースファイルをダウンロード。https://getbootstrap.com/docs/5.1/getting-started/download/#source-files 　 _varia…

orientation: portrait 　→　縦長orientation: landscape　→　横長 ビューポートが縦長なのか横長なのかで※デバイスが縦向き横向きでなく見た目を厳密に整えたいときに（私個人的には）…

流行りですねー。ここ最近、よく見るかなーと思います。私もよく使います(●´ω｀●) とても簡単。adobe XDにも「背景のぼかし」という項目がありますね。これを実現するのが、backdrop-filter: blurに…

BootstrapのTogglable tabsと、Collapse Accordionを使って レスポンシブ（768px以上）ではタブ、767px以下ではアコーディオンにする。 ●768px以上 ●767px以下 ●H…

BootstrapのGrid systemを使って、table-stripedな見た目にしつつ レスポンシブ（768px以上）では横4列、767px以下では横2列にする。 テキストは上下中央に。 ●768px以上 ●76…