[CSS入門] よく利用するCSS関数まとめ15選

2022.07.11

CSSはホームページを作成する上で欠かせません。
基本的にCSSの書き方としてはプロパティに対して値を設定して記述しますが、「CSS関数」と呼ばれるものが存在します。

このCSS関数では、javascriptのように計算したり条件に対して値を変形させたりすることができます。

今回は、このCSS関数についてよく利用するものコード記述例と表示結果の組み合わせで紹介します。

よく利用するCSS関数まとめ15選

attr()

HTMLタグで利用できる属性名として「title」や「href」などがありますが、attr()を利用することで、指定した属性名の値を取り出すことができます。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:after</span> {
        <span class="hljs-attribute">content</span>: <span class="hljs-string">"("</span> <span class="hljs-built_in">attr</span>(href) <span class="hljs-string">")"</span>;
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    FEELD BLOG

calc()

calc関数はCSSのプロパティに対して計算するために利用する関数となります。
calc関数を利用することで、レスポンシブ対応がとても簡単に実装できるようになります。

今回の例では、画面を100%として、そこから100pxを引いた値を設定することで、どのブラウザサイズに対しても100%から100px引いた状態で表示されます。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#div</span> {
        <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;
        <span class="hljs-attribute">width</span>: <span class="hljs-built_in">calc</span>(100% - 100px);
        <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ccc</span>;
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
        <span class="hljs-attribute">text-align</span>: center;
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    Content

max()

max()関数は、カンマで区切られた値のリストの中から最大の値をプロパティ値として使用します。

たとえば、レスポンシブ対応画面において 50%が300px未満の場合は300pxが適用され、300px以上の場合は50%が適用されるといったことができます。


  
    
    
    
    <span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span>
    
      <span class="hljs-selector-id">#div</span> {
        <span class="hljs-attribute">background-color</span>: pink;
        <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
        <span class="hljs-attribute">width</span>: <span class="hljs-built_in">max</span>(50%, 300px);
      }
    
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    Content

50%が適用される場合

300pxが適用される場合

min()

min()関数は、カンマで区切られた値のリストの中から、最も小さい値をプロパティ値として使用します。

たとえば、レスポンシブ対応画面において 75%が400px未満の場合は75%が適用され、400px以上の場合は400pxが適用されるといったことができます。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#div</span> {
        <span class="hljs-attribute">background-color</span>: pink;
        <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
        <span class="hljs-attribute">width</span>: <span class="hljs-built_in">min</span>(75%, 400px);
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    Content

75%が適用される場合

400pxが適用される場合

hsl()

hsl関数は「色相-彩度-明度」を用いて色を定義することができます。

hslはそれぞれ下記を定義しています。

  • hue：色相を意味しています。0 or 360は赤、120が緑、240が青を表しています。
  • saturation：彩度を意味しています。0%は灰色、100%はフルカラーを表しています。
  • lightness：明度を意味しています。0%は黒、50%は通常、100%は白を表します。


  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#p1</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsl</span>(0, 100%, 50%);
      }
      <span class="hljs-selector-id">#p2</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsl</span>(60, 100%, 50%);
      }
      <span class="hljs-selector-id">#p3</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsl</span>(120, 100%, 50%);
      }
      <span class="hljs-selector-id">#p4</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsl</span>(180, 100%, 50%);
      }
      <span class="hljs-selector-id">#p5</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsl</span>(240, 100%, 50%);
        <span class="hljs-attribute">color</span>: white;
      }
      <span class="hljs-selector-id">#p6</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsl</span>(300, 100%, 50%);
      }
      <span class="hljs-selector-id">#p7</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsl</span>(0, 0%, 0%);
        <span class="hljs-attribute">color</span>: white;
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    Red
    Yellow
    Green
    Light Blue
    Dark Blue
    Pink
    Black

hsla()

hsla関数は、 hsl関数にアルファモデルが追加された関数となります。

h、s、lの定義は変わりませんが、a「alpha」は不透明度を設定することができます。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#p1</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsla</span>(0, 100%, 50%, 1);
      }
      <span class="hljs-selector-id">#p2</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsla</span>(0, 100%, 50%, 0.5);
      }
      <span class="hljs-selector-id">#p3</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">hsla</span>(0, 100%, 50%, 0.1);
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    Red（1.0）
    Red（0.5）
    Red（0.1）

counter()

counter関数は、CSSの「ol、li」と同じような機能を持っており、自動でナンバリングをする機能を実装することができます。基本的にどのタグに対しても行えます。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-tag">body</span> {
        <span class="hljs-attribute">counter-reset</span>: Chapter;
      }
      <span class="hljs-selector-tag">p</span><span class="hljs-selector-pseudo">::before</span> {
        <span class="hljs-attribute">counter-increment</span>: Chapter;
        <span class="hljs-attribute">content</span>: <span class="hljs-string">"Chapter "</span> <span class="hljs-built_in">counter</span>(Chapter) <span class="hljs-string">": "</span>;
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    Javascript
    HTML
    CSS

var()

var関数はカスタムプロパティに対して値を設定するために利用します。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-pseudo">:root</span> {
        <span class="hljs-attribute">--main-bg-color</span>: aqua;
      }
      <span class="hljs-selector-id">#div1</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--main-bg-color);
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span>;
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    
      FEELD Blogではエンジニアに役立つ情報を発信しています。
      プログラミングだけでなくデザインやWebサービスなど、是非参照ください。

cubic-bezier()

cubic-bezier関数はCubic Bezier曲線を作成するための関数です。4つの点によってい定義され、始点と終点を定義し、座標を設定することで作成します。

下記例は、マウスカーソルを当てると、指定した長さに伸びるエフェクトとなっています。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-tag">div</span> {
        <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
        <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
        <span class="hljs-attribute">background</span>: blue;
        <span class="hljs-attribute">transition</span>: width <span class="hljs-number">3s</span>;
        <span class="hljs-attribute">transition-timing-function</span>: <span class="hljs-built_in">cubic-bezier</span>(1.1, 1.1, 1, 1.1);
      }
      <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:hover</span> {
        <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!

通常状態

マウスオーバーした際

linear-gradient()

linear-gradient関数は背景画像としてグラデーションを設定することができる関数です。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#linear</span> {
        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
        <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(Blue, Red, Yellow, green, Black);
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!

repeating-linear-gradient()

repeating-linear-gradient関数は先ほどのlinear-gradient関数のようにグラデーションを作成するのですが、そのグラデーションをリピートします。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#linear</span> {
        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
        <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">repeating-linear-gradient</span>(red, yellow 10%, green 20%);
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!

radial-gradient()

radial-gradient関数は、放射線状のグラデーションを背景画像として作成するための関数です。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#linear</span> {
        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
        <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
        <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">radial-gradient</span>(red, yellow, green);
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!

repeating-radial-gradient()

repeating-radial-gradient関数は先ほど紹介したradial-gradient関数のように放射線状のグラデーション背景を作成しますが、その作成したグラデーションをリピートして表示します。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#linear</span> {
        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
        <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
        <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">repeating-radial-gradient</span>(red, yellow 10%, green 20%);
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!

rgb()

rgb関数は「RGB」モデルを使って色を定義するために利用する関数です。Rは「赤」Gは「緑」Bは「青」を示し、0〜255までの整数値または0〜100%のパーセンテージで指定します。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#p1</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(255, 0, 0);
      }
      <span class="hljs-selector-id">#p2</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(0, 255, 0);
      }
      <span class="hljs-selector-id">#p3</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(0, 0, 255);
        <span class="hljs-attribute">color</span>: white;
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    Red
    Green
    Blue

rgba()

rgba関数は先ほど紹介したrgb関数にアルファ値を追加したものとなります。不透明度を設定します。



  
    
    
    
    <span class="css"><span class="hljs-selector-tag">Static</span> <span class="hljs-selector-tag">Template</span></span>
    <span class="css">
      <span class="hljs-selector-id">#p1</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(255, 0, 0, 1);
      }
      <span class="hljs-selector-id">#p2</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(255, 0, 0, 0.5);
      }
      <span class="hljs-selector-id">#p3</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(255, 0, 9, 0.1);
      }
    </span>
  
  
    
      This is a static template, there is no bundler or bundling involved!
    
    Red (1.0)
    Red (0.5)
    Red (0.1)

最後に

今回はよく利用するCSS関数を、実コードと合わせて紹介しました。

かなり便利ですので是非ご利用ください。

タイトルとURLをコピーしました