CSS
z-indexが効かない原因と直し方｜重なり順・position・stacking context
CSSのz-indexが効かない原因と直し方を20項目で解説します。position、親要素、stacking context、transform、opacity、overflowの影響など、重なり順のトラブルを整理します。
CATEGORY
CSS
CSSに関する基礎、実装例、トラブル解決の記事をまとめています。
54ARTICLES
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で紹介します。
CSS
CSS見出しデザイン集｜h2・h3に使える装飾サンプル
CSSでh2・h3見出しを装飾するコピペサンプルを20種類まとめました。左線、下線、背景付き、番号付き、吹き出し風、上下線、英字ラベル、グラデーション、チェック付きなど、ブログやWebサイトで使いやすい見出しデザインを紹介します。
CSS
CSSヘッダーデザイン集｜ロゴ・ナビ・固定ヘッダーの作り方
CSSで作るヘッダーデザインのコピペ集です。ロゴとナビの横並び、中央寄せ、固定ヘッダー、CTAボタン、検索窓、スマホ対応など、HTMLとCSSの例を20個紹介します。
CSS
CSSフォームデザイン集｜input・select・checkboxのコピペ例
CSSでフォームを見やすく整えるコピペ例を20個まとめました。input、textarea、select、checkbox、radio、送信ボタン、エラー表示、検索フォームなど、問い合わせフォームに使いやすいデザインを紹介します。
CSS
CSS中央寄せまとめ｜上下左右中央・画像・テキスト・div別に解説
CSSで中央寄せする方法を20パターンに分けてまとめました。テキスト、画像、div、ボタン、上下左右中央、flex、grid、absoluteの使い分けと、中央寄せできない原因を解説します。
CSS
CSSカードデザイン集｜レスポンシブ対応のコピペサンプル
CSSで作るカードデザインを20種類まとめました。基本カード、画像付きカード、横長カード、リンクカード、プロフィール、料金、レビュー、記事カード、商品カードなど、HTMLとCSSをコピペしやすい形で紹介します。
CSS
CSSボタンデザイン集｜コピペで使えるシンプル・おしゃれなボタン
CSSだけで作れるボタンデザインを20種類まとめました。シンプルなボタン、枠線、角丸、横幅いっぱい、アイコン付き、グラデーション、影付き、ボタングループ、固定CTAなど、HTMLとCSSをコピペしやすい形で紹介します。
CSS
CSSアニメーション付きボタン集｜光る・広がる・矢印が動く
CSSだけで作れるアニメーション付きボタンを20個まとめました。光る、背景が広がる、矢印が動く、押し込み、ローディング風など、コピペできるHTMLとCSSを紹介します。
CSS
CSSバッジ・ラベル・タグデザイン集｜カテゴリ表示に使える例
CSSで作れるバッジ・ラベル・タグのデザイン集です。カテゴリ、NEW表示、ステータス、通知数、割引、必須ラベル、タグ一覧など、ブログやUIで使いやすいコピペ例を20個紹介します。
CSS
CSS背景デザイン集｜グラデーション・斜め背景・ドット柄
CSSで作れる背景デザインのコピペ集です。グラデーション、斜め背景、ドット柄、ストライプ、分割背景、背景画像の重ね方など、Webサイトのセクションに使いやすい例を20個紹介します。
CSS
CSS文字アニメーションのサンプル集｜流れる・一文字ずつ・左から右・CSSのみ
CSSのみで作れる文字アニメーションのサンプル集です。流れるテキスト、左から右に表示、一文字ずつ表示、フェードイン、下からふわっと表示など、HTMLとCSSのコード例をまとめます。
CSS
SVGをCSSでレスポンシブにする方法｜viewBox・width・heightの設定
SVGを縦横比を保ったままレスポンシブ表示するCSSを解説。viewBox、width:100%、height:autoの役割、インラインSVGとimg要素の違い、縮まない・はみ出す原因も整理します。
CSS
unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順
おしゃれなSVGファイルを無料で扱っているunDrawのSVGファイルを、無料から使えるデザインツールであるFigmaで加工して、SVGファイルをCSSでアニメーションさせるための下準備の手順を紹介します。
CSS
【SCSS】background-imageで画像配列をforループ文で表示させる方法
SCSS(SASS)のfor文を使って、background-imageで画像配列をループさせる方法を紹介します。
CSS
CSS変数を使ってみよう
CSS変数を使うことで、修正・変更対応がしやすくなり、その際のミスも劇的に減らすことができます。 管理もしやすくなるので、CSS変数の使い方を学んでいきましょう。 CSS変数ってどう便利なの？ まずは、CSS変数が使える…
CSS
CSS Gridの使い方｜2列・レスポンシブ・repeat・grid-area・flexとの使い分け
CSS Gridの基本から、2列・3列レイアウト、repeat、minmax、auto-fit、レスポンシブな列数可変、grid-area、中央寄せ、flexとの使い分けまで、コード例でわかりやすく解説します。
CSS
レスポンシブWebデザインのCSS入門｜メディアクエリと実装例
レスポンシブWebデザインの基本を、viewport、流動幅、画像、メディアクエリ、Gridの実例で解説。ブレークポイントの決め方、モバイルファースト、文字拡大と実機確認も紹介します。