CSS

サイトを彩る CSS

Astro での CSS カスケードレイヤーの順序の管理：問題ケースと解決方法

CSS の @layer を Astro で書いた時、意図しないレイヤー順序になるケースがありました。その問題となるケースと injectScript などによる対策です。

CSS の color-mix() 関数に指定する色空間によって、どれほど色が異なるのかが分かる一覧を作りました。

CSS の clamp() を使えば、ビューポートに応じて大きさが変わるフォントサイズを指定できます。その clamp() を生成する Sass の独自関数です。

サイトのアクセントとしてよく見かける円をぼかす CSS の紹介です。

CSS の filter: blur() を使い、円をぼかして作るグラデーションの紹介です。contrast() などで色の調整もできます。

「アクティブなメニューやタブ」と「その他の部分」の境界の角を丸くする CSS の紹介です。box-shadow を使い、湾曲を表現します。

「左から徐々に表示」「上下から徐々に表示」など画像を徐々に表示する CSS を使ったアニメーションの紹介です。

グラデーションを使った見出しデザインのサンプル集。CSS を紹介しています。

単色の背景色がグラデーションに変化するホバーエフェクトの CSS 指定方法の紹介です。

指定した色と相性の良い色を提案するカラーパレット生成ツール「ColorSpace」の紹介です。グラデーションを生成する機能もあります。

グラデーションのボーダーを簡単に指定できる CSS プロパティ border-image の説明です。

WordPress テーマ Simplicity で本文中の画像をモバイル端末の画面幅いっぱいに表示するカスタマイズの紹介です。

Simplicity のインデックスリストのサムネイルが、左右交互に並ぶ CSS カスタマイズの紹介です。

画像に対する CSS のホバーエフェクトの紹介です。

Simplicity の一覧リストのスタイル「タイル 2列」と「タイル 3列」の行をそろえる CSS のカスタマイズです。

Simplicity のメニューのカスタマイズです。「プラグイン使わず Font Awesome アイコンを表示する」などを解説しています。