CSS変数はどのように機能するのでしょうか?レイアウトにインライン CSS 変数を使用するにはどうすればよいですか?

この記事では、CSS 変数を理解し、CSS 変数がどのように機能するかについて説明し、スマート レイアウトの効率を向上させるためにインライン CSS 変数を使用する方法を紹介します。皆様のお役に立てれば幸いです。

グリッド レイアウトを作成する簡単な方法が必要な場合があります。たとえば、気が変わるたびに CSS を変更することなく、5 列のグリッドをすばやく描画できます。この記事では、いくつかのユースケースを検討し、それらを実装および使用する方法について考えます。 [推奨学習:css ビデオ チュートリアル]

仕組み

これらの概念を詳しく調べる前に、まず CSS 変数の基本知識を確認しましょう。 「カスタムプロパティ」と呼ばれます。

すべての主要なブラウザは CSS 変数をサポートしています。各ブラウザのサポートは次のとおりです:

CSS 変数を定義したい場合はグローバル変数であるため、:root宣言に追加する必要があります (:rootはと同等です)。変数がコンポーネントに固有の場合は、グループ内の宣言で定義できます。

以下の例では、square要素の幅と高さに使用されるグローバル変数--sizeを定義します。

:root { --size: 50px; } .square { width: var(--size); height: var(--size); }

--sizeが定義されていない場合はどうすればよいですか? CSS は、渡された変数が無効な場合のデフォルト変数またはフォールバック変数の定義をサポートしています。以下の例では

var(--size, 10px)です。--sizeが無効な場合、幅と高さの値は10pxになります。

.square { width: var(--size, 10px); height: var(--size, 10px); }

これに加えて、インライン CSS スタイルで CSS 変数を使用することもできます。たとえば、

HTML

CSS

.elem { background: var(--background); }

次に、上記の概念を使用して、いくつかの例を示します。

履歴書に書けるプロジェクトがないと皆さんがおっしゃっていたので、私があなたのためにプロジェクトを見つけ、【構築チュートリアル】も含めました。

CSS グリッドの例

サイドバーとメイン コンテンツ

このデザインでは、私は次の CSS グリッドを使用します:

• #サイドバーとメイン メニュー

• フォーム項目

• Three -コラムレイアウト

240pxであるとします。

1. サイドバーとメイン メニュー

Html

Html

.o-grid { display: grid; grid-template-columns: var(--columns); }

2. フォーム項目##設計によれば、各行には 2 つの列があり、HTML 構造は次のとおりです:

.o-grid { display: grid; grid-template-columns: var(--columns); }

以下の例では、

および--gap: 8pxをインライン CSS として使用します。これらの変数はo-gridクラスに追加され、グリッドの設定はこれらの変数に基づいて行われます。

.o-grid { display: grid; grid-template-columns: repeat(var(--repeat-number), 1fr); grid-gap: var(--gap, 0); }

を使用しました。ユーザーが--gap変数を指定しない場合、デフォルト値は0。動的グリッド項目:

私にとって、これは広く使用されているユースケースであり、非常に重要です。 Grid

をよく使用しますが、複数のページで使用すると問題が発生します。CSS 変数を使用しない基本的な例を見てみましょう。

CSS では、

を使用して、各グリッド項目の最小幅250pxを定義します。

.o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr); grid-gap: 16px; }

必要な場合はどうすればよいでしょうか?次のようなバージョンを作成する必要がありますか?

.o-grid--2 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }

CSS 変数を使用すると、次の操作を実行できます

.o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr); grid-gap: var(--gap); }

HTML では、タグに CSS 変数を設定できます:

フレックスボックスの例

この例には、著者名とタグを含む記事タイトルがあります。これらのページ上のレイアウト方法は動的に変化するため、これらのレイアウト方法を素早く切り替える方法が必要です。

 
Article title
 
 
By Ahmad Shadeed
 
Published under: CSS, Design
 
 

.article-header__meta { display: flex; justify-content: var(--justify); }

Submit

.c-button { /* Other styles */ width: var(--width, initial); }

Save Edits Delete

.c-button--ghost { /* Other styles */ background: transparent; color: var(--color, #000); border-color: currentColor; }

.c-avatar { display: inline-block; margin-right: 2rem; width: calc(var(--size, 1) * 30px); height: calc(var(--size, 1) * 30px); object-fit: cover; border-radius: 50%; box-shadow: 0 3px 10px 0 rgba(#000, 0.2); }

以上がCSS変数はどのように機能するのでしょうか?レイアウトにインライン CSS 変数を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。