CSSユニットの理解（およびそれらの使用方法）

おそらく以前にWebコードでさまざまなCSSユニットを見たことがありますが、それらがどのように機能するかを理解することで、より意図的に使用することができます。この投稿では、CSSユニットが実際に何であるか、レイアウトにどのように影響するか、およびDivi 5内でそれらを使用する方法がより応答的に設計する方法を学びます。

Divi 5は、CSSユニットのネイティブサポートをビルダーにもたらします。新しいAdvancedユニット機能のおかげで、カスタムコードなしで％、EM、REM、VWなどを使用できます。

CSSユニットとは何ですか？

CSSユニットは、ブラウザに何かがどれほど大きくてもどれだけあるべきかを伝えます。見出しのサイズ、セクションの幅、または要素間の間隔を設定する場合でも、そのスペースを定義するためにユニットを使用しています。それらがなければ、ブラウザはあなたの価値をどうするかわからない。

たとえば、幅：100の書き込みは、ブラウザにとって何も意味がありません。しかし、100pxまたは100％などのユニットを追加すると、今ではあなたが望むものを正確に知っています。

4つのボックスでこの例を挙げて、それぞれが異なるCSS値を使用しています。

• 最初の使用幅100。技術的に無効ですが、多くのブラウザーはそれを100％にします。
• 2番目（100px）は固定幅を使用します。
• 親コンテナに対する3番目と4番目の（100％および60％）スケール。

技術的に無効であるにもかかわらず、なぜ幅：100が完全に幅に見える最初のボックスがまだ完全に表示されるのだろうと思うかもしれません。

幅：100は、ユニットがないため、ブラウザによって無視されます。しかし、この場合、ボックスはCSSが受け入れられたためではなく、divのようなブロックレベルの要素がデフォルトで親の全幅に自然に及ぶためです。これはデフォルトの動作の一致であり、無効なCSSが100％と解釈された結果ではありません。

人気のあるCSSユニット

PXと％は一般的に表示されますが、いつ使用するかを知ったら、他の多くの人は同じように便利です。

これらのユニットは、フォントサイズの設定、セクション幅の定義、パディングとマージンの調整、柔軟なグリッドレイアウトの構築など、Webデザインのどこにでも表示されます。それらは、あなたのレイアウトがどのように見え、振る舞うかについて、最も重要な決定要因の1つです。また、どのユニットが効果的な設計で重要であるかを使用する場合、まもなくそれに到達します。

しかし、最初に、すべてのCSSユニットが絶対と相対の2つの主要なタイプに分類されることを知ることは役立ちます。

絶対および相対ユニット

レイアウトをさまざまな画面サイズでうまく機能させたい場合は、違いを理解することが不可欠です。

絶対ユニット

絶対ユニットには固定値があります。これは、何かを100pxに設定すると、ユーザーが電話、タブレット、または大規模なデスクトップモニターを使用しているかどうかにかかわらず、常に100ピクセルの幅になることを意味します。これらのユニットは、画面サイズや周囲のレイアウトに応答しないため、正確な制御が必要な場合に優れています。

これらは、境界、アイコンのサイズ、または固定ボックスの影によく使用されます。通常、精度は柔軟性よりも重要です。

しかし、同じ精度が問題を引き起こす可能性があります。大画面で完璧に見えるデザインは、あふれたり、ぎこちなく縮小したり、小さなデバイスで完全に壊れたりする可能性があります。絶対ユニットは適応しないため、慎重に使用しない限り、レイアウトを硬直させることができます。

相対ユニット

名前が示すように、これらは周囲に基づいて調整されます。特定のサイズにロックされたままにする代わりに、コンテキスト（親要素、ビューポートなど）に応じてスケーリングします。これにより、レスポンシブデザインの柔軟性がはるかに柔軟になります。

一部のユニットは、親要素のサイズに応答し、他のユニットはページのルートフォントサイズに応答し、ブラウザウィンドウ自体に反応するユニットもあります。ここにいくつかの重要なものがあります：

• 親コンテナを使用した％スケール。
• EMは、親要素のフォントサイズに基づいて調整します。
• REMは、ページのルートフォントサイズに従います。
• VWとVHは、ブラウザビューポートの幅と高さに応答します。

これらはさまざまな環境に適応するため、これらのユニットは、どんな画面でも自然に感じるレイアウトを作成するのに役立ちます。与えられたスペースで拡張または縮小します。これにより、コンテンツが読みやすくなり、デザインがデバイス全体でバランスを取ります。

この柔軟性が重要な理由を確認するために、簡単な例を見てみましょう。画像セクションを構築し、幅を1200pxに設定するとします。

大規模なモニターでは完璧に見えるかもしれませんが、画面幅が768ピクセルのタブレットでは、画像がオーバーフローして奇妙に見える可能性があります。次のように使用してみてください：

width: 100%;

これにより、ブラウザが画像にコンテナの幅を埋めるように指示します。画面が広いか狭いかにかかわらず、画像は自動的に調整されます。

相対ユニットを使用することの本当の利点は応答性です。サイズを割り当てるだけでなく、さまざまなシナリオでレイアウトがどのように動作するかについての明確な指示をブラウザに提供します。そして、あなたがそれを正しくするとき、あなたのコンテンツはすべての画面に適合します。

理にかなっている相対ユニットを使用することにより、厳格なレイアウトを避け、ブレークポイントの必要性を減らし、設計を管理しやすくします。 DIVIでは、異なるCSSユニットを使用するために単一のコードを記述する必要はありません。ビルダーに必要なユニットを選択し、レイアウトがリアルタイムで応答するのを確認します。

どのCSSユニットを使用するか

絶対ユニットと相対ユニットの違いを理解したので、次のステップはそれぞれを使用するタイミングを知ることです。

原則として、レイアウトがさまざまな画面サイズに適応する必要がある場合は、相対ユニットを使用してください。これらは、セクション幅、タイポグラフィ、要素間の間隔、またはフルページのレイアウトに最適です。それらは自動的にスケーリングされるため、すべてのデバイスに個別のスタイルを作成することなく、一貫性を維持するのに役立ちます。

一方、画面のサイズに関係なく、何かを同じままにしたいときは、絶対ユニットが役立ちます。境界、アイコン、固定間隔、または小さな視覚的な詳細を考えてください。

ここにあなたの選択を導くためのいくつかの例があります：

• アイコンサイズのように、正確な制御が必要な場合はPXを使用します。適応していないため、レイアウト幅やテキストの場合は避けてください。
• コンテナで要素をスケーリングする場合は％を使用します。
• 親要素のフォントサイズで拡張するために間隔が必要な場合は、EMを使用します。
• サイト全体で一貫したサイジングが必要な場合は、REM （一般にルートEMと呼ばれる）を使用してください。ルートフォントサイズに基づいているため、間隔とタイポグラフィを予測可能に保ちます。
• ビューポート（デバイス画面の全体のビュー）に直接応答するフルスクリーンセクション、ヒーローエリア、または間隔にVWとVHを使用します。

より高度なコントロールのために、CSS関数を使用してユニットを結合することもできます。 calc（）は、最小ベースの応答性間隔の1REM + 5VWのような値を混合するときに便利です。 Clamp（）は、制限間で成長または縮小する流体値を設定するのに最適であり、メディアクエリに代わるよりクリーンな代替品になります。

最終的に、適切なユニットを選択するには、各要素が異なるシナリオでどのように動作するかを考慮し、それを最もよく達成するユニットを選択することが含まれます。

Diviの高度なユニットは、コーディングなしで応答的に構築します

CSSユニットがレイアウト動作をどのように制御できるかをすでに見てきました。 Divi 5はそのコントロールを取り、高度なユニットで使用するのが楽になります。

YouTubeチャンネルを購読してください

％、EM、REM、VW、およびVHのネイティブサポートにより、ビルダーに直接構築されているため、コードパネルを開く必要なく、モジュール、セクション、間隔、タイポグラフィに実際のCSS値を適用できます。任意の数値フィールドでは、高度なユニットドロップダウンから優先ユニットを選択し、値を調整し、変更をライブで確認してください。

そして、それはそこで止まりません。 Diviでは、視覚ビルダーでCalc（）やClamp（）などの高度なCSS関数を使用することもできます。つまり、液体値を作成し、ユニットを組み合わせ、同じレベルの精度開発者を微調整して、手書きのCSSから視覚的に微調整できます。

さまざまな画面サイズにわたって流動的にスケーリングするフォントサイズが必要ですか？ Clamp（）を使用します。固定値と柔軟な値の組み合わせで間隔を相殺したいですか？ calc（）を試してください。 Diviは、それをすべて、即座に目に見えるように処理します。

設計とコードを推測したり切り替えたりしていません。 Diviは、要素がどのようにデバイス全体で動作するかを完全に制御することで、レスポンシブロジックを正しく正しく実行するために、視覚的な力と即時フィードバックを提供します。

Divi 5の高度なユニットに関するすべてを学びます

CSSユニットは、Diviの高度なワークフローと完全に同期します

Diviがビルダー内で個々のCSSユニットを簡単に使用する方法をすでに見ています。しかし、実際の強さは、これらのユニットがサイト全体で一緒に動作するときを示しています。ここでは、設計変数、オプショングループプリセット、Calc（）やClamp（）などの高度なCSS機能などの機能が本当に輝きます。

Diviは、CSSユニットをフィールドに入力できるだけではありません。コードを作成せずに設計システム全体に統合するのに役立ちます。すべてが一貫性があり、スケーラブルで、メンテナンスが容易です。

DIVIがCSSユニットを柔軟で論理駆動型のワークフローの一部として使用するのにどのように役立つかを見てみましょう。

1.デザイン変数を使用してレイアウトロジックを作成します

プロジェクトで時間を節約する最も簡単な方法の1つは、レイアウトロジックを事前に計画することです。同じ間隔またはフォントサイズを複数の場所で調整する代わりに、それらの値を一度定義し、Diviの設計変数を使用して、デザイン全体で再利用します。

2REM、5VWなどの実際のCSSユニット、さらにはcalc（2REM + 1VW）などの式を使用して、-card-paddingや - section-gapなどの再利用可能な値を作成できます。設定すると、これらの値をモジュール、行、およびセクションに適用して、すべてを一貫性に保つことができます。

後で変更する場合にのみ、変数を更新する必要があります。この変更は、それが使用されているあらゆる場所で反映されており、個々の設定を狩ることを前後に節約できます。また、CSSユニットはDIVIのシステムに直接構築されているため、推測に依存するのではなく、実際のCSSロジックを視覚的に適用しています。これにより、レイアウトが管理しやすく、スケーラブルで、プロジェクトが成長するにつれて調整しやすくなります。

2。Clamp（）とcalc（）を視覚的に使用します

Clamp（）やCalc（）などのCSSは、レスポンシブレイアウトを作成するのに役立ちます。メディアクエリを書くことなく、画面サイズにわたって調整する柔軟な値を定義できます。したがって、各デバイスに固定サイズを設定する代わりに、クランプ（1REM、2VW、2.5REM）などのロジックを記述して、ブラウザが設定された制限の間にスムーズに拡大できるようにすることができます。または、Calc（100VH - 80px）を使用して、ビューポートの高さに基づいてヒーローセクションを調整します。

通常、彼らは手動でCSSを書く必要があります。 DIVIでは、これらを任意の数字フィールド内に直接入力できます。

また、CSSユニットは両方の関数内でサポートされているため、REM、VW、PXなどの値を混合して、必要な動作を正確に取得できます。入力すると結果がライブであるため、ビルダーを離れることなく、実験して応答性を正しく実現できます。

3.オプショングループプリセットを使用してユニットロジックを保存します

高度なユニットまたはフォーミュラを使用してレイアウトを設定したら、再構築する必要はありません。 DIVIを使用すると、パディング：クランプ（1REM、3VW、2REM）などのスタイリングロジックをオプショングループプリセットとして保存できます。

つまり、次に同じ間隔またはレイアウトパターンが必要なときに、同じ設定を適用するのではなく、保存されたプリセットのみを適用します。

また、プリセット内でデザイン変数を使用すると、さらに優れています。相互接続されたシステムを簡単に作成できます。このシステムでは、Webサイト全体のスタイルを変更すると、変数の変更のみに依存します。

DIVIでは、CSSユニットを使用すると、サイズだけではありません。それは行動についてです。設定する各値は、レイアウト全体で一貫した一貫性を維持し、拡大し、維持する視覚システムの一部になります。そして、それはすべてビルダーに組み込まれているため、コーディングのようではなく、ロジックでデザインするように感じます。

DiviはCSSユニットを視覚的な超大国に変えます

CSSユニットを使用するためにCSSを作成する必要はありません。 Divi 5は、それらをすべて視覚インターフェイスに持ち込み、そこでリアルタイムで探索、適用、プレビューできます。間隔を調整したり、流動的なタイポグラフィの構築をしたり、変数とプリセットを使用してレイアウトロジックを作成したりする場合でも、Diviは視覚的にすべてを行うことができます。

試してみる準備はできましたか？ Divi 5をダウンロードし、デザインで実際のCSSユニットの使用を開始します。