cssで引く線を半透明にする
tableタグを使うと大抵区切り線をスタイルシートで引きます。
線があるととても見やすくなるためです。
それでふと思いました。
線を半透明にできないものか?
背景の場合は、background: rgba(255, 255, 255, 0.75);というように、半透明で塗る方法があります。
そもそも線は半透明にできるものなのか?
色々調べてみましたので、備忘録として記録いたします。
まずはできたものがこちら
論より証拠。
まずできたものがこちらです。
黄色の線が半透明になっています。
ソースはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>線を半透明化</title>
<style>
body
{
background: url(bg_photo.jpg) no-repeat fixed center center;
-ms-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
table
{
width: 600px;
border-collapse: collapse;
border-spacing: 0;
margin-left: auto;
margin-right: auto;
}
table tr:first-child th,
table tr:first-child td
{
border-top: solid 40px rgba(255, 255, 0, 0.4);
}
th
{
width: 120px;
vertical-align: top;
padding: 10px;
border-left: solid 40px rgba(255, 255, 0, 0.4);
border-right: solid 40px rgba(255, 255, 0, 0.4);
border-bottom: solid 40px rgba(255, 255, 0, 0.4);
text-shadow: white 2px 2px 2px, white -2px 2px 2px,white 2px -2px 2px, white -2px -2px 2px;
}
td
{
padding: 10px;
border-right: solid 40px rgba(255, 255, 0, 0.4);
border-bottom: solid 40px rgba(255, 255, 0, 0.4);
text-shadow: white 2px 2px 2px, white -2px 2px 2px,white 2px -2px 2px, white -2px -2px 2px;
}
</style>
</head>
<body>
<table>
<tr>
<th scope="row">見出し1</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th scope="row">見出し2</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th scope="row">見出し3</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</table>
</body>
</html>rgba()をそのまま使ったら半透明になりました。
背景はrgba()を使用すれば、半透明にできたので、線にも同じようにできるかなと思ってやってみたら、すんなり半透明にできました。
いきなり解決しました。
ですが、rgba()には一つ欠点があります。
色コードを10進数で3つに分けて記述しないといけない。
例えば赤色ならば、#ff0000 ですが、rgba()の場合、rgba(255,0,0,0.6) と色を3つに分けて記述しなければいけません。
直指定する場合はそれでもＯＫですが、root: 指定で色コードをスタイルシートで統一化している場合は事情が変わります。
初期設定値が使えないためです。
rgba()はとても使い勝手が良いですが、色コードを初期設定している場合は、16進数で指定したいです。
ということで、16進数の色コードが使える半透明の方法を調べました。
以下のやり方ならば、16進数の色コードを半透明にできます。
色々調べると、以下のやり方で16進数の色コードを半透明にできました。
color-mix(in srgb, #ff0 40%, transparent)線を引く場合は、以下のように記述します。
border-bottom: solid 40px color-mix(in srgb, #ff0 40%, transparent);16進数の色コードが使え、rgba()と同様に半透明にできます。
ただちょっと見慣れない引数があり、分かりにくいです。
引数がどういう意味なのか調べてみました。
color-mixの引数を調べてみました。
そもそも半透明にするだけなのに、なんでこんなに引数が多いのか?
なんで3つも引数があるのか？
と思いました。
調べてみると以下のようなことでした。
color-mixは2色を混ぜるために使用するため、2色分の引数が必要。
赤色と黄色を混ぜたら、オレンジになるというように、色を混ぜる指定のようです。
ですが、「transparent」は半透明という意味です。
半透明に色をかけわせることで、半透明色を実現していました。
2色指定する必要があるから、引数が多いのです。
引数（１）in srgbとは何？
これは、色空間と呼ばれるものを指定します。
srgbとは、RGBを指定しています。
他にもlabやlchなどありますが、ほぼRBGしか使いません。
inは文法で、必ずつけないといけないものでした。
引数（２）色コード1と割合を指定
2番目の引数#ff0は、そのまま色コードです。
これはわかりやすいです。
40％は、色コード1の割合を指定します。
色と、割合をスペースで区切るので、少しわかりにくいです。
カンマで区切りたいところですが、区切るとエラーになります。
引数（３）色コード２を指定
3番目の引数には、混ぜる色コードを指定します。
transparentを指定すると、半透明と混ぜるという意味になります。
色を混ぜる割合は省略可で、色コード１の割合をもとに、自動計算されます。
ちなみに指定することもできます。
疑問：色の割合指定が100％を超えたらどうなるの？
ここで疑問がわきました。
割合を指定できるということは、100％以上も指定できるということです。
例えば、以下のように指定したらどうなるのでしょうか?
color-mix(in srgb, #f00 50%, #00f 150%);
50%と150%なので、200％になっています。
調べてみたら、以下のようになるとのことでした。
色割合1と色割合2の合計値を100％として、自動で割合を決める。
今回の例だと、最大値200%なので、以下の意味に自動で置き換えられます。
color-mix(in srgb, #f00 25%, #00f 75%);
そこはエラーにせず、うまい具合になっていました。
こんなことできるかな？は発想のヒント
線を半透明にする必要性はあまりありません。
1pxの線を半透明にしても、さほど意味がないためです。
また半透明は、写真などの背景で使用することで、デザイン的に効力を発揮します。
なので、今まで線を半透明にする発想がありませんでした。
今回、写真背景ベースのサイトを構築しており、「線を半透明にしたら綺麗だろうな」と思ったのがきっかけです。
長いことこの仕事をしていて、まったく思いもしなかった発想でした。
疑問を流さず、じっくり考えてみることで、新しい発想にたどり着くものです。
ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
関連記事
