30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

CSS で斜線を描画する

CSS

HTML や CSS に、斜線を描画するための仕組みは用意されていない。
だがlinear-gradientを利用することで、このような斜線を描画できる。

f:id:numb_86:20200106013247p:plain

「Can I use...」で確認すると、主要なブラウザは全てlinear-gradientに対応している。

linear-gradientはその名の通り、線形グラデーションを表現するためのスタイル。
なぜそれを使って斜線を描画できるのか理解するために、まずはlinear-gradientの機能を説明する。

以降の例では全て<div></div>という空のdiv要素を用意し、そこにスタイルをあてていく。
説明しやすいからそうしただけであり、linear-gradientが機能する要素ならどこにでも斜線を描画できる。

まず、以下のようたスタイルを定義してみる。

div {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(0deg, skyblue, greenyellow);
}

すると、以下のように表示される。

f:id:numb_86:20200106012636p:plain

100*100の要素が表示され、上方向に、青から緑へとグラデーションになっている。
この画像と CSS を見比べると、linear-gradientの仕組みを理解しやすい。

ひとつめのパラメータである0degはグラデーションの方向を角度で指定している。0degは上方向を意味する。90degは右方向、180degは下方向、270degは左方向を意味する。
残りのパラメータは開始色と終了色。
そのため今回の例では、「上方向に向かって、skyblueからgreenyellowへとグラデーションさせる」という意味になる。

ひとつめのパラメータについては、角度ではなく、方向を表すキーワードを使うこともできる。
例えばto rightとすれば右方向に、to right topとすれば右上方向に、グラデーションさせる。

f:id:numb_86:20200106012648p:plain

このグラデーションを使って、どうやって斜線を表現するのか。重要なのが、「途中色」という概念である。

linear-gradientで指定できるのは、2色だけではない。開始色と終了色の他に途中色を指定して、複数の色でグラデーションさせることができる。

div {
  width: 300px;
  height: 100px;
  background-image: linear-gradient(90deg, black, white, skyblue, black);
}

f:id:numb_86:20200106012713p:plain

この例では、右方向に、黒 -> 白 -> 青 -> 黒とグラデーションさせている。

画像を見れば分かるように、デフォルトだと均等な間隔でのグラデーションになる。
この間隔を指定することもできる。

div {
  width: 300px;
  height: 100px;
  background-image: linear-gradient(90deg, black 20%, white 30%, skyblue 90%, black);
}

f:id:numb_86:20200106012727p:plain

0%から20%までが黒で、そこから10%分の領域が白へのグラデーションとなる。
そこから60%分の領域が青へのグラデーションとなり、残りの10%が青から黒へのグラデーションとなる。

これを応用することで、線を描画することができる。

div {
  width: 300px;
  height: 100px;
  background-image: linear-gradient(90deg, transparent 44%, black 44%, black 56%, transparent 56%);
}

f:id:numb_86:20200106012738p:plain

transparentは透明を意味するので、0%から44%地点までが透明である。
そして同じ44%地点で黒に切り替えるが、56%地点でも黒を指定している。そのため、この12%分の領域は黒で塗り潰される。
そして56%地点で再び黒から透明に切り替え、あとは最後まで透明が続く。
これが、「線」が表示される理由である。

あとはこれを傾ければ、斜線になる。

div {
  width: 300px;
  height: 100px;
  background-image: linear-gradient(to right top, transparent 44%, black 44%, black 56%, transparent 56%);
}

f:id:numb_86:20200106012750p:plain

要素の大きさやlinear-gradientの指定によって、斜線の太さ、角度、色を、自由に調整できる。

f:id:numb_86:20200106012801p:plain

＊＊＊

個人的な感想だが、この手法はだいぶ無理をしている感がある。
ブラウザは本来ドキュメントビューアであり、HTML は文書構造を表現するためのものであり、CSS はそれを装飾するためのものだった。
それがいつの間にか、アプリケーションのプラットフォームとして使われるようになっていった。本来とは異なる用途での利用が盛んになった。
だからどうしても、アプリケーションを開発する上での機能が貧弱になる。アプリケーションプラットフォームとして考えると「斜線を描画する機能もないのか」となるが、その出自を考えれば仕方がない。
だから今回のように、本来とは違う使い方をして、やりたいことを実現していくことになる。CSS は特にその傾向が強い印象がある。
Web やブラウザが本来とは違う使い方をされていて、苦し紛れというか、あまり健全ではないような気もするが、それくらいインターネットや Web の仕組みが便利だったのだろう。

参考資料