Materialise CSS のさまざまなユーティリティ クラスとは何ですか?

この記事では、Materialize CSS のさまざまなユーティリティ クラスについて学びますが、先に進む前に、Materialize CSS とは何かを理解しましょう。 Materialise CSS は、応答性の高い魅力的な Web アプリケーションを作成するためのさまざまな機能とユーティリティを提供する、人気のあるフロントエンド開発フレームワークです。 Materialise CSS の基本コンポーネントの 1 つは、HTML 要素にスタイルを追加するシンプルかつ効率的な方法を提供するユーティリティ クラスです。

ユーティリティ クラスは、特定のスタイルを実装するために任意の HTML 要素に適用できる事前定義された CSS クラスです。

使用できるユーティリティ クラスをいくつか示します

• カラーユーティリティクラス

• アライメントユーティリティクラス

• コンテンツを非表示/表示するためのユーティリティ クラス

• フォーマットユーティリティクラス

カラーユーティリティクラス

Materialize CSS のカラー ユーティリティ クラスは、HTML 要素に色を追加する簡単な方法を提供します。これらのクラスを使用すると、開発者は、事前定義されたさまざまな色から選択したり、Web アプリケーション用にカスタム色を定義したりできます。カラー ユーティリティ クラスには、テキスト カラー クラスと背景カラー クラスが含まれます。

＃＃＃例＃＃＃ リーリー

アライメントユーティリティクラス

Materialize CSS は、開発者が HTML 要素を整列できるようにする整列ユーティリティ クラスをいくつか提供します。これらのクラスには、 left-align、right-align、center-align、justify-align、valign-wrapper、および valign が含まれます。 left-align、right-align、center-align、および justify-align クラスはテキスト コンテンツを整列するために使用され、valign-wrapper および valign クラスは要素を垂直に整列するために使用されます。

テキストの配置

これを使用すると、要素内のテキストの水平方向の配置を制御でき、左揃え、右揃え、中央揃え、両端揃えなどのクラスが含まれます。

＃＃＃例＃＃＃ リーリー

垂直方向の配置

valign-wrapper クラスを使用して要素を垂直方向に整列させることができます。これを親コンテナ要素に適用すると、そのコンテナ内の子要素が垂直方向に整列されます。

＃＃＃例＃＃＃ リーリー

コンテンツの非表示/表示ユーティリティ クラス

非表示と表示のためのユーティリティ クラスを使用すると、デバイスのサイズに基づいてコンテンツを簡単に非表示および表示したり、コンテンツを選択的に表示したりできます。これらのユーティリティ クラスを使用すると、デバイスのサイズに基づいてさまざまなプロパティをコンテンツに適用できます。たとえば、モバイル デバイスでテキストを非表示にしたい場合は、大きな画面サイズまたはデスクトップ デバイスでのみ表示されるテキストに対して「hide-on-small-only」クラスを使用するだけです。

ここでは、.hide、.hide-on-small-only、.hide-on-med-only、.hide-on-med-and-down、.hide-on- など、さまざまなクラスが利用可能です。中と上、.hide-on-large-only、.show-on-small、.show-on-large、.show-on-medium-and-up、show-on-medium-and-down。

＃＃＃例＃＃＃ リーリー

フォーマットユーティリティクラス

Materialize CSS は、シンプルかつ効果的な方法で HTML コンテンツをフォーマットするために使用できるいくつかのクラスを提供します。これらの書式設定ユーティリティ クラスを活用すると、複雑な CSS コードを使用せずに、ブラウザに表示されるコンテンツを簡単に切り詰めたり、カード要素の上にマウスを置いたときにシャドウ効果を追加したりできます。

これらの書式設定効果を実現するには、次のクラスを使用できます -

＃＃＃１。切り詰める

このクラスは、コンテンツを切り詰め、現在表示されていないテキストがさらにあることを示す省略記号を表示するために使用されます。

＃＃＃例＃＃＃ リーリー ＃＃＃２。カードパネル.​​hoverable

このクラスは、カード要素の上にマウスを移動したときにカード要素にシャドウ効果を追加します。これは、カードに含まれるコンテンツを位置合わせして強調表示するのに役立ちます。

＃＃＃例＃＃＃ リーリー

この記事では、CSS が、応答性が高く視覚的に魅力的な Web アプリケーションを作成するためのさまざまな機能とユーティリティを提供する強力なフロントエンド開発フレームワークであることを学びました。その最も便利なコンポーネントの 1 つは、HTML 要素にスタイルを追加するためのシンプルかつ効果的な方法を提供する一連のユーティリティ クラスです。これらのユーティリティ クラスには、色、配置、コンテンツの非表示/表示、および書式設定クラスなどが含まれます。これらのユーティリティ クラスを活用することで、開発者は複雑な CSS コードを記述することなく、必要なスタイル効果を簡単に実現できます。全体として、Materialize CSS は、美しく応答性の高い Web アプリケーションを迅速かつ簡単に作成したい開発者にとって優れた選択肢です。

以上がMaterialise CSS のさまざまなユーティリティ クラスとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。