CSS
CSS詳細度とは｜計算方法・優先順位・!important・詳細度を上げる/下げる方法
CSSの詳細度と優先順位を初心者向けに解説します。ID、class、タグ、インラインスタイル、!importantの強さ、同じ詳細度なら後に書いたCSSが勝つ仕組み、詳細度を上げる・下げる方法まで整理します。
CATEGORY
CSS
CSSに関する基礎、実装例、トラブル解決の記事をまとめています。
54ARTICLES
CSS
SVGをCSSでレスポンシブにする方法｜viewBox・width・heightの設定
SVGを縦横比を保ったままレスポンシブ表示するCSSを解説。viewBox、width:100%、height:autoの役割、インラインSVGとimg要素の違い、縮まない・はみ出す原因も整理します。
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でフォントを指定する方法｜font-family・Webフォント・日本語の設定
CSSのfont-familyで日本語フォントを指定する基本を解説。フォールバック、総称ファミリー、Webフォント、font-display、可変フォント、表示速度と読みやすさの注意点を紹介します。
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文字アニメーションのサンプル集｜流れる・一文字ずつ・左から右・CSSのみ
CSSのみで作れる文字アニメーションのサンプル集です。流れるテキスト、左から右に表示、一文字ずつ表示、フェードイン、下からふわっと表示など、HTMLとCSSのコード例をまとめます。
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で紹介します。
CSS
CSS見出しデザイン集｜h2・h3に使える装飾サンプル
CSSでh2・h3見出しを装飾するコピペサンプルを20種類まとめました。左線、下線、背景付き、番号付き、吹き出し風、上下線、英字ラベル、グラデーション、チェック付きなど、ブログやWebサイトで使いやすい見出しデザインを紹介します。
CSS
CSSヘッダーデザイン集｜ロゴ・ナビ・固定ヘッダーの作り方
CSSで作るヘッダーデザインのコピペ集です。ロゴとナビの横並び、中央寄せ、固定ヘッダー、CTAボタン、検索窓、スマホ対応など、HTMLとCSSの例を20個紹介します。
CSS
CSS Gridの使い方｜2列・レスポンシブ・repeat・grid-area・flexとの使い分け
CSS Gridの基本から、2列・3列レイアウト、repeat、minmax、auto-fit、レスポンシブな列数可変、grid-area、中央寄せ、flexとの使い分けまで、コード例でわかりやすく解説します。
CSS
CSSフォームデザイン集｜input・select・checkboxのコピペ例
CSSでフォームを見やすく整えるコピペ例を20個まとめました。input、textarea、select、checkbox、radio、送信ボタン、エラー表示、検索フォームなど、問い合わせフォームに使いやすいデザインを紹介します。
CSS
CSS flexの使い方｜横並び・中央寄せ・均等幅・折り返し・高さを揃える方法
CSS flexの基本から、横並び、中央寄せ、justify-content、align-items、flex: 1、均等幅、折り返し、高さを揃える方法まで解説します。flexがずれる、均等にならない、高さが揃わないときの原因と直し方も整理します。
CSS
CSS displayの使い方｜インライン・ブロック・display: contentsまで解説
CSS displayの使い方を、インライン要素とブロック要素の違いから解説します。div・span・pの改行、inline/block/inline-block/flex、display: contentsの使い方とアクセシビリティ上の注意点まで整理します。
CSS
CSS中央寄せまとめ｜上下左右中央・画像・テキスト・div別に解説
CSSで中央寄せする方法を20パターンに分けてまとめました。テキスト、画像、div、ボタン、上下左右中央、flex、grid、absoluteの使い分けと、中央寄せできない原因を解説します。
CSS
CSSカードデザイン集｜レスポンシブ対応のコピペサンプル
CSSで作るカードデザインを20種類まとめました。基本カード、画像付きカード、横長カード、リンクカード、プロフィール、料金、レビュー、記事カード、商品カードなど、HTMLとCSSをコピペしやすい形で紹介します。
CSS
CSSボタンデザイン集｜コピペで使えるシンプル・おしゃれなボタン
CSSだけで作れるボタンデザインを20種類まとめました。シンプルなボタン、枠線、角丸、横幅いっぱい、アイコン付き、グラデーション、影付き、ボタングループ、固定CTAなど、HTMLとCSSをコピペしやすい形で紹介します。