この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック

モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと…

【React/Vue.js】コンポーネント指向と好相性なCSS Modulesを用いたCSS設計について｜Offers Tech Blog

概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、CSS Modules を用いたコンポーネントの CSS 設計について紹介します。 コンポーネントを作成する際に、どのような CSS 設計にすればいいのか悩んだ方も多いのではないでしょうか。（筆…

CSSでフッターの下に隙間ができないようにメインコンテンツの高さを調整する

メインコンテンツの高さが足りなくてもフッターが中途半端な位置に来ないようにしたい Webアプリケーションのレイアウトで、①ヘッダー②メインコンテンツ③フッターの3つで構成するというパターンはよくあると思うんですが、 👇 こんな感じでフッターの下に中途半端な隙間を作りたくないですよね。 これは困る 👇 メインコ…

CSSは確実に進化している！ 新機能、単位を変数として利用できる「Variable Units（変数単位）」

今年になってもCSSの進化が止まりません、むしろ加速しています！ IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数（カスタムプロパティ）を使えるようになったのはありがたいですね。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ そしてCSSの新機…

これなら簡単で便利！ Tailwind CSSのチートシートをすばやく表示できるChromeの機能拡張

簡単にすばやく表示できる、Tailwind CSSのチートシートを紹介します。Chromeの機能拡張で、ツールバーから1クリックでチートシートを表示できます。 チートシートは、Tailwind CSS v.3対応。Tailwind CSSの各クラスセレクタとそのプロパティと値が一覧でき、コピペで簡単に利用できます。 Tailwind Cheat Sheet inside …

本文エリア内の要素をpaddingのないコンテナとして実装する

CSSにおいて、コンテナと呼ばれるパターンがある。たとえば次のような実装を指している。 .container { box-sizing: content-box; max-width: 60rem; margin-right: auto; margin-left: auto; padding-right: 1.25rem; padding-left: 1.25rem; } この実装の特徴は、ビューポートの幅が広いときには要素の内容物が中央揃…