CSS
CSS :has()の使い方｜親要素を変える3つのデモとフォールバック
CSS :has()で、画像の有無・チェック状態・focus-visibleに応じて親要素を変える例を紹介。保存して試せるHTML/CSSと、非対応時に入力欄を隠さない基本表示、JavaScriptとの役割分担を解説します。
CATEGORY
CSS
CSSに関する基礎、実装例、トラブル解決の記事をまとめています。
60ARTICLES
CSS
h1・h2・h3の階層デザイン｜サイズ比と余白をCSS変数でそろえる
見出しを個別に飾る前に、h1〜h3のサイズ比と余白を記事全体で比較。操作できるプレビュー、CSS変数とclampの雛形、番号の扱い、theme.jsonへの写し方を紹介します。
CSS
CSSグラデーションジェネレーター｜色・角度・OKLCHを選んでコピー
直線・放射・円錐のグラデーションを記事内で作成。2〜5色の位置、角度、sRGBとOKLCH、繰り返しを切り替え、単色フォールバック付きのCSSをコピーできます。
CSS
CSS @starting-styleの使い方｜display:noneから開く動きを実演
CSS @starting-styleをPopoverの実働デモで解説。初回表示、display:none、:popover-open、transition-behavior: allow-discrete、非対応時の設計が分かります。
CSS
CSS Anchor Positioningの使い方｜吹き出し追従デモとフォールバック
CSS Anchor Positioningを動かせる吹き出しデモで解説。anchor-name、position-anchor、position-area、position-try-fallbacksと未対応時の対処が分かります。
CSS
CSSスクロール連動アニメーションの作り方｜scroll()実働デモ付き
CSS Scroll-driven Animationsを実働デモで解説。animation-timeline: scroll()、view()、animation-range、進捗バー、フォールバックと使い分けが分かります。
CSS
CSSでフォントを指定する方法｜font-family・Webフォント・日本語の設定
CSSのfont-familyで日本語フォントを指定する基本を解説。フォールバック、総称ファミリー、Webフォント、font-display、可変フォント、表示速度と読みやすさの注意点を紹介します。
CSS
CSS flexの使い方｜横並び・中央寄せ・均等幅・折り返し・高さを揃える方法
CSS flexの基本から、横並び、中央寄せ、justify-content、align-items、flex: 1、均等幅、折り返し、高さを揃える方法まで解説します。flexがずれる、均等にならない、高さが揃わないときの原因と直し方も整理します。
CSS
SVGをCSSでレスポンシブにする方法｜viewBox・width・heightの設定
SVGを縦横比を保ったままレスポンシブ表示するCSSを解説。viewBox、width:100%、height:autoの役割、インラインSVGとimg要素の違い、縮まない・はみ出す原因も整理します。
CSS
【SCSS】background-imageで画像配列をforループ文で表示させる方法
SCSS(SASS)の@forループで、連番の画像をbackground-imageに順番に指定する方法を紹介します。through・toの違い、#{}インターポレーションの使い方、10枚以上のときのゼロ埋め、Dart Sassでの動作まで説明します。
CSS
unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順
おしゃれなSVGファイルを無料で扱っているunDrawのSVGファイルを、無料から使えるデザインツールであるFigmaで加工して、SVGファイルをCSSでアニメーションさせるための下準備の手順を紹介します。
CSS
CSS文字アニメーションのサンプル集｜流れる・一文字ずつ・左から右・CSSのみ
CSSのみで作れる文字アニメーションのサンプル集です。流れるテキスト、左から右に表示、一文字ずつ表示、フェードイン、下からふわっと表示など、HTMLとCSSのコード例をまとめます。
CSS
CSS詳細度とは｜計算方法・優先順位・!important・詳細度を上げる/下げる方法
CSSの詳細度と優先順位を初心者向けに解説します。ID、class、タグ、インラインスタイル、!importantの強さ、同じ詳細度なら後に書いたCSSが勝つ仕組み、詳細度を上げる・下げる方法まで整理します。
CSS
レスポンシブWebデザインのCSS入門｜メディアクエリと実装例
レスポンシブWebデザインの基本を、viewport、流動幅、画像、メディアクエリ、Gridの実例で解説。ブレークポイントの決め方、モバイルファースト、文字拡大と実機確認も紹介します。
CSS
CSS positionの使い方｜relative・absolute・fixed・stickyの違い
CSS positionのstatic・relative・absolute・fixed・stickyを実例で解説。基準となる包含ブロック、z-index、スクロール時の挙動、効かない原因とアクセシビリティ上の注意を整理します。
CSS
CSSのhsl()で色を指定する方法｜透明度・CSS変数・配色例
CSSのhsl()を使い、色相・彩度・明度から色を指定する方法を解説。透明度の書き方、CSS変数での配色管理、ホバー色や薄い背景色を作る実例、コントラストの注意点を紹介します。
CSS
CSSの書き方と読み込み方法｜外部・内部・インラインの使い分け
CSSの基本構文と3つの読み込み方法を初心者向けに解説。外部CSSを基本に、style要素・style属性の使い分け、セレクター、詳細度、WordPressでの正しい読み込みまで紹介します。
CSS
CSS calc()の使い方｜四則演算・CSS変数・clamp()との使い分け
CSS calc()で異なる単位を計算する方法を解説。四則演算の空白ルール、CSS変数との組み合わせ、固定ヘッダーを引く高さ、clamp()・min()・max()との使い分けを紹介します。
CSS
CSSのボックスモデルとbox-sizing｜widthがはみ出す原因を図解
CSSのcontent・padding・border・marginから成るボックスモデルとbox-sizingを解説。width:100%がはみ出す理由、border-boxの基本設定、DevToolsでの確認方法を紹介します。
CSS
z-indexが効かない原因と直し方｜重なり順・position・stacking context
CSSのz-indexが効かない原因と直し方を20項目で解説します。position、親要素、stacking context、transform、opacity、overflowの影響など、重なり順のトラブルを整理します。
CSS
CSSサイドバー付き2カラムレイアウトの作り方
CSSでメインコンテンツとサイドバーの2カラムレイアウトを作る方法を20パターンで解説します。Gridとflex、左サイドバー、sticky、スマホ1列、崩れ対策まで紹介します。
CSS
CSS文字装飾集｜マーカー線・下線・縁取り・グラデーション文字
CSSで文字を装飾するコピペサンプル集です。蛍光ペン風マーカー、下線、波線、縁取り文字、グラデーション文字、注目テキストなど、ブログやLPで使いやすい例を20個紹介します。
CSS
CSSテーブルデザイン集｜見やすい表とスマホ対応の作り方
CSSでtableを見やすくするデザイン集です。シンプルな表、ストライプ表、見出し固定風、スマホ横スクロール対応、料金表、比較表など、コピペしやすいHTMLとCSSを20個紹介します。
CSS
CSSフッターを下に固定する方法｜画面下・最下部・sticky footer
CSSでフッターを画面下やページ最下部に配置する方法を20パターンで解説します。sticky footer、fixed footer、flex、grid、固定CTA、本文に重ならない余白の取り方を整理します。
CSS
CSSレスポンシブカード一覧｜Grid・flexで自動折り返し
CSS Gridとflexでレスポンシブなカード一覧を作る方法を20パターンで解説します。auto-fit、minmax、flex-wrap、高さ揃え、画像比率、スマホ対応のコピペコードを紹介します。
CSS
CSSが効かない原因まとめ｜反映されない・上書きできない時の確認
CSSが効かない・反映されない原因を初心者向けに20個まとめました。CSSファイルの読み込み、セレクタ、詳細度、キャッシュ、記述順、displayやpositionの勘違いまで確認手順で解説します。
CSS
CSSローディングアニメーション集｜CSSのみで作るスピナー
CSSのみで作れるローディングアニメーション集です。スピナー、ドット、バー、スケルトンローディング、ボタン内ローダーなど、HTMLとCSSをコピペして使える例を20個紹介します。
CSS
CSSリストデザイン集｜ul・olをおしゃれにするコピペ例
CSSでul・ol・dlのリストを見やすく整えるコピペ例を20個まとめました。チェックリスト、番号付き、カード風、横並び、タイムライン、ランキングなど、箇条書きをおしゃれにする方法を紹介します。
CSS
CSS画像の上に文字を重ねる方法｜オーバーレイ・中央配置
CSSで画像の上に文字を重ねる方法を20パターンで解説します。中央配置、暗いオーバーレイ、左下配置、グラデーション、ホバー表示、レスポンシブ対応までコピペ例で紹介します。
CSS
CSSホバーエフェクト集｜ボタン・画像・テキストのコピペサンプル
CSSのhoverで使えるエフェクトを20種類まとめました。ボタンが浮く、背景色が変わる、画像がズームする、テキストに下線が伸びる、カードが浮く、キャプションが出るなど、コピペしやすいHTMLとCSSで紹介します。