絶対CSSユニットと相対CSSユニットの違い

適切なCSSユニットを選択することは、技術的な詳細以上のものです。それは、すべてのデバイスでデザインが一貫性があり、柔軟で、応答性が高いことを支援します。ピクセルは簡単なオプションのように思えるかもしれませんが、それらは常に異なる画面で予測可能に動作するとは限りません。

この投稿では、絶対ユニットと相対ユニットの違いを説明し、Divi 5が最初からより効果的に使用するのに役立つ方法を示します。

CSSユニットは説明しました：なぜ彼らはあなたのウェブサイトにとって重要なのですか？

CSSユニットは、サイトにすべてが表示される大きさを制御します。間違っていると、さまざまなデバイスで設計が壊れます。

ほとんどの人は、簡単で理解しやすいため、ピクセルを使用しています。しかし、ピクセルは自然に応答性の高いデザインに適応しません。画面の変更に応答するには、Clamp（）などのメディアクエリまたはCSS関数が必要です。

他のユニットは自動的に適応します。 [ブラウザ]ウィンドウでビューポートユニットがスケーリングします。 EMサイズのような相対ユニットは、周囲のテキストに基づいています。異なるユニットはさまざまな問題を解決します。よく選ぶと、デザインは追加の作業なしでデバイスに適応します。

絶対ユニットの分解：固定サイズが最適に機能する場合

絶対ユニットは、それらの周りで何が起こっても同じサイズを保持します。幅20ピクセルに何かを設定すると、誰かが電話で表示されるか、デスクトップモニターで表示されるかどうかにかかわらず、20ピクセルのままです。値は、画面サイズ、親要素、またはブラウザの設定に基づいて変更されません。

ピクセル（PX）このスペースを支配します。センチメートル、ミリメートル、インチなどの他の絶対ユニットが存在しますが、物理的な測定が重要な場合は印刷デザインに属します。 Webデザインの場合、ピクセルは必要なほぼすべての絶対測定を処理します。

なぜピクセルが小さな詳細に最適なのか

一部の設計要素には、正確な制御が必要です。 1ピクセルの境界線は、どこでも鮮明で薄く見えるはずです。ドロップシャドウは、正しく見えるように精度が必要です。小さなアイコンは、デバイス全体で一貫性を保つ場合、より良く機能します。

ピクセルは、これらの小さな詳細に合わせてうまく機能します。ボタンの境界線は正確に2ピクセルの厚さで、その微妙な影は正確に4ピクセルのオフセットでなければならず、ナビゲーションアイコンは完全なアライメントのために正確に24ピクセルの方式でなければなりません。

これらの測定値は、画面サイズでスケーリングする必要はありません。デスクトップ上の1ピクセルのボーダーは、モバイルに1ピクセルのままでなければなりません。モバイルで2ピクセルにすると、厚くて不格好に見えます。

他の要素もピクセルでうまく機能します。ブランドのロゴは、ブランドの一貫性にピクセルを使用することがよくあります。ドットやラインなどの小さな装飾要素には、正確なサイジングが必要です。ロードスピナーと進行状況バーは、固定寸法でよりよく機能します。

メディアクエリでピクセルを応答します

ピクセルは完全に剛性ではありません。メディアクエリを使用すると、さまざまな画面サイズでさまざまなピクセル値を交換できます。見出しは、デスクトップで32ピクセルのテキストを使用してから、タブレットで28ピクセル、電話で24ピクセルにジャンプする場合があります。

このアプローチは、相対ユニットよりも多くの作業が必要です。ブレークポイントを定義し、各画面サイズの個別のルールを記述する必要がありますが、各サイズをどのように見ているかを完全に制御できます。

このアプローチは、各画面サイズで特定の制御を必要とする場合にうまく機能します。特定の次元でテキストが携帯電話とタブレットとデスクトップでどのように見えるかを正確に決定します。驚きはありません。

余分なCSSは、正確なサイジングを必要とする要素には価値があります。ロゴは、各デバイスに正確に適切なサイズを維持するときに最適に見えます。ナビゲーション要素は、多くの場合、正しく動作するために特定の寸法が必要です。装飾的な境界と影は、正確な測定に依存して、鮮明に見えます。

相対ユニットの理解：Webデザインへの柔軟なアプローチ

対照的に、相対ユニットは、周囲にあるものに基づいてストレッチと収縮します。この柔軟性により、ウェブサイトは携帯電話、タブレット、コンピューターで動作します。固定されたままの絶対ユニットとは異なり、相対ユニットは画面サイズ、親要素、またはユーザーの好みに適応します。

これらのユニットは、ピクセルが作成する問題を解決します。 75ピクセル全体のボタンはデスクトップで正常に動作しますが、モバイルでは支配的になります。相対ユニットは自動的に調整され、画面サイズごとに個別のスタイルを作成することから節約できます。

EMユニットがどのように互いに構築するか

EMユニットは、直接の親要素のフォントサイズに関連しています。ベースフォントサイズが16pxで、コンテナをフォントサイズに設定した場合：1.25em、20pxになります。 1.5EMに設定された子要素は、24pxではなく30px（1.5×20px）になります。これは、ルートではなく親に基づいているためです。

この複合効果は、テキストの周りのスケーラブルな間隔に強力です。ただし、EMベースのフォントサイズのネスト要素を維持すると、値が急速に増加する可能性があります。 EMユニットは、近くのテキストに密接に結びついたパディング、マージン、または要素に最適です。レイアウト全体で一貫したサイジングについては、代わりにREMを使用することを検討してください。

REMユニットは物事をシンプルに保ちます

REMは常にルートHTML要素を見ます。何かを2レムに設定すると、ページ上のどこでも同じサイズです。

ほとんどのブラウザは、ルートのデフォルトで16pxになります。したがって、1rem = 16px、2rem = 32px。ルートサイズとすべてのREMベースのスケールを一緒に変更します。

ビューポートユニットは画面に従います

[ブラウザ]ウィンドウでビューポートユニットがスケーリングします。 50VW =画面幅の半分、100VH =フル画面の高さ。これは、画面を埋めるヒーローセクションに最適です。

通常、モバイルブラウザはビューポートユニットでうまく機能しません。アドレスバーは、スクロールするときに隠れて表示され、100VHセクションがアドレスバーが表示されると切断される可能性があります。

VMINとVMAX画面の幅と高さを比較してから、1つを選択します。 VMINは、どちらかが小さい方を使用します。直立した電話では幅が小さくなるため、幅の50Vmin = 50％です。風景に回転すると高さが小さくなるため、50Vminは高さの50％に切り替わります。 vmaxは反対を行います。常に大きな次元を選択します。これは、より大きな測定でスケーリングする必要がある要素に役立ちます。

パーセンテージはコンテナに適応します

パーセンテージベースの幅は、常に親要素の幅に関連しています。高さの割合は、親が定義された高さを持っている場合にのみ、同じ方法でスケーリングできます。そうでなければ、彼らは期待どおりに機能しないかもしれません。

パディングとマージンの割合は、上部と下の値であっても、常に親の幅から計算されます。これにより、特に流動的な設計で、一貫した間隔と比例レイアウトを作成できます。

違い

絶対ユニットは厳格な定規のようなものですが、相対ユニットは測定テープのように振る舞います。どちらも物事を測定しますが、条件が変化すると非常に異なって反応します。これらがどのように比較するかは次のとおりです。

ほとんどの開発者は、両方を使用することになります：鮮明な大きな構造的な部分のために、鮮明な姿と相対ユニットを維持する必要がある小さなもののピクセル。

デザインに適したユニットを選択します

ウェブサイトのさまざまな部分には、さまざまなアプローチが必要です。一部の要素はどこにでも同じサイズにとどまりますが、他の要素は画面サイズまたはユーザー設定に基づいて適応します。ほとんどの開発者はこれを考え直します。より簡単な方法があります。ユニットをその要素にしたいことを一致させます。

最初にユーザーについて考えてください

人々はあなたのサイトを予想外の方法で閲覧します。誰かが電話で訪問します。あなたのテキストは小さく見えますので、彼らはズームするためにピンチします。 REMユニットで構築した場合、すべてが比例して一緒に成長します。どこでもピクセルを使用した場合、物事は重複して壊れ始めます。

メインナビゲーションには、ページ間で一貫したサイジングが必要です。 REMユニットは、ベースフォントサイズに結び付けます。ロゴには、ブランドの一貫性のために正確な寸法が必要です。ピクセルはそれを鮮明に保ちます。

多くのユーザーは、読みやすくするためにブラウザのデフォルトのフォントサイズを変更します。ピクセルをハードコードすると、彼らの好みを無視します。誰かが125％にズームインすると、ピクセルベースのレイアウトがバラバラになります。相対ユニットは自動的に適応します。

適切なユニットを選ぶ簡単な方法

詳細に迷子にならずにあなたの選択を分解する方法は次のとおりです。

• その周りのテキストと間隔： EMまたはREMを使用します。テキストサイズのボタンパディングスケール。マージンは見出しに比例したままです。
• 画面関連の要素： ViewPortユニットを使用します。ほとんどの画面を埋めるヒーローセクション。特定の画面パーセンテージを取得するサイドバー。
• 正確な制御が必要な要素：ピクセルを使用します。サクサクしたままの薄い境界線。完璧なアライメントを備えた小さなアイコン。正確なオフセットで影を落とします。
• コンテナベースの要素：パーセンテージを使用します。親に適応する柔軟なグリッド。コンテナでスケーリングする画像。

簡単に開始します。装飾的なビットにはピクセル、テキストと関連する間隔のREM、スクリーンサイズのセクションのビューポートユニット、柔軟なコンテナの割合を使用します。関連する要素のシステムを選択して、それに固執します。

避けるべき一般的なCSSユニットのミス

安全だと感じているので、すべてのピクセルを選びます。ボタンは、ラップトップの幅75ピクセルで完璧に見えます。その後、誰かが電話であなたのサイトを開き、その同じボタンが画面の半分を食べます。ロゴには正確な寸法が必要ですが、コンテンツ領域には柔軟性が必要です。これらのアプローチをランダムに混ぜると、カオスが作成されます。したがって、標準のCSSユニットのミスを避けるためのいくつかのヒントを次に示します。

1。すべてのピクセルを選びます

20ピクセルが20ピクセルを意味するため、ピクセルは安全だと感じています。シンプルですよね？ 300ピクセル幅のサイドバーは、デスクトップで正常に動作します。モバイルでは、コンテンツを薄いストリップに押しつぶす巨大なブロックになります。 16ピクセルのテキストは、高密度の画面で読めません。

誰かがブラウザのフォントサイズを大きくすると、ピクセルベースのレイアウトは適応しません。テキストはコンテナをオーバーフローします。ボタンは他の要素の後ろに消えます。サイドバーがメインコンテンツにクラッシュします。

真に正確なコントロールを必要とするもののためにピクセルを保存します：薄い境界、小さなアイコン、ドロップシャドウ。他のすべてについては、相対ユニットを使用してみてください。

2。制御不能になるEMユニット

EMユニットは、親のフォントサイズに基づいてスケーリングします。あなたがネストを始めるまで、それは柔軟に聞こえます。コンテナが1.2EMを使用し、その内側の見出しが1.5EMを使用しているとします。 1.2×1.5 = 1.8であるため、その見出しはルートに対して1.8EMになります。ネスティングを維持し、サイズは雪だるま式です。 1つの親フォントサイズを変更し、すべてが下流にシフトします。

REMユニットはこれを修正します。それらは常にルート要素を参照するため、2レムはどこで使用されていても同じことを意味します。これにより、タイポグラフィが拡張と制御が容易になります。

3.モバイルでジャンプする視点ユニット

ヒーローセクションを100VHに設定すると、画面が完全に記入されます。モバイルブラウザを除いて、スクロールするときにアドレスバーを非表示にして表示します。 iOSのサファリとAndroidのChromeはすべてこれを行います。アドレスバーが消えると、100VHセクションが突然高くなりすぎます。それが再び現れると、あなたのコンテンツは遮断されます。

新しいDVHユニットは、変化するビューポートサイズに適応します。ただし、ブラウザのサポートはまだ追いついています。フォールバックとして、CSSカスタムプロパティを使用したJavaScriptソリューションは機能します。

固定サイズでアクセシビリティを破る

ユーザーは、読みやすさを向上させるためにブラウザのデフォルトのフォントサイズを調整することがよくあります。固定ピクセルを使用してテキスト、ボタン、および間隔をハードコードすると、レイアウトが破損する可能性があります。テキストがオーバーフローする可能性があり、ボタンが使用できなくなり、重要な要素がズームレベルが高くなると消える可能性があります。

WCAGやAppleの基準などのアクセシビリティガイドラインに従って、タッチターゲットは、少なくとも44×44 CSSピクセルであることをお勧めします。より小さなターゲットは、運動障害のあるユーザーが正確にタップするために困難になる可能性があります。

固定サイズでロックする代わりに、REMなどのスケーラブルユニットを使用して、ユーザーの好みを尊重するレイアウトを作成します。ベースフォントサイズを要素に設定し、サイト全体の相対ユニットとの間隔を一貫してスケーリングし、一貫してスケーリングします。

5。高密度画面上の小さなテキスト

さまざまなデバイスがピクセルを異なってパックします。携帯電話の画面には1インチあたり400ピクセルの場合、モニターには100ピクセルがあります。同じピクセルカウントは、各デバイスで完全に異なります。

デスクトップモニターでは、14ピクセルのテキストがうまく見えます。高密度の電話画面では、同じ14ピクセルが微視的になります。ユーザーは目を細めてピンチしてズームします。

相対ユニットを使用すると、オペレーティングシステムとブラウザがスケーリングを自動的に処理します。 1REMテキストは、高密度画面で大きくなり、低密度の画面では小さくなります。

6.計画なしのユニットの混合

一部の見出しにはREM、他の見出しにはEM、ボディテキストにはピクセルを使用します。異なる要素が異なる速度でスケーリングするため、デザインにはリズムがありません。関連要素のシステムを選択します。見出しがREMを使用する場合、すべての見出しはREMを使用する必要があります。間隔がEMを使用している場合は、関連する間隔にEMを使用し続けます。

デバイスとユーザー設定で選択をテストします。誰かがフォントサイズを増やしたときのデザインの見た目を確認してください。数分のテストでは、後でバグ修正の時間を節約できます。

Divi 5の高度なユニットがCSS管理を簡素化する方法

CSSユニットとのレスリングは、速く古くなります。値を微調整し、さまざまなデバイスでテストし、壊れたレイアウトを修正するのに何時間も費やします。 Divi 5はこれを完全に変更します。新しいシステムは、ユニットの選択から当て推量を取り除き、コードに触れることなく応答性のある動作を視覚的に制御できます。しかし、最初に、Diviとは何かを理解しましょう。

Diviとは何ですか？

Diviは、WordPressをサイトに見栄えを良くしたい人にとって実際に理にかなっているものに変えるWebサイトビルダーです。

ページの周りに200以上のモジュールのいずれかをドラッグします。それが座っている場所にテキストを変更します。新しい色を選び、すぐに表示されます。あなたはあなたに嘘をつくプレビューモードではなく、本物に取り組んでいます。

テーマには、吸わない2000以上のレイアウトが含まれます。レストラン、写真家、コンサルタント、および他の数十のビジネスのための本物のデザイン。好きなものを見つけて、それが正しいと感じるまで微調整してください。

テーマビルダーを使用すると、すべてを制御できます。ジェネリックに見えないヘッダーを作成し、傑出したブログページを作成し、404ページを実際に見たいものに変えます。

AIを使用してWebサイトを構築します

Divi AIは、デザインエリア内で動作します。テキストが必要ですか？それはそれを書いています。

画像が欲しいですか？それはそれらを作ります。写真の編集を説明することもでき、作業を処理します。

同様に、コードと新しいセクションの場合。

Diviクイックサイトは、どこから始めればいいのか、空のページを見つめているときに、その恐ろしい瞬間を解決します。私たちのチームが実際に設計したスターターサイトから選んで、オリジナルの画像とアートワークを完備しています。

または、Quick Quick Sites + Divi AIにビジネスを説明し、ゼロから何かを構築してください。

これらのAIで構築されたサイトには、あなたが言ったことと一致する実際の見出し、コピー、および画像があります。 AIですべてを生成したり、塗りつぶしから写真をつかむか、自分のショットのためにプレースホルダーをドロップします。最初にフォントと色を設定してから、AIに回避します。後ですべてを編集することができます。

Divi 5の新しいもの

Divi 5はすべてをゼロから再構築します。古いショートコードシステムを廃棄し、今日のWeb標準でうまく機能するものを構築しました。サイトの読み込みが速く、編集者はより速く応答し、以前は不可能だったツールにアクセスできます。

しかし、何が新しいのですか？見てください：

フレックスボックスレイアウトシステム

DIVIでモダンでレスポンシブなWebサイトを構築することは、より速く、より直感的になりました。 FLEXBOXレイアウトシステムをDIVI 5に導入し、垂直アライメント、コンテンツラッピング、間隔の簡単なコントロールを提供しました。コードと戦ったり、複雑な回避策を使用したりせずに、必要な正確なレイアウトを作成します。

オプショングループプリセット

オプショングループプリセットを使用すると、どこでもミックスして一致できるスタイルを保存できます。一度シャドウスタイルを作成し、ボタン、カード、セクション、必要なもので使用します。プリセットを更新すると、すべてがサイト全体で即座に変更されます。

設計変数

ブランドの色、フォント、間隔はすべて1つの場所に住んでいます。 1つの変数を編集して、青から緑に切り替えることができます。サイト全体が自動的に更新されるため、数十のモジュールを狩る必要はありません。

高度なユニット

これで、PXからVW/VHまでのDivi 5：with Divi 5ですべての高度なCSSユニットを使用できます。 CSS関数は現在、ビルダーでも機能します。画面の高さの80％からヘッダーを差し引いたセクションが必要ですか？タイプ計算（80VH - 100px）と設定します。インターフェイスは、clamp（）、min（）、max（）を処理します。これらすべての応答性のトリック。

ネストされた列

必要なだけ深く、行が他の行の中に入ります。構造と戦うことなく、複雑な雑誌のレイアウトまたは詳細な製品ページを構築します。各レベルでは、間隔とデバイスの動作を完全に制御できます。

ワンクリック編集

ポイントして、ページの任意の場所をクリックして編集を開始します。小さな編集ボタンを検索したり、複数のメニューをナビゲートしたりする日が私たちの背後にあります。

カスタマイズ可能なブレークポイント

Divi 5のカスタマイズ可能なブレークポイントを使用すると、3つのカスタマイズ可能なブレークポイントを使用すると、7つの異なる画面サイズを有効にできます。大規模なモニターで1200px、タブレットで900px、電話で650pxなど、各ブレークポイントをデザインに必要な場所に正確に設定します。

マルチパネルワークスペース

必要に応じてワークスペースパネルを配置します。複数の設定パネルを同時に開いたままにしてください。

属性管理

サイトのさまざまな部分間の特定の要素を手術の精度でコピーします。ある要素からの間隔だけ、別の要素からの色、または3分の1のプリセットだけをつかみます。これ以上のオールオアナッシング転送はありません。

キャンバススケーリング

ワークスペースのサイズを調整して、サイトの表示方法をさまざまなデバイスにプレビューします。個別のプレビューモードに切り替えることなく、モバイル、タブレット、デスクトップビューを参照してください。

パフォーマンスの改善

今はすべてが軽く感じています。ページの読み込みが速くなり、ビルダーがより速く応答し、複雑なレイアウトは以前のようにインターフェイスを動かしません。

モジュールグループ

複数のモジュールを1つのコンテナにバンドルします。テキストブロック、画像、ボタンを単一のユニットとして扱います。それらを一緒に動かし、それらを一緒にスタイリングし、すべてを他のページにコピーします。

HSLカラーシステム

色合い、飽和、および軽さの制御を備えた配色を構築します。プロフェッショナルに見えるブランドの色のバリエーションを作成します。数学は、心地よい組み合わせを自動的に作成します。

もっとあります…

• ループビルダー：ブロググリッドや製品リストなどのコンテンツを繰り返すためのテンプレートをビルドします。一度設計して、システムに実際のコンテンツで入力します。
• WooCommerceモジュール：製品グリッド、個々の製品ページ、およびカート機能用のストア固有のモジュール。オンラインストアが必要とするすべてのものは、販売用に特別に構築されています。

DIVI 5でCSS変数を使用します

複数の要素にわたって一貫した値が必要な場合、ウェブサイトのスタイリングは退屈になります。 CSS変数は、再利用可能な値を1つの場所に保存することでこれを解決します。 DIVI 5は、従来のCSS変数と独自の設計変数システムの両方をサポートしているため、サイトの外観を管理する方法を柔軟に提供します。

DIVI 5は、入力フィールドにCSSユニットを直接受け入れます。以前にピクセルのみを使用できた場合、REM、VW、またはパーセンテージ値を書き込みます。ビルダーは、追加のセットアップなしでこれらのユニットをすぐに処理します。

CSS関数も同じように機能します。液体のタイポグラフィまたは最小（500px、90％）のために、クランプ（1REM、4VW、3REM）を入力します。 Visual Builderは、設計時にこれらの計算をリアルタイムで処理します。

変数は、このシステムとシームレスに統合されます。 –header-height：80pxのようなCSS変数を定義し、任意のフィールドでvar（–header-height）を使用して参照します。 Diviは構文を認識し、保存された値を自動的に適用します。

この直接的な統合では、従来のユニット、最新のCSS関数、および同じプロジェクト内の変数を混合できることを意味します。境界にはピクセル、セクションのビューポートユニット、繰り返し測定に変数を使用します。

設計変数：高度なユニットを適用するより良い方法

設計変数は、CSS変数に代わるDivi 5の組み込みの組み込みです。それらは、コードの知識を必要とせずに、視覚インターフェイスを通して完全に機能します。 Diviの変数マネージャーパネルを使用して、これらの変数を作成および管理します。

これらの変数は、単純な数字と色を超えて拡張されます。完全な画像URL、テキストコンテンツ、または複雑なスタイリング値を保存します。デザイン変数を更新すると、それを使用するすべての要素がウェブサイト全体で即座に変更されます。

DIVI 5は、さまざまなコンテンツのニーズを処理するためのいくつかの可変タイプを提供します。

• カラー変数は、ヘックスコード、グラデーション、ブランドの色、テキストの色、背景、境界を保存します。
• フォント変数は、テーマのカスタマイザーの制限を超えてグローバルにタイポグラフィを管理し、あらゆるテキスト領域で動作します。
• 数値変数は、 CSSユニットとClamp（）、Calc（）、Min（）、Max（）などのCSS関数を受け入れます。
• 画像変数は、ロゴ、背景、パターンなどの再利用可能な画像を保持します。
• テキスト変数は、連絡先情報、タグライン、ビジネスの詳細などの再利用可能なテキスト文字列を保存します。
• URL変数は、ソーシャルメディア、アフィリエイト、プロモーション、およびTel/Mailtoリンク用の再利用可能なリンクを保存します。

Number Design変数を備えたCSSユニットのセットアップ

数値変数により、一貫性を保つデザインのビルディングブロックが得られます。さまざまな要素で同じ測定を繰り返すときに最適に機能します。さらに、CSSコードとレスリングするよりもはるかに簡単です。

Diviインターフェイスで変数マネージャーを見つけます。新しい番号変数を作成し、デザインに合った値を与えます。曖昧なラベルの代わりに「ボタンパッジング」や「セクションギャップ」などのクリア名を使用します。

可変ライブラリを作成します

次のような一般的な変数を追加できます。

• 3REMの「ボタンハイト」 - テキストサイズのボタンスケール
• 8VHの「セクションパッジング」 - 間隔は画面の高さに適応します
• 0.5レムの「ボーダーラジウス」 - 丸い角は比例しています
• 75VHの「Hero-Height」 - ヒーローセクションはほとんどの画面を埋めます
• 1pxの「fine-border」 - 鮮明なラインは鋭いままです
• クランプ（1REM、2.5VW、2REM）の「Fluid-Text」 - テキストスケール
• Min（90％、1200px）の「コンテンツ幅」 - コンテナは読みやすいままです
• Calc（2REM + 2VW）の「ダイナミックギャップ」 - 画面サイズで間隔が大きくなります

これらをモジュール、セクション、または行の設定に適用します。

REM変数はテキストサイズのスケーリングを行います。 VHユニットは小さな画面に適応します。 Clamp（）を使用した変数（）最小値と最大値の間で自動的に調整します。

接続されたプリセットの構築

変数で要素をスタイリングした後、オプショングループプリセットとして間隔を保存します。このプリセットには、数値変数への参照が保持されます。

このプリセットを他のモジュールに適用すると、同じ可変ベースの間隔を継承します。変数マネージャーの2REMから3REMに「カードパッジング」を更新し、そのプリセットアップデートを自動的に使用するすべての要素を更新します。

プリセットは同じままですが、値は変わります。これは、色、フォント、画像、テキスト、およびURLのすべてのデザイン変数で機能します。プリセットは静的ではなく動的になり、単一の変更でサイト全体の更新を可能にします。

CSSユニットとDIVI 5を備えたより良いWebサイトを構築します

CSSユニットを取得することは、Webサイトの構築方法を変更します。壊れたレイアウトが少なくなり、デバイス全体で動作するデザインが作成されます。ピクセルネイル正確な詳細。相対ユニットは、さまざまな画面とユーザーの好みに適応します。

DIVI 5は、高度なCSSユニットを備えた建物を簡単にします。ビルダーに任意のユニットを入力し、即座に結果を表示します。設計変数は、サイト全体で測定値を一貫させ続けます。 1つの値を変更し、すべてが接続されている更新が自動的に更新されます。

あなたのウェブサイトは、ブレークポイントの戦いや無限のレイアウトの修正よりも価値があります。 Divi 5を試して、CSSユニットがイライラするデザインセッションをスムーズなワークフローに変えるのを見る。