UI 開発者の皆さん、こんにちは。 CSS スキルを次のレベルに引き上げる準備はできていますか?経験豊富なプロであっても、初心者であっても、スタイルシートが独自の考えを持っているように見える瞬間に誰もが直面したことがあります。しかし恐れることはありません。あなたの作業を楽にし、デザインをより印象的にする、気の利いた CSS ハックをいくつか用意しました。
このブログ投稿では、一般的なデザインの課題を解決し、ワークフローを改善し、プロジェクトにさらに華やかさを加えるのに役立つ 10 の素晴らしい CSS ハックを紹介します。これらは単なる古いテクニックではありません。実用的で強力で、素晴らしい Web エクスペリエンスを作成したいと考えている私たちのような UI 開発者にとって最適です。
それでは、お気に入りの飲み物を手に取り、快適になって、CSS ハックの世界に飛び込みましょう!
CSS ハックのリストの最初は、CSS カスタム プロパティとも呼ばれる CSS 変数の使用です。これらをまだ使い始めていない方は、ぜひご活用ください!
CSS 変数を使用すると、特定の値を保存し、スタイルシート全体でそれらを再利用できます。これは、色、フォント、または頻繁に繰り返す値を扱う場合に特に役立ちます。
CSS 変数を設定して使用する方法の簡単な例を次に示します。
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
.button {
background-color: var(--main-color);
font-size: var(--font-size);
}
.header {
color: var(--secondary-color);
}
CSS ハックの武器庫の次は、::before および ::after 疑似要素です。これらの小さな宝石を使用すると、余分な HTML マークアップを追加せずに要素にコンテンツを追加できます。
これらの疑似要素を使用して、あらゆる種類のクールな効果を得ることができます:
これは、::before と ::after を使用してスタイリッシュな引用ブロックを作成する方法の簡単な例です:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
.button {
background-color: var(--main-color);
font-size: var(--font-size);
}
.header {
color: var(--secondary-color);
}
Flexbox は正確にはハックではありませんが、非常に強力なツールであるため、このリストに掲載するに値します。 Flexbox をまだ使用していない場合は、CSS でレイアウトを作成する最も柔軟で効率的な方法の 1 つを見逃していることになります。
Flexbox を使用してレスポンシブ レイアウトを作成する方法の簡単な例を次に示します。
blockquote {
position: relative;
padding: 20px;
background: #f9f9f9;
}
blockquote::before,
blockquote::after {
content: '"';
font-size: 50px;
position: absolute;
color: #ccc;
}
blockquote::before {
top: 0;
left: 10px;
}
blockquote::after {
bottom: -20px;
right: 10px;
}
これにより、3 列から 2 列に、そして画面サイズが小さくなるにつれて 1 列に調整される柔軟なグリッドが作成されます。
Flexbox は 1 次元レイアウトに最適ですが、CSS Grid は 2 次元レイアウトで次のレベルに引き上げます。複雑なページ構造を簡単に作成するのに最適です。
簡単なグリッドを設定する方法は次のとおりです:
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item {
flex: 0 1 calc(33.333% - 20px);
margin: 10px;
}
@media (max-width: 768px) {
.item {
flex: 0 1 calc(50% - 20px);
}
}
@media (max-width: 480px) {
.item {
flex: 0 1 100%;
}
}
名前付きグリッド領域を使用すると、グリッドで非常に創造性を発揮できます。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
これにより、ヘッダー、サイドバー、メイン コンテンツ領域、フッターを含むレイアウトがすべてわずか数行の CSS で作成されます。
CSS トランジションを使用すると、特定の期間にわたってプロパティ値をスムーズに変更できます。これらは、JavaScript を必要とせずに、UI 要素に微妙なアニメーションを追加する優れた方法です。
トランジションの基本的な構文は次のとおりです:
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-gap: 20px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
ホバー時に色が滑らかに変化するシンプルなボタンを作成してみましょう:
.element {
transition: property duration timing-function delay;
}
これにより、ボタンの上にマウスを置くと色が滑らかに変化するボタンが作成され、ユーザーに優れた視覚的なフィードバックが提供されます。
CSS シェイプを使用すると、長方形以外のレイアウトを作成でき、デザインにユニークで興味深い外観を加えることができます。
shape-outside プロパティは、インライン コンテンツを折り返す形状を定義します。以下に例を示します:
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}
これにより、テキストが回り込む円形が作成され、視覚的に興味深いレイアウトが作成されます。
画像でシェイプアウトサイドを使用して、さらに複雑な形状を作成することもできます:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
.button {
background-color: var(--main-color);
font-size: var(--font-size);
}
.header {
color: var(--secondary-color);
}
これにより、テキストが画像の輪郭に沿って流れることができ、テキストとビジュアルがシームレスに統合されます。
CSS カウンターは、CSS ルールによって値を増分できる CSS によって管理される変数のようなものです。これらは、追加のマークアップを必要とせずに、番号付きリストやセクションを作成するのに最適です。
カウンターを設定して使用する方法は次のとおりです:
blockquote {
position: relative;
padding: 20px;
background: #f9f9f9;
}
blockquote::before,
blockquote::after {
content: '"';
font-size: 50px;
position: absolute;
color: #ccc;
}
blockquote::before {
top: 0;
left: 10px;
}
blockquote::after {
bottom: -20px;
right: 10px;
}
これにより、h2 要素に「セクション 1:」、「セクション 2:」などの番号が自動的に付けられます。
サブセクション用にネストされたカウンターを作成することもできます:
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item {
flex: 0 1 calc(33.333% - 20px);
margin: 10px;
}
@media (max-width: 768px) {
.item {
flex: 0 1 calc(50% - 20px);
}
}
@media (max-width: 480px) {
.item {
flex: 0 1 100%;
}
}
これにより、セクションやサブセクションに「1.1」、「1.2」、「2.1」などの番号付けシステムが作成されます。
CSS を使用してスクロールバーのスタイルを設定できることをご存知ですか?これはすべてのブラウザで機能するわけではありませんが、サポートされているブラウザではデザインに素敵なタッチを加えることができます。
WebKit ブラウザでスクロールバーのスタイルを設定する方法の例を次に示します:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
これにより、カーソルを置くと暗くなる灰色のつまみを持つカスタム スクロールバーが作成されます。
よりブラウザー間で互換性のあるソリューションを実現するには、新しいスクロールバーの色とスクロールバーの幅のプロパティを使用できます。
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-gap: 20px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
これにより、これらのプロパティをサポートするブラウザ間で、灰色のサムと明るい灰色のトラックを持つ薄いスクロールバーが設定されます。
ツールチップは、UI を煩雑にすることなく追加情報を提供する優れた方法です。そして、何だと思いますか？ CSS だけを使用して作成できます!
これは単純な CSS のみのツールチップです:
.element {
transition: property duration timing-function delay;
}
これを使用するには、HTML を次のように構成します。
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}
HTML 構造は次のとおりです。
<div>
<p>これにより、JavaScript を必要とせず、純粋に CSS で動作する拡張可能なアコーディオンが作成されます。</p>
<h2>
結論: CSS ハックをマスターする
</h2>
<p>これで完成です!私たちは、UI 開発ゲームを本当に向上させる 10 の素晴らしい CSS ハックを紹介してきました。 CSS 変数の柔軟性から擬似要素の魔法まで、フレックスボックスやグリッドなどのレイアウト マスターからツールチップやアコーディオンなどの純粋に CSS 駆動のインタラクティブな要素に至るまで、これらのテクニックは、魅力的で効率的なユーザー インターフェイスを作成するための豊富な可能性を提供します。</p>
</div>
以上がUI開発者のためのCSSのコツの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
