【CSS・backgroundプロパティ】CSSお絵描き超入門！

　どうも！LSSです！！

 

CSSはお絵描きツールではありませんが、backgroundプロパティやgradient関数を使う事でちょっとしたお絵描きを楽しむ事もできます。

backgroundプロパティもgradient関数も、自在に扱えるようになるまでには色々と飲み込まないといけないところが多くて、使い慣れていかないとなかなか意味を理解する事も難しいと思われます。

 

そこで、今回は解説を加えながら、CSSお絵描きの入門の助けになるかも？な記事を書いてみました。

 

• まず、divタグを用意しましょう
• testクラスを装飾するCSSを書き始めます
• CSSコードを書いていきます
  • まず枠組み
  • 中をグラデーションで塗ってみる
  • グラデーションの位置とサイズを指定します
  • 複合プロパティ「background」
• linear-gradientの ( ) のなか
  • まず、角度について
  • 色位置について
• linear-gradientで描いた線を枠に入れてみます
• さらに、backgroundの値はカンマ区切りで並べられます
• あとがき

 

まず、divタグを用意しましょう

コード

<div class="test"></div>

 

こんな感じのコードをHTML内に書きます。

はてなブログの場合はHTML編集画面で入力します。

↑こんな風に、ですね。

まだ中身も装飾もないので、プレビュー画面上には何も現れませんが、「『test』というクラス名を持つdivタグ」ができました。

 

 

testクラスを装飾するCSSを書き始めます

コード

<style>
.test{
}
</style>
<div class="test"></div>

 

赤文字部分を追記しました。

CSSを書く時は、<style>タグを使います。（他にも方法はありますが）

styleタグの終端を示す</style>までの間に書いた内容はCSSコードとしてブラウザに認識される事になります。

 

そして「testというクラス名を持つ要素に対する指定」を書きたいので、

.test{ }

のように書きます。

 

CSSコードは、「セレクタ{内容}」の形で書き、「セレクタ」は「何に対する指定か」を書き、「内容」部分に装飾内容を書いていきます。

クラス名で指定する場合は、セレクタは「.クラス名」のように先頭に「.（ドット）」を入れます。

.test{ }

とする事で、これから{ }の中に書く内容が「testクラス」に対する指定となるんですね。

 

 

CSSコードを書いていきます

まず枠組み

 

コード

<style>
.test{
border:1px solid black;
height:200px;    
}
</style>
<div class="test"> </div>

 

とりあえず、
height:200px;
として200ピクセルの高さを持たせ、枠の範囲が分かりやすいように
border:1px solid black;
で外側を線で囲みました。

なお、横幅を指定していませんが、divタグで横幅=widthを指定しない場合は「width:100%;」と指定したのと同じで横幅が最大まで広がる事になります。

 

中をグラデーションで塗ってみる

 

コード

<style>
.test2{
border:1px solid black;
height:200px;
background-image:linear-gradient(red,blue);
}
</style>
<div class="test2"> </div>

 

ごくシンプルなグラデーション、
background-image:linear-gradient(red,blue);
を付け足しました。

「background-image」は背景画像をつけるプロパティですが、画像ファイルを用意する代わりにlinear-gradientのような「コードからグラデーション画像を仮想的に作ってくれて画像ファイルの代わりに使える」関数を指定する事もできます。
※linear-gradientの他に、radial-gradientやconic-gradientもあります。

 

一方向に変化していくグラデーションを作る「linear-gradient」は、角度を指定しなかった場合は「上から下へ」変化するグラデーションになります。

今回は単純に内容を「red,blue」としたので、「上から下に、赤から青に徐々に変化するグラデーション」となりました。

 

グラデーションの位置とサイズを指定します

 

コード

<style>
.test{
border:1px solid black;
height:200px;
background-image:linear-gradient(red,blue);
background-position:200px 100px;
background-size:100px 50px;
background-repeat:no-repeat;
}
</style>
<div class="test"> </div>

 

「背景を当てる位置・大きさを限定し、繰り返しもナシにする」事で、上記のように「一部分だけに背景が適用された」状態にする事ができます。

 

background-position:200px 100px;
が位置の指定で、「左から200ピクセル、上から100ピクセル」の位置から描き始める（＝画像の左上の角がその位置になる）という指定になります。
※↑のは、pxで指定する場合の話です。%で指定する場合はちょっと話が変わってきます。

 

background-size:100px 50px;
が大きさの指定。
「幅100ピクセル、高さ50ピクセル」という大きさになります。（横が縦の２倍の長さの長方形）

 

background-repeat:no-repeat;
が「繰り返ししない」設定になります。
これを書かずに省略した場合は、縦にも横にも同じ画像が並ぶ事になるので、

↑こうなっちゃいます。

 

複合プロパティ「background」

background-image、background-position、background-size、background-repeat、と４つのCSSプロパティを組み合わせて１つのグラデーション画像を表現しました。

が、これらを「ひとつのプロパティで一括して指定」する事もできます。

↑見た目は先ほどのと全く変わっていませんが、コードはだいぶ短くなっています。

 

コード

<style>
.test{
border:1px solid black;
height:200px;
background:linear-gradient(red,blue) 200px 100px/100px 50px no-repeat;
}
</style>
<div class="test"> </div>

 

４つ指定していた、

background-image:linear-gradient(red,blue);
background-position:200px 100px;
background-size:100px 50px;
background-repeat:no-repeat;

が、

background:linear-gradient(red,blue) 200px 100px/100px 50px no-repeat;

にスッキリまとまりました！

 

backgroundプロパティの書式は、

background:imageの内容 positionの内容 / sizeの内容 repeatの内容 ;

のように並べる事で、一括指定できます。
（他にもbackground系のプロパティ…〃-originや〃-clipも織り込む事もできます。また、全てを書かなくてもOKです。）

 

 

linear-gradientの ( ) のなか

ここから、gradientの ( ) の中身を書き換えていきます。

 

まず、角度について

角度を指定する場合、( ) の中の、色名を並べているところの「一番先頭」に、カンマで区切って書き足す事になります。

 

linear-gradient(45deg,red,blue)

「deg」という単位は、日本語でいう「度」と同じ単位です。
真上方向を「0deg」として、指定角度分、時計回りの方向に回転した「方向」を指定します。

上記の例では「真上から45度、時計回りの方向に回転した方向」に向かう「赤から青に変化するグラデーション」という事になります。

（角度指定を省略した時に「上から下に」になっていたので、省略時の設定は「180deg」と同じだという事になりますね。）

 

いくつか他に例を並べると、

linear-gradient(235deg,red,blue)

linear-gradient(-45deg,red,blue)

linear-gradient(30deg,red,blue)

linear-gradient(90deg,red,blue)

という感じです。

最後の「90deg」は「左から右へ」向かうグラデーションで、特に使い勝手が良さそうですね^^

 

degを使う以外にも、

linear-gradient(to bottom right,red,blue)

という、ちょっと変わった指定方法があります。

bottomは底（下）、rightは右。

「右下に向かう」という意味ですが、こう書くと
「左上の角から右下の角に向かう」グラデーションになります。

枠の幅・高さの縦横比が見ている人の環境ごとによって変わる場合などに、
「しっかり対角線に沿った方向のグラデーションにしたい」
場合に重宝します。

bottomの代わりにtop、rightの代わりにleftを使う事もでき、計４種類の方向をtoで指定できる事になります。

 

色位置について

次に、色位置について。色名を書いた後で、%などで数値を指定する事で色位置を指定する事ができます。

linear-gradient(to bottom right,red 50%,blue)

例えば↑このように、redの後に「50%」と入れると…「グラデーション進行方向に向かって50%の地点の色は赤」という指定になります。
この場合、redはグラデーション１つめの色でもあるので、0%の位置も赤。
なので、「0～50%（ちょうど真ん中）まで真っ赤、そこからだんだん青になる」グラデーションという事になります。
※最初の「red,blue」という指定は「red 0%,blue 100%」と同じで%の記述を省略したもの、と考えると理解しやすいかも？

 

次に、例えば…

linear-gradient(to bottom right,red 50%,blue 51%)

↑のように、blueに51%を指定すると「51%の地点での色は青」という事になります。
前述の赤と合わせると、「0～50%までは真っ赤、50~51%は赤から青に変わるグラデーション、51～100%までは真っ青」という事になります。
「赤から青に変わるグラデーション部分」がわずか1%と極端に小さくなるので「赤と青にハッキリわかれた模様」になるんですね。

また、「to bottom right」を指定している事から、赤と青の境目がちょうど右上と左下の角に当たっています。

 

ここで、色を変えてみます。

 

linear-gradient(to bottom right,transparent 49%,blue,transparent 51%)

色を、transparent（透明）→青→transparent、とし、transparentに49%と51%の位置指定を加えてみました。
この場合は「0～49%は透明、49%から徐々に青くなり、また徐々に透明になり、51~100%はまた透明」という指定になり、「青が細い線として現れる」事になります。

 

 

linear-gradientで描いた線を枠に入れてみます

 

コード

<style>
.test{
border:1px solid black;
height:200px;
background:linear-gradient(to bottom right,transparent 49%,blue,transparent 51%) 200px 100px/100px 50px no-repeat;
}
</style>
<div class="test"> </div>

 

このように、枠の中に斜めの線を引く事ができました！

こうして描いた線は、座標もハッキリしています。

線の左下の端の座標は「200px,150px」（200pxはpositionのx値、150pxはpositionのy値の100とsizeのy値の50の合計値）で、
右上の端の座標は「300px,100px」（300pxはpositionのx値200とsizeのx値100の合計値、100pxはpositionのy値）です。

 

 

さらに、backgroundの値はカンマ区切りで並べられます

background:linear-gradient(to bottom right,transparent 49%,blue,transparent 51%) 200px 100px/100px 50px no-repeat;

この赤文字部分が１本の線に当たりますが、これはカンマ区切りで複数並べる事ができます。

 

とりあえず赤文字部分をコピーして貼り付け、間にカンマを入れて、

background:linear-gradient(to bottom right,transparent 49%,blue,transparent 51%) 200px 100px/100px 50px no-repeat,linear-gradient(to bottom right,transparent 49%,blue,transparent 51%) 200px 100px/100px 50px no-repeat;

片方のpositionとsizeに関する数値を書き換えてみると…

 

コード

<style>
.test{
border:1px solid black;
height:200px;
background:
linear-gradient(to bottom right,transparent 49%,blue,transparent 51%) 200px 100px/100px 50px no-repeat,
linear-gradient(to bottom right,transparent 49%,blue,transparent 51%) 200px 50px/100px 100px no-repeat;
}
</style>
<div class="test"> </div>

 

↑ちょっと分かりやすいように改行も入れてみましたが、こうして２本の線が引けました。
座標を明確に決められる事から、左下端がちょうど同じ位置にする事もできていますね。

 

 

あとがき

なんとか線を引くところまで漕ぎつけました。

まだまだ、「background-positionに%指定をした場合どうなるか、何ができるか」とか「radial-gradientを使って曲線を描く」など書けていない事も多くて、改めて奥の深さを感じていますｗ

 

 

 

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^