CSS
CSSホバーエフェクト集｜ボタン・画像・テキストのコピペサンプル
CSSのhoverで使えるエフェクトを20種類まとめました。ボタンが浮く、背景色が変わる、画像がズームする、テキストに下線が伸びる、カードが浮く、キャプションが出るなど、コピペしやすいHTMLとCSSで紹介します。
CATEGORY
CSS
CSSに関する基礎、実装例、トラブル解決の記事をまとめています。
61ARTICLES
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 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をコピペしやすい形で紹介します。
CSS
CSSアニメーション付きボタン集｜光る・広がる・矢印が動く
CSSだけで作れるアニメーション付きボタンを20個まとめました。光る、背景が広がる、矢印が動く、押し込み、ローディング風など、コピペできるHTMLとCSSを紹介します。
CSS
CSSバッジ・ラベル・タグデザイン集｜カテゴリ表示に使える例
CSSで作れるバッジ・ラベル・タグのデザイン集です。カテゴリ、NEW表示、ステータス、通知数、割引、必須ラベル、タグ一覧など、ブログやUIで使いやすいコピペ例を20個紹介します。
CSS
CSS背景デザイン集｜グラデーション・斜め背景・ドット柄
CSSで作れる背景デザインのコピペ集です。グラデーション、斜め背景、ドット柄、ストライプ、分割背景、背景画像の重ね方など、Webサイトのセクションに使いやすい例を20個紹介します。
CSS
CSSアニメーションの作り方｜transition・animation・keyframesとサンプル集
CSSアニメーションの作り方を、transition、animation、@keyframesの違いから解説します。フェードイン、ふわっと表示、ゆらゆら、ボタン、ローディングなど、コピペしやすいサンプルと注意点をまとめます。
CSS
CSSで影をつけるためのプロパティと具体例
CSSでテキストやボタンに影をつける方法をみていきましょう。 まずは、基本的なことから勉強しましょう。 CSSで影をつけるためのプロパティ box-shadowプロパティとtext-shadowプロパティがありあす。 そ…
CSS
CSSで背景をスタイリングする
背景は面積が大きいため、WebサイトやWebアプリに与える印象はとても大きいです。 そんな背景を整えることができるCSSをみていきましょう。 背景のスタイリングするためのCSS background-colorで背景の色…
CSS
CSSでfloatを使いこなす
floatプロパティを使うと、要素を右に表示したりすることができます。 サイドバーや細かい部品に使うことも多く、理解しておく必要があります。 CSSのfloatの使い方 floatプロパティを使うと、要素を右や左などに動…
CSS
CSSの基本セレクターを学んで使ってみよう。
HTMLとCSSを紐付けるために使うのが、セレクターです。 CSSのセレクターの知識は自由にHTMLを装飾する上で基本的な土台となるので、しっかりと学んでいきましょう。 CSSの基本セレクターの種類 要素型セレクター 要…
CSS
セレクターを組み合わせて自由に指定する方法（結合子）
CSSには、複数の組み合わせ方法があり、それらを使いこなすことで、より短く記述したり、自由に装飾することができます。 その組み合わせの際に使う記号のことを、結合子といいます。 どんな組み合わせ方法があるのか、どの結合子を…
CSS
属性セレクターの便利な指定方法（前方一致、後方一致、部分一致）
属性セレクターには、便利は指定方法があるので、みていきましょう。 属性セレクターの便利な指定方法 完全一致 → [【属性】=”【値】”]で、【属性】が【値】の要素 前方一致 → [【…
CSS
CSS変数を使ってみよう
CSS変数を使うことで、修正・変更対応がしやすくなり、その際のミスも劇的に減らすことができます。 管理もしやすくなるので、CSS変数の使い方を学んでいきましょう。 CSS変数ってどう便利なの？ まずは、CSS変数が使える…
CSS
CSSでリストをスタイリングする方法
リストのスタイリングが少し違うだけでかなりおしゃれに見えたり、独自性を出すことができます。 CSSでリストをスタイリングする方法をみていきましょう。 CSSでリストをスタイリングする方法 リストをスタイリングするときに特…
CSS
CSSの色の指定方法とそれぞれのメリット・デメリット
CSSでは、いろいろな色をいくつかの方法で表現することができます。 それぞれメリット・デメリットがあるので、その方法と具体的な使い方をみていきましょう。 CSSの色の指定方法 CSSで色を指定する場合、次のような方法があ…
CSS
CSSで垂直方向に文字や画像を揃える方法
CSSで垂直方向に文字や画像を揃える方法をみていきましょう。 簡単なようですが、baselineの考え方を理解していないと意図していない形になってしまうので、ざっと確認していきましょう。 CSSで垂直方向に文字や画像を揃…
CSS
CSSで行の高さを調整するやり方
CSSで行の高さを調整するやり方をみていきましょう。 CSSで行の高さを調整するやり方 CSSで行の高さを調整する場合、line-heightプロパティを使います。 line-heightは複数の行が同じ高さになるので、…
CSS
CSSでテキストにスタイルを設定する方法
CSSを使ってテキストにスタイルを設定する方法をまとめました。 よく使うものに厳選しているので、確認してみてください。 CSSでテキストにスタイルを設定する方法 <h1>CSSでテキストにスタイルを設定する方…