html・css

See the Pen CSSで背景画像の位置を固定 by ボヘミアン (@bohe) on CodePen.

価格の値引きや割引を表現する際によく使用される斜めの取り消し線。CSSを使って実装する方法をご紹介します。 See the Pen CSSで価格表記に斜めの線を入れる by ボヘミアン (@bohe) on CodePen.実装のポイントp...

See the Pen CSSでルビの位置を調整する by ボヘミアン (@bohe) on CodePen.

See the Pen CSSのcolumnで新聞や雑誌のような段組みを実現 by ボヘミアン (@bohe) on CodePen.

See the Pen コンテナクエリで要素のサイズでスタイルを変更する by ボヘミアン (@bohe) on CodePen.

See the Pen CSSで目次に番号を付ける by ボヘミアン (@bohe) on CodePen.

See the Pen CSS変数を使ったメディアクエリの書き方 by ボヘミアン (@bohe) on CodePen.

See the Pen Untitled by ボヘミアン (@bohe) on CodePen.

「width >= 400px」によりビューポート（ブラウザウィンドウ）の幅が400px以上の時にテキストのカラーが赤になります。 See the Pen モダンCSSで使える直感的なメディアクエリ記法 by ボヘミアン (@bohe) o...

以前はjsを利用しないと内容量によってテキストエリアのサイズを自動で変化させることはできませんでしたが、「field-sizing: content;」によってそれが可能になりました。「min-width: 300px;」で最小、「max-...

「mix-blend-mode: overlay;」で画像の上にある「ブレンドテキスト」を画像の色とオーバーレイでブレンドしています。 See the Pen mix-blend-modeで画像を装飾する by ボヘミアン (@bohe) ...

「isolation: isolate;」 は新しいスタッキングコンテキスト（重なり順の文脈）を作成するCSSプロパティで、z-indexの影響範囲を制限することができます。この場合「.parent」内で要素の重なり順を親要素内に封じ込める...

「.list li .color-red」はlistクラスの中のli要素の中にあるcolor-redクラスを持つ要素の文字色を赤にします。「.list li:not(:has(.color-red))」はlistクラスの中のli要素のうちc...

「.list li:not(.color-blue)」の「:not」否定疑似クラスで.color-redが適用されていないliのカラーをredにしています。 See the Pen Untitled by ボヘミアン (@bohe) on ...

See the Pen gridで複数の要素を上下左右中央寄せにする by ボヘミアン (@bohe) on CodePen.

See the Pen gridで要素を左右の中央寄せにする by ボヘミアン (@bohe) on CodePen.

img要素にloading属性のlazyを記述すると画像が遅延読み込みになりサイトの表示の高速化につながります。またこの際widthとheightを記載してレイアウトシフトを防ぎCSSでレスポンシブ対応させます。 See the Pen 画...

See the Pen insetでカード全体にリンクを広げる by ボヘミアン (@bohe) on CodePen.

See the Pen :where()疑似クラスでセレクタをまとめる by ボヘミアン (@bohe) on CodePen.

See the Pen currentColorで現在のカラーを参照する by ボヘミアン (@bohe) on CodePen.