フロントエンド開発者が知っておくべき 10 の CSS 関数

CSS (Cascading Style Sheets) は、HTML で記述されたドキュメントの外観と書式設定を記述するために使用されるスタイル シート言語です。これは、開発者が Web サイトやアプリケーションの外観を制御できるため、Web 開発の重要な部分です。

この記事では、すべてのフロントエンド開発者が知っておくべき最も便利な CSS 関数のいくつかについて説明します。これらの関数を使用すると、Web サイトやアプリケーションにスタイルや書式設定を追加でき、ユーザー エクスペリエンスを大幅に向上させることができます。

他のプログラミング言語と同様、CSS の関数は 1 行のソリューションを提供することでタスクを簡素化します。ただし、他のプログラミング言語とは異なり、CSS の関数の結果は実際には Web サイト上のロジックに影響を与えることはなく、Web サイトに存在する視覚要素に影響を与えるためにのみ使用されます。

CSS で使用できるさまざまな種類の関数を以下に示します。

• カスタム属性の機能

• カラー関数

• 疑似クラスセレクタ関数

• アニメーション機能

• フィルター関数

• 寸法およびスケーリング関数

• 比較関数

• 論理関数

CSS では他にも多くの種類の関数を使用できます。ただし、この記事では、そのうちの 10 個のみを説明します。

var()関数

CSS で使用できる唯一のカスタム プロパティ関数は、var 関数です。 CSS でカスタム プロパティを使用する必要がある場合は、必ず var 関数を使用してそれを参照します

＃＃＃例＃＃＃

var

関数を使用してカスタム プロパティを参照する例を以下に示します。 - リーリー calc() 関数

CSS での数学/算術計算に使用される最も一般的な関数は、

calc

関数です。これは、上で説明した var 関数とともにプロパティ値を動的に計算するために広く使用されています。 ＃＃＃例＃＃＃ リーリー

calc

は、

em、rem

などの他の形式単位とともに使用することもできます。 url()関数 Web サイトに追加する必要があるリソースは、多くの場合、複数の異なる場所にあります。したがって、現時点では、これらのリソースを CSS ファイルにロードするために使用できる関数が必要です。 url 関数はまさにそれを行い、ソースの場所からターゲットの場所 (CSS ファイル) にリソースをリンクしてロードします。

画像、SVG、フォント、スタイルシートなど、あらゆる種類のリソースをリンクできます

＃＃＃例＃＃＃ リーリー

rgb()関数 Web サイトをデザインするとき、色を使用する必要があることがよくあります。 CSS では、16 進コード、色の名前など、色を使用するさまざまな方法が提供されています。色を表現する 1 つの方法は、RGB 値を使用することです。

rgb()

関数を使用すると、これらの 16 進コードを RGB に変換し、スタイルシートで使用できます。

＃＃＃例＃＃＃ リーリー

別の関数 rgba を使用して、定義された色の不透明度を制御できます。

hsl()関数 色を表現するために使用できるもう 1 つの関数は、hsl 関数です。色を

色相、彩度、および

値として定義します。開発者の中には、RGB の代わりにそれを使用することを好む人もいます。

＃＃＃例＃＃＃ リーリー

rgb と同様に、hsl にも変更されたバージョン

hsla

があり、これも定義された色の不透明度を制御します。

blur()関数 要素を区別するために、ファジー関数を使用します。

＃＃＃例＃＃＃ リーリー

不透明度 (opacity()) 関数

要素の不透明度は、対応する要素の可視性です。この背景を通して見える背景の量を指定します。 ＃＃＃例＃＃＃ リーリー The nth-child() function

の中国語訳は次のとおりです:

nth-child() function

親要素の特定の子要素を選択する必要がある場合は、

nth-child

関数を使用できます。これは、ニーズに基づいてさまざまな要素をターゲットにするためにいくつかの変更を加えた疑似クラス セレクター関数です。

＃＃＃例＃＃＃ リーリー

そのバリエーションには、

nth-last-child、nth-of-type、nth-last-of-type などがあります。

scale()関数

この関数を使用すると、要素とその子のサイズを制御できます。この変化を発生させる軸を定義することもできます。

＃＃＃例＃＃＃ リーリー

translate() 関数

この関数を使用すると、要素の位置を変更できます。要素を変更する必要がある軸を指定することもできます。 ＃＃＃例＃＃＃ リーリー ＃＃＃結論は＃＃＃ この記事では、関数、CSS における関数の目的、関数や他のプログラミング言語との違いについて説明しました。また、CSS で利用できるさまざまな種類の関数についても学びました。最後に、すべてのフロントエンド開発者が知っておく必要がある、CSS で最も一般的に使用される 10 個の関数を見ていきました。これらは最も人気のある機能の一部にすぎませんが、学ぶべきことは常にあります。

以上がフロントエンド開発者が知っておくべき 10 の CSS 関数の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。