CSS 変数を使用してスマートレイアウトの効率を向上させるためのヒント-CSSチュートリアル-php.cn

CSS 変数を使用してスマートレイアウトの効率を向上させるためのヒント

青灯夜游

リリース： 2021-01-27 19:24:08

転載

2006 人が閲覧しました

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 class="elem" style="--background: red;"></div>

ログイン後にコピー

CSS

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

ログイン後にコピー

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

CSS グリッドの例

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

CSS 変数を使用してスマートレイアウトの効率を向上させるためのヒント

このデザインでは、CSS グリッドは次の目的で使用されます。以下:

サイドバーとメインメニュー
フォーム項目
3 列レイアウト

サイド列幅は固定されており、主な内容が変わります。サイドバーの幅が 240px であるとします。

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

Html

<div class="o-grid"   style="max-width:90%">
    <aside></aside>
    <main></main>
</div>

ログイン後にコピー

Html

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

ログイン後にコピー

2. フォーム項目

##設計によれば、各行には 2 つの列があり、HTML 構造は次のとおりです:

Html

<div class="o-grid" style="--columns: 1fr 1fr">
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
</div>

ログイン後にコピー

CSS

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

ログイン後にコピー

3. 3 列レイアウト

以下の例では、

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

HTML

<div class="o-grid" style="--repeat-number: 3; --gap: 8px;">
  <div></div>
  <div></div>
  <div></div>
</div>

ログイン後にコピー

CSS

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

ログイン後にコピー

変数が次の場合に備えて、CSS 変数にデフォルト値を追加するのが好きです。設定されていません。上記のコードでは、

var(--gap, 0) を使用しました。ユーザーが --gap 変数を指定しない場合、デフォルト値は 0 。

動的グリッド項目:

minmax

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

minmax をよく使用しますが、複数のページで使用すると問題が発生します。

CSS 変数を使用しない基本的な例を見てみましょう。

CSS 変数を使用してスマートレイアウトの効率を向上させるためのヒント

CSS では、

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

CSS

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

ログイン後にコピー

さて、デザインでグリッド項目の幅が少なくとも

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

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

ログイン後にコピー

それぞれに項目の幅が異なる 5 つの異なるグリッドがあることを想像してください。そのため、上記は正しい解決策ではありません。

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

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

ログイン後にコピー

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

<!-- Example 1 -->
<div class="o-grid" style="--item-width: 250px;">
     <div></div>
     <div></div>
     <div></div>
</div>

<!-- Example 2 -->
<div class="o-grid" style="--item-width: 350px;">
     <div></div>
     <div></div>
     <div></div>
</div>

<!-- Example 3 -->
<div class="o-grid" style="--item-width: 150px;">
     <div></div>
     <div></div>
     <div></div>
</div>

ログイン後にコピー

サンプルソースコード: https: //codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

フレックスボックスの例

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

HTML

<div class="article-header">
    <h2>Article title</h2>
    <div class="article-header__meta" style="--justify: space-between;">
        <p>By Ahmad Shadeed</p>
        <p>Published under: CSS, Design</p>
    </div>
</div>

ログイン後にコピー

CSS

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

ログイン後にコピー

これにより、インラインスタイルを調整して値を別のキーワードに変更できます。これは、ラピッドプロトタイピングを行うときや、Web サイトを作成するときにも便利です。

ボタン

ボタンの幅

CSS 変数はボタン要素にも適用されます。 2 つの

input フィールドと 1 つのボタンを持つフォームがあるとします。

CSS 変数を使用してスマートレイアウトの効率を向上させるためのヒント

我的目的是通过使用内联CSS变量来控制按钮的宽度。有时，按钮应占据其父控件的100%宽度。

html

<button class="c-button"   style="max-width:90%">Submit</button>

ログイン後にコピー

css

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

ログイン後にコピー

CSS 変数を使用してスマートレイアウトの効率を向上させるためのヒント

按钮颜色

另一个有用的用途是当有重影按钮（轮廓按钮）时。按钮的颜色可以是任何颜色，通过使用CSS变量，可以轻松更改颜色。

HTML

<button class="c-button c-button--ghost"   style="max-width:90%">Save Edits</button>
<button class="c-button c-button--ghost" style="--color: #ec2828;">Delete</button>

ログイン後にコピー

CSS

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

ログイン後にコピー

CSS 変数を使用してスマートレイアウトの効率を向上させるためのヒント

CSS 变量同样适合悬停效果。悬停时，按钮背景将变为纯色，并且字体颜色为白色。

CSS 変数を使用してスマートレイアウトの効率を向上させるためのヒント

事例源码：https://codepen.io/shadeed/pen/f8e6969d5145d4dcd81aacf7a037c995

用户头像

每个角色的大小都不同，这非常适合用 CSS 变量来解决。假设有四个不同大小的用户头像。

CSS 変数を使用してスマートレイアウトの効率を向上させるためのヒント

在CSS中，定义了以下样式：

.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 src="user.jpg" alt="" class="c-avatar"   style="max-width:90%">
<img src="user.jpg" alt="" class="c-avatar"   style="max-width:90%">
<img src="user.jpg" alt="" class="c-avatar"   style="max-width:90%">
<img src="user.jpg" alt="" class="c-avatar"   style="max-width:90%">

ログイン後にコピー