ホームページ >ウェブフロントエンド >CSSチュートリアル >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
<div></div>
CSS
.elem { background: var(--background); }
次に、上記の概念を使用して、いくつかの例を示します。
履歴書に書けるプロジェクトがないと皆さんがおっしゃっていたので、私があなたのためにプロジェクトを見つけ、【構築チュートリアル】も含めました。
このデザインでは、私は次の CSS グリッドを使用します:
240px であるとします。
1. サイドバーとメイン メニュー
Html
<div> <aside></aside> <main></main> </div>
Html
.o-grid { display: grid; grid-template-columns: var(--columns); }
2. フォーム項目##設計によれば、各行には 2 つの列があり、HTML 構造は次のとおりです:
Html
.o-grid {
display: grid;
grid-template-columns: var(--columns);
}
以下の例では、
-- を追加しました。 repeat-number: 3 および --gap: 8px
をインライン CSS として使用します。これらの変数は o-grid
クラスに追加され、グリッドの設定はこれらの変数に基づいて行われます。
.o-grid {
display: grid;
grid-template-columns: repeat(var(--repeat-number), 1fr);
grid-gap: var(--gap, 0);
}
変数が次の場合に備えて、CSS 変数にデフォルト値を追加するのが好きです。設定されていません 。上記のコードでは、
を使用しました。ユーザーが --gap
変数を指定しない場合、デフォルト値は 0
。 動的グリッド項目:
私にとって、これは広く使用されているユースケースであり、非常に重要です。 Grid をよく使用しますが、複数のページで使用すると問題が発生します。 CSS 変数を使用しない基本的な例を見てみましょう。
CSS では、
minmax を使用して、各グリッド項目の最小幅 250px
を定義します。
.o-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr);
grid-gap: 16px;
}
さて、デザインでグリッド項目の幅が少なくとも
必要な場合はどうすればよいでしょうか?次のようなバージョンを作成する必要がありますか? <pre class="brush:php;toolbar:false">.o-grid--2 {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}</pre>
それぞれに項目の幅が異なる 5 つの異なるグリッドがあることを想像してください。そのため、上記は正しい解決策ではありません。
CSS 変数を使用すると、次の操作を実行できます
.o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr); grid-gap: var(--gap); }
HTML では、タグに CSS 変数を設定できます:
サンプル ソース コード: https: //codepen.io/shadeed/pen/xxxPYog/7d3e0d575a5cecb86233fc7d72fa90d4<div></div> <div></div> <div></div><div></div> <div></div> <div></div><div></div> <div></div> <div></div>
フレックスボックスの例
CSS 有了它,我可以调整内联样式以将值更改为另一个关键字。 我发现这在进行快速原型制作甚至是制作网站时很有用。 CSS 变量也适用于按钮元素。 假设有一个带有两个
我的目的是通过使用内联CSS变量来控制按钮的宽度。 有时,按钮应占据其父控件的 html css
另一个有用的用途是当有重影按钮(轮廓按钮)时。 按钮的颜色可以是任何颜色,通过使用CSS变量,可以轻松更改颜色。 HTML CSS
CSS 变量同样适合悬停效果。悬停时,按钮背景将变为纯色,并且字体颜色为白色。
事例源码:https://codepen.io/shadeed/pen/NWWXqqX/f8e6969d5145d4dcd81aacf7a037c995 每个角色的大小都不同,这非常适合用 CSS 变量来解决。假设有四个不同大小的用户头像。
在CSS中,定义了以下样式: 通过使用 事例源码:https://codepen.io/shadeed/pen/WNNdErw/cdaac5ff667e1f7d9c8241655441f10d 作者:Ahmad shaded 原文:https://css-tricks.com/patterns-for-practical-css-custom-properties-use/ (学习视频分享:web前端)<div>
<h2>Article title</h2>
<div>
<p>By Ahmad Shadeed</p>
<p>Published under: CSS, Design</p>
</div>
</div>
.article-header__meta {
display: flex;
justify-content: var(--justify);
}
按钮
按钮宽度
input
字段和一个按钮的表单。100%
宽度。<button>Submit</button>
.c-button {
/* Other styles */
width: var(--width, initial);
}
按钮颜色
<button>Save Edits</button>
<button>Delete</button>
.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);
}
Calc()
函数,我可以传递一个--size
变量,它将乘以一个基本宽度值,在HTML中定义 --size
变量:<img alt="CSS変数はどのように機能するのでしょうか?レイアウトにインライン CSS 変数を使用するにはどうすればよいですか?" >
<img alt="CSS変数はどのように機能するのでしょうか?レイアウトにインライン CSS 変数を使用するにはどうすればよいですか?" >
<img alt="CSS変数はどのように機能するのでしょうか?レイアウトにインライン CSS 変数を使用するにはどうすればよいですか?" >
<img alt="CSS変数はどのように機能するのでしょうか?レイアウトにインライン CSS 変数を使用するにはどうすればよいですか?" >
以上がCSS変数はどのように機能するのでしょうか?レイアウトにインライン CSS 変数を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。