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

2022-07-14


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

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

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

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

attr()

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      a:after {
        content: "(" attr(href) ")";
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <p><a href="https://feeld-uni.com/">FEELD BLOG</a></p>
  </body>
</html>

calc()

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #div {
        margin: 0 auto;
        width: calc(100% - 100px);
        border: 1px solid black;
        background-color: #ccc;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <div id="div">Content</div>
  </body>
</html>

max()

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

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

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #div {
        background-color: pink;
        height: 100px;
        width: max(50%, 300px);
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <div id="div">Content</div>
  </body>
</html>

50%が適用される場合

300pxが適用される場合

min()

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #div {
        background-color: pink;
        height: 100px;
        width: min(75%, 400px);
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <div id="div">Content</div>
  </body>
</html>

75%が適用される場合

400pxが適用される場合

hsl()

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

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

  • hue:色相を意味しています。0 or 360は赤、120が緑、240が青を表しています。
  • saturation:彩度を意味しています。0%は灰色、100%はフルカラーを表しています。
  • lightness:明度を意味しています。0%は黒、50%は通常、100%は白を表します。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #p1 {
        background-color: hsl(0, 100%, 50%);
      }
      #p2 {
        background-color: hsl(60, 100%, 50%);
      }
      #p3 {
        background-color: hsl(120, 100%, 50%);
      }
      #p4 {
        background-color: hsl(180, 100%, 50%);
      }
      #p5 {
        background-color: hsl(240, 100%, 50%);
        color: white;
      }
      #p6 {
        background-color: hsl(300, 100%, 50%);
      }
      #p7 {
        background-color: hsl(0, 0%, 0%);
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <p id="p1">Red</p>
    <p id="p2">Yellow</p>
    <p id="p3">Green</p>
    <p id="p4">Light Blue</p>
    <p id="p5">Dark Blue</p>
    <p id="p6">Pink</p>
    <p id="p7">Black</p>
  </body>
</html>

hsla()

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #p1 {
        background-color: hsla(0, 100%, 50%, 1);
      }
      #p2 {
        background-color: hsla(0, 100%, 50%, 0.5);
      }
      #p3 {
        background-color: hsla(0, 100%, 50%, 0.1);
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <p id="p1">Red(1.0)</p>
    <p id="p2">Red(0.5)</p>
    <p id="p3">Red(0.1)</p>
  </body>
</html>

counter()

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      body {
        counter-reset: Chapter;
      }
      p::before {
        counter-increment: Chapter;
        content: "Chapter " counter(Chapter) ": ";
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <p>Javascript</p>
    <p>HTML</p>
    <p>CSS</p>
  </body>
</html>

var()

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      :root {
        --main-bg-color: aqua;
      }
      #div1 {
        background-color: var(--main-bg-color);
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <div id="div1">
      FEELD Blogではエンジニアに役立つ情報を発信しています。<br />
      プログラミングだけでなくデザインやWebサービスなど、是非参照ください。
    </div>
  </body>
</html>

cubic-bezier()

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: blue;
        transition: width 3s;
        transition-timing-function: cubic-bezier(1.1, 1.1, 1, 1.1);
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <div></div>
  </body>
</html>

通常状態

マウスオーバーした際

linear-gradient()

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #linear {
        height: 200px;
        background-image: linear-gradient(Blue, Red, Yellow, green, Black);
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <div id="linear"></div>
  </body>
</html>

repeating-linear-gradient()

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #linear {
        height: 200px;
        background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <div id="linear"></div>
  </body>
</html>

radial-gradient()

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #linear {
        height: 200px;
        width: 300px;
        background-image: radial-gradient(red, yellow, green);
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <div id="linear"></div>
  </body>
</html>

repeating-radial-gradient()

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #linear {
        height: 200px;
        width: 300px;
        background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <div id="linear"></div>
  </body>
</html>

rgb()

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #p1 {
        background-color: rgb(255, 0, 0);
      }
      #p2 {
        background-color: rgb(0, 255, 0);
      }
      #p3 {
        background-color: rgb(0, 0, 255);
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <p id="p1">Red</p>
    <p id="p2">Green</p>
    <p id="p3">Blue</p>
  </body>
</html>

rgba()

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #p1 {
        background-color: rgba(255, 0, 0, 1);
      }
      #p2 {
        background-color: rgba(255, 0, 0, 0.5);
      }
      #p3 {
        background-color: rgba(255, 0, 9, 0.1);
      }
    </style>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <p id="p1">Red (1.0)</p>
    <p id="p2">Red (0.5)</p>
    <p id="p3">Red (0.1)</p>
  </body>
</html>

最後に

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

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