Tbpgr Blog

元エンジニア 人事 tbpgr(てぃーびー) のブログ

css3 | 色指定時にアルファも同時指定する

概要

色指定時にアルファも同時指定する

内容

CSS3では色指定時にアルファも同時指定することが可能です。

background-color:hsla(h,s,l,alpha);
background-color:rgba(r,g,b,alpha);

サンプル

サンプル作成用のRubyスクリプト
# encoding: utf-8
require "erb"

(3..4).each do |h_cnt|
  h = 90 * h_cnt
  (3..4).each do |s_cnt|
    s = 25 * s_cnt
    (0..2).each do |l_cnt|
      l = 25 * l_cnt
      (0..4).each do |a_cnt|
        a = 0.25 * a_cnt
        template = "<span style=\"background-color:hsla(<%= h%>,<%= s%>%,<%= l%>%,<%= a%>);\">hsla(<%= h%>,<%= s%>%,<%= l%>%,<%= a%>)</span>"
        erb = ERB.new(template)
        ret = erb.result(binding)
        puts ret
      end
      puts "<br />"
    end
    puts "<br />"
  end
  puts "<br />"
end
サンプルhtml+CSS3
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  span {
    border-style: solid;
  }
  </style>
</head>
<body>
  <div id="contents">
    <span style="background-color:hsla(270,75%,0%,0.0);">hsla(270,75%,0%,0.0)</span>
    <span style="background-color:hsla(270,75%,0%,0.25);">hsla(270,75%,0%,0.25)</span>
    <span style="background-color:hsla(270,75%,0%,0.5);">hsla(270,75%,0%,0.5)</span>
    <span style="background-color:hsla(270,75%,0%,0.75);">hsla(270,75%,0%,0.75)</span>
    <span style="background-color:hsla(270,75%,0%,1.0);">hsla(270,75%,0%,1.0)</span>
    <br />
    <span style="background-color:hsla(270,75%,25%,0.0);">hsla(270,75%,25%,0.0)</span>
    <span style="background-color:hsla(270,75%,25%,0.25);">hsla(270,75%,25%,0.25)</span>
    <span style="background-color:hsla(270,75%,25%,0.5);">hsla(270,75%,25%,0.5)</span>
    <span style="background-color:hsla(270,75%,25%,0.75);">hsla(270,75%,25%,0.75)</span>
    <span style="background-color:hsla(270,75%,25%,1.0);">hsla(270,75%,25%,1.0)</span>
    <br />
    <span style="background-color:hsla(270,75%,50%,0.0);">hsla(270,75%,50%,0.0)</span>
    <span style="background-color:hsla(270,75%,50%,0.25);">hsla(270,75%,50%,0.25)</span>
    <span style="background-color:hsla(270,75%,50%,0.5);">hsla(270,75%,50%,0.5)</span>
    <span style="background-color:hsla(270,75%,50%,0.75);">hsla(270,75%,50%,0.75)</span>
    <span style="background-color:hsla(270,75%,50%,1.0);">hsla(270,75%,50%,1.0)</span>
    <br />
    <br />
    <span style="background-color:hsla(270,100%,0%,0.0);">hsla(270,100%,0%,0.0)</span>
    <span style="background-color:hsla(270,100%,0%,0.25);">hsla(270,100%,0%,0.25)</span>
    <span style="background-color:hsla(270,100%,0%,0.5);">hsla(270,100%,0%,0.5)</span>
    <span style="background-color:hsla(270,100%,0%,0.75);">hsla(270,100%,0%,0.75)</span>
    <span style="background-color:hsla(270,100%,0%,1.0);">hsla(270,100%,0%,1.0)</span>
    <br />
    <span style="background-color:hsla(270,100%,25%,0.0);">hsla(270,100%,25%,0.0)</span>
    <span style="background-color:hsla(270,100%,25%,0.25);">hsla(270,100%,25%,0.25)</span>
    <span style="background-color:hsla(270,100%,25%,0.5);">hsla(270,100%,25%,0.5)</span>
    <span style="background-color:hsla(270,100%,25%,0.75);">hsla(270,100%,25%,0.75)</span>
    <span style="background-color:hsla(270,100%,25%,1.0);">hsla(270,100%,25%,1.0)</span>
    <br />
    <span style="background-color:hsla(270,100%,50%,0.0);">hsla(270,100%,50%,0.0)</span>
    <span style="background-color:hsla(270,100%,50%,0.25);">hsla(270,100%,50%,0.25)</span>
    <span style="background-color:hsla(270,100%,50%,0.5);">hsla(270,100%,50%,0.5)</span>
    <span style="background-color:hsla(270,100%,50%,0.75);">hsla(270,100%,50%,0.75)</span>
    <span style="background-color:hsla(270,100%,50%,1.0);">hsla(270,100%,50%,1.0)</span>
    <br />
    <br />
    <br />
    <span style="background-color:hsla(360,75%,0%,0.0);">hsla(360,75%,0%,0.0)</span>
    <span style="background-color:hsla(360,75%,0%,0.25);">hsla(360,75%,0%,0.25)</span>
    <span style="background-color:hsla(360,75%,0%,0.5);">hsla(360,75%,0%,0.5)</span>
    <span style="background-color:hsla(360,75%,0%,0.75);">hsla(360,75%,0%,0.75)</span>
    <span style="background-color:hsla(360,75%,0%,1.0);">hsla(360,75%,0%,1.0)</span>
    <br />
    <span style="background-color:hsla(360,75%,25%,0.0);">hsla(360,75%,25%,0.0)</span>
    <span style="background-color:hsla(360,75%,25%,0.25);">hsla(360,75%,25%,0.25)</span>
    <span style="background-color:hsla(360,75%,25%,0.5);">hsla(360,75%,25%,0.5)</span>
    <span style="background-color:hsla(360,75%,25%,0.75);">hsla(360,75%,25%,0.75)</span>
    <span style="background-color:hsla(360,75%,25%,1.0);">hsla(360,75%,25%,1.0)</span>
    <br />
    <span style="background-color:hsla(360,75%,50%,0.0);">hsla(360,75%,50%,0.0)</span>
    <span style="background-color:hsla(360,75%,50%,0.25);">hsla(360,75%,50%,0.25)</span>
    <span style="background-color:hsla(360,75%,50%,0.5);">hsla(360,75%,50%,0.5)</span>
    <span style="background-color:hsla(360,75%,50%,0.75);">hsla(360,75%,50%,0.75)</span>
    <span style="background-color:hsla(360,75%,50%,1.0);">hsla(360,75%,50%,1.0)</span>
    <br />
    <br />
    <span style="background-color:hsla(360,100%,0%,0.0);">hsla(360,100%,0%,0.0)</span>
    <span style="background-color:hsla(360,100%,0%,0.25);">hsla(360,100%,0%,0.25)</span>
    <span style="background-color:hsla(360,100%,0%,0.5);">hsla(360,100%,0%,0.5)</span>
    <span style="background-color:hsla(360,100%,0%,0.75);">hsla(360,100%,0%,0.75)</span>
    <span style="background-color:hsla(360,100%,0%,1.0);">hsla(360,100%,0%,1.0)</span>
    <br />
    <span style="background-color:hsla(360,100%,25%,0.0);">hsla(360,100%,25%,0.0)</span>
    <span style="background-color:hsla(360,100%,25%,0.25);">hsla(360,100%,25%,0.25)</span>
    <span style="background-color:hsla(360,100%,25%,0.5);">hsla(360,100%,25%,0.5)</span>
    <span style="background-color:hsla(360,100%,25%,0.75);">hsla(360,100%,25%,0.75)</span>
    <span style="background-color:hsla(360,100%,25%,1.0);">hsla(360,100%,25%,1.0)</span>
    <br />
    <span style="background-color:hsla(360,100%,50%,0.0);">hsla(360,100%,50%,0.0)</span>
    <span style="background-color:hsla(360,100%,50%,0.25);">hsla(360,100%,50%,0.25)</span>
    <span style="background-color:hsla(360,100%,50%,0.5);">hsla(360,100%,50%,0.5)</span>
    <span style="background-color:hsla(360,100%,50%,0.75);">hsla(360,100%,50%,0.75)</span>
    <span style="background-color:hsla(360,100%,50%,1.0);">hsla(360,100%,50%,1.0)</span>
    <br />
    <br />
    <br />
  </div>
</body>
</html>
結果画像