ホームページ ウェブフロントエンド CSSチュートリアル すべての UI 開発者が知っておくべき CSS コード スニペット

すべての UI 開発者が知っておくべき CSS コード スニペット

Oct 22, 2024 pm 04:01 PM

CSS Code Snippets Every UI Developer Should Know

はじめに: これらの便利な CSS トリックでスタイルシートを強化する

UI 開発者の皆さん、こんにちは。スタイルシートに華やかさを追加する準備はできていますか? CSS が祝福にも呪いにもなり得ることは誰もが知っています。これは信じられないほど強力ですが、レイアウトを正しく設定しようとする頑固なタコと格闘しているように感じることがあります。だからこそ私は、あなたの作業を楽にし、あなたのデザインを輝かせる、小さくても強力な 10 個の CSS コード スニペットのコレクションをまとめました。

これらは単なる古い断片ではありません。「なぜ思いつかなかったの?」と額をたたきたくなるほどのトリックです。 CSS の初心者であっても、熟練したプロであっても、ここで役立つものが見つかることを保証します。それでは、お気に入りの飲み物を手に取り、コード エディタを起動して、CSS の魔法に飛び込んでみましょう!

1. 魔法のセンタリングのトリック

私たちは皆、div を垂直方向と水平方向の両方で中央に配置しようとして、float と margin がごちゃ混ぜになってしまうという経験をしたことがあります。さて、この小さな断片があなたの新しい親友になるので、イライラする日々に別れを告げましょう:

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

このコードは、CSS 変換の力を利用して、親コンテナー内の要素を完全に中央に配置します。仕組みは次のとおりです:

  1. 要素の位置を絶対位置に設定し、通常のドキュメント フローから外します。
  2. コンテナの上部と左側から 50% 移動します。
  3. transform プロパティは、要素をその幅と高さの半分だけ元に戻します。

結果は?毎回、コンテンツが完璧に中央に配置されます。もう余白をいじったり、非協力的なレイアウトで髪を引っ張ったりする必要はありません!

2. スムーズなスクロールで勝利を掴む

ページ ナビゲーションに優雅さを加えたいですか?このスニペットは、わずか数行のコードで非常にスムーズなスクロールを実現します。

html {
  scroll-behavior: smooth;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

それだけです!この単純な宣言は、ページ上のアンカー リンクまでスクロールするときにスムーズなアニメーションを使用するようにブラウザーに指示します。小さな変更ですが、サイトの洗練度やプロフェッショナル感に大きな違いをもたらす可能性があります。

プロのヒント:

もっと凝りたい場合は、JavaScript を少し使ってスクロール速度をカスタマイズすることもできます:

document.documentElement.style.scrollBehavior = 'smooth';
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

3. Clearfix ハック: フロート要素を制御する

フロートは厄介な動物になる可能性があります。彼らはコンテナから飛び出してレイアウトに大混乱をもたらすという厄介な習慣を持っています。 Clearfix ハックを入力します:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
ログイン後にコピー
ログイン後にコピー

このクラスをフローティングの子を持つコンテナに追加し、レイアウトに順序が復元されるのを観察します。 ::after 疑似要素は、コンテナのコンテンツの後に非表示のボックスを作成します。これによりフロートがクリアされ、すべてが整然とした状態に保たれます。

4. カスタム スクロールバー: デフォルトは退屈だから

スクロールバーは醜いものでなければならないと誰が言ったでしょうか?この CSS スニペットを使用すると、サイトのデザインに合わせてスクロールバーのスタイルを設定できます:

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

このコードは、WebKit ベースのブラウザ (Chrome や Safari など) で動作する洗練されたカスタマイズされたスクロールバーを提供します。デザインにぴったり合うように色と寸法を調整できます。

覚えておいてください: このスニペットは WebKit ブラウザには最適ですが、他のブラウザではこれらの疑似要素がサポートされていない可能性があります。すべてのユーザーに一貫したエクスペリエンスを保証するために、常に異なるブラウザ間でテストしてください。

5. フレックスボックスのセンタリングショートカット

Flexbox は、CSS でのレイアウトの処理方法に革命をもたらしました。これは、フレックスボックスを使用してコンテンツを垂直方向と水平方向の両方で中央揃えにする簡単で汚い方法です:

html {
  scroll-behavior: smooth;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

このクラスをコンテナに適用すると、そのすべての子要素が完全に中央に配置されます。シンプルで強力で、最新のすべてのブラウザで動作します。愛してはいけないものは何ですか?

6. 省略記号を使用してテキストを切り詰める

限られたスペースにテキストを表示する必要がある場合がありますが、テキストが折り返されたり、オーバーフローしたりしたくないことがあります。このスニペットはテキストを切り詰め、最後に省略記号 (...) を追加します:

document.documentElement.style.scrollBehavior = 'smooth';
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

これは、デザインをきれいに保ち、長いテキスト文字列によってレイアウトが崩れるのを防ぐのに最適です。ツールチップや展開可能な要素など、必要に応じてユーザーが全文を表示できる手段を必ず提供してください。

7. CSS トライアングル: 画像は必要ありません

矢印またはツールチップに三角形が必要ですか? Photoshop に手を伸ばす必要はありません。純粋な CSS を使用して Photoshop を作成できます:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
ログイン後にコピー
ログイン後にコピー

これにより、上向きの三角形が作成されます。境界線の幅を調整して三角形のサイズと比率を変更したり、どの境界線の色を変更して方向を変更したりできます。

ボーナスのヒント:

他の形を作成したいですか?この気の利いた CSS シェイプ ジェネレーターをチェックしてください: CSS Shape Generator

8. シンプルな CSS グラデーション背景

グラデーションはデザインに深みと面白みを加えることができます。シンプルな線形グラデーションの背景を作成する方法は次のとおりです:

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
ログイン後にコピー

これにより、温かみのあるオレンジから柔らかい桃までの水平方向のグラデーションが作成されます。ニーズに合わせて色や方向を調整できます。より複雑なグラデーションについては、CSS Gradient などのツールをチェックしてコードを生成してください。

9. ロボトミー化されたフクロウセレクター

奇妙な名前に驚かないでください。このセレクターは、要素間に一貫した間隔を追加するのに非常に役立ちます:

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
ログイン後にコピー

このセレクターは、別の要素の直後に続く任意の要素をターゲットにし、上マージンを追加します。これは、すべての要素にマージン クラスを追加することなく、レイアウトの垂直方向のリズムを維持するための優れた方法です。

これには注意してください!これは強力ですが、慎重に使用しないと予期せぬ結果を招く可能性もあります。グローバルではなく、特定のコンテナで使用することを検討してください。

10. テーマを簡単に設定できる CSS 変数

最後になりましたが、CSS 変数 (カスタム プロパティとも呼ばれます) について話しましょう。これらは、柔軟でテーマに適したデザインを作成するための革新的なツールです:

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

:root 疑似クラスで変数を定義すると、これらの値をスタイルシート全体で再利用できます。原色を変更する必要がありますか?変数を 1 回更新するだけで、デザイン全体に反映されます。

すべてをまとめる: 実際の例

これらの素晴らしい CSS スニペットについて説明したので、実際のシナリオでそれらの一部をどのように組み合わせて使用​​できるかを見てみましょう。ブログ投稿プレビュー用の単純なカード コンポーネントを構築していると想像してください。

html {
  scroll-behavior: smooth;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

そして、いくつかのスニペットを組み込んだ、スタイルを設定するための CSS を次に示します。

document.documentElement.style.scrollBehavior = 'smooth';
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

この例では、簡単なテーマ設定のために CSS 変数を使用し、長いタイトルを処理するために truncate クラスを使用し、洗練された外観のためにスムーズなスクロールとカスタム スクロールバーを追加しました。カード レイアウト自体は、配置と間隔にフレックスボックスの原則を使用します。

結論: CSS ゲームのレベルアップ

これで、皆さん、開発ワークフローに大きな変化をもたらす可能性がある、小さいながらも強力な 10 個の CSS コード スニペットが完成しました。一般的なレイアウトの課題の解決から、洗練された小さなタッチの追加まで、これらのスニペットは CSS のパワーと柔軟性を示しています。

CSS ウィザードになるための鍵は、単にこれらのトリックを知ることではなく、いつ、どのように使用するかを理解することであることを忘れないでください。これらのスニペットをプロジェクトに組み込むときは、時間をかけて実験し、それらがどのように機能するかを理解してください。特定のニーズに合わせて、それらを微調整したり組み合わせたりすることを恐れないでください。

CSS の取り組みを続ける際に留意すべき最後のヒントをいくつか紹介します。

  1. 好奇心を持ち続けてください: CSS の世界は常に進化しています。ツールキットを強化できる新しいプロパティとテクニックに注目してください。
  2. 練習、練習、練習: これらのスニペットを使えば使うほど、より直感的になります。
  3. 仕様を読んでください: 疑問がある場合は、ソースに直接アクセスしてください。公式 CSS 仕様は、プロパティがどのように機能するかについて貴重な洞察を提供します。
  4. 知識を共有しましょう: クールな CSS トリックを見つけましたか?他の開発者と共有してください。 Web 開発コミュニティは、共有された知識と経験によって繁栄しています。

それで、何を待っているのですか?お気に入りのコード エディターを起動して、これらのスニペットを試してみましょう。あなたのスタイルシート (そして未来のあなた) はきっとあなたに感謝するでしょう!

コーディングを楽しんでください。あなたの CSS が常にバグがなく美しいものでありますように!

以上がすべての UI 開発者が知っておくべき CSS コード スニペットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

静的フォームプロバイダーの比較 静的フォームプロバイダーの比較 Apr 16, 2025 am 11:20 AM

ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 Apr 17, 2025 am 10:55 AM

今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します

セクション要素との取引 セクション要素との取引 Apr 12, 2025 am 11:39 AM

2つの記事がまったく同じ日に公開されました。

Google Fontsをタグ付けし、Goofonts.comを作成する方法 Google Fontsをタグ付けし、Goofonts.comを作成する方法 Apr 12, 2025 pm 12:02 PM

Goofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています

HTMLダイアログ要素を使用したいくつかの実践 HTMLダイアログ要素を使用したいくつかの実践 Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

マルチサムスライダー:一般的なケース マルチサムスライダー:一般的なケース Apr 12, 2025 am 10:52 AM

この2部構成のシリーズの最初の部分では、2つの親指スライダーを取得する方法を詳しく説明しました。今、私たちは' llが一般的なマルチサンプスのケースを見ていますが、別のものと

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? 「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合:

See all articles