【第１２回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

前回の記事はこちら↓

どうもAriです。三角コーンに乗ったオロナミンCの空き瓶を見ました。逆に難しくないか。

さて本題。
我々のアカウント名の由来となったMAKE MOREのお揃いパーカー、実は色違いである。ということでヘッダーを二色のグラデーションにしたいなあと考えついた。
今回はこのグラデーションのやり方を紹介しようと思う。ブラウザによっては対応していないみたいだが、9割方見られるみたいのでそのまま突き進むことにする。

コード

簡単にグラデーションにできるのは背景色である。

background: linear-gradient(to 方向, 開始色, 終了色); 

上のようなコードを書けば要素の背景がグラデーションになる。
サンプルで方向と色を指定してみる。

p{background: linear-gradient(to right,#FFC000,#44AAFF);}
<p>グラデーション</p>

見やすくするために幅などもいじったが、表示させたものがこちら。

緑になる予定じゃなかった。

このように勝手にグラデーションを生成してくれる。
「linear」の代わりに「radical」を使うと円形グラデーションになるが今回は使わないので割愛。

本番

ということで紺と紫でグラデーションを作ってみる。
デデン。

文字は白にしてみた。

どうも不満。というのも多分二色がそんなに遠い色じゃないせいで、紫の面積がやたら狭く見えるのだ。

よし、グラデーションの開始位置を変えよう。色々調べたが、後ろの色の面積を増やす方法はよくわからなかったので、勘でうまく行ったのを載せる。

ネットサーフィンで手に入れた情報は、「グラデーションの開始位置を％で指定する」である。ただみんな開始色の後ろに書いている。
「#ffc000 20%,#4af」とか書いたら、端から20％の位置までは#ffc000一色で、その後グラデーションが始まる、ということらしい。

てことはさ、終了色に指定したら終了位置を変えられるんじゃないか？となったので、こんなコードにしてみた。

{background: linear-gradient(to right,#00003b,#66008b 70%);

ビフォーアフター表示してみる。

↓

いいじゃないか！大して変わらないように見えるかもしれないけど個人的には満足。

おまけ

方向指定

to 方向と簡単に書いたが、上下左右は順にtop、bottom、left、rightである。「top left」で左上、など八方向は対応できる。

それ以上に細かく指定したいときは角度（degree）を使う。この時bottomを0度として、そこから時計回りに増えていく。なんで下からなんだとか言わないで私もそう思う。

左上からグラデーションをかけたい時は、「to top left」か「135deg」が使える。ちなみに角度で指定するときはtoはいらない。開始位置の指定だし。

ベンダープレフィックス

最初に、古くてグラデーション対応していないブラウザのことは考えないことにしたが、対応はしているんだけど一筋縄じゃいかないバージョンとかもあるらしい。

いやまあ新しいやつ使ってますけれども、世に出すホームページで完全無視というのも忍びないので、ベンダープレフィックスというのを使うとマシになるとかなんとか。

linear-gradientの前に「-moz-」「-webkit-」をつけたものも用意して、三つコードを書いておくのがおすすめらしい。
ただ、これをつけると方向指定が効かなくなる。ぴえん。方向ではなく、開始位置を指定するらしい。「to right」は「left」に変えて書かなければいけない。

なお角度指定の時は「90ー元の角度」で求めなければいけない。さっき135度を例に出した私はもう敗北。マイナスになるじゃないかどうしたらいいんだよ。

調べました。マイナスでいいそうです。この辺で三角関数が頭をよぎり始めたので深くは考えないことにします。角度がマイナスである意味がわからないまま私の高校生活は終わったのです。

{background: -moz-linear-gradient(-45deg, #FFC000, #44AAFF); 
background: -webkit-linear-gradient(-45deg, #FFC000, #4AF); 
background: linear-gradient(135deg, #FFC000, #4AF); 
}

こんな感じで三つ書いておけば親切なコード、ってわけ。
ちなみに#44AAFFと#4AFは同じです。RGB全部ゾロ目の時は省略して大丈夫だそうです。

こういう小ネタが尽きる前にJavaScript始めなきゃなあと思っております。写真が自動で流れるやつ作るのが目標なのでぜひお付き合いいただけたら。