画像を使わなくても表現できるので、コードを直すだけで様々な変更ができ、とても便利です。
今回のサンプルは、CSSのグラデーションの機能を使って作ります。
グラデーションの基本的な使い方は、以下のページより確認してください。
CSSでグラデーションを使う
1.CSSのグラデーションを使って、ボーダーを作る
まずは、ボーダーの作り方から説明します。HTMLを用意します。
<div class="gra"></div>
CSSで大きさを決めます。
CSS
.gra{
width:200px;
height:200px;
}
1-1.グラデーションを設定する
まずは、普通に縦向きのグラデーションを作ってみます。CSS
.gra{
〜省略〜
background-image : linear-gradient(to top, red, blue);
}
この様になります。
1-2.色を、任意の場所で一気に変更する
グラデーションの位置を工夫する事で、赤から青への段階的なグラデーションではなく、赤と青の二色が、一気に変更する様にする事ができます。具体的には、今回のサンプルの場合、二色の色の変更点を、同じにします。
わかりやすい様に、以下の様に50%で指定します。
CSS
.gra{
〜省略〜
background-image : linear-gradient(to top, red 50%, blue 50%);
}
色の変更点を同じにする事で、グラデーションではなくパキっと色が変わります。
1-3.背景の大きさを変更する
background-sizeプロパティで、画像の大きさを変えます。
この時、わかりやすいように、background-repeatプロパティをno-repeatに指定しておきます。（後ほどその設定は消します。）
CSS
.gra{
〜省略〜
background-size:50px 50px;
background-repeat:no-repeat;
}
横幅と高さが、50pxずつの四角形が、div（200px - 200px）の中にある状態になります。
この様に、background-sizeを指定すると、通常の表示領域（今回の場合、200px - 200pxの四角形）よりも小さい大きさの背景画像（今回の場合、赤と青のボーダー）を表示させる事ができます。
この状態で、background-repeatを通常のrepeat状態に戻します。
CSS
.gra{
〜省略〜
background-size:50px 50px;
/* background-repeat:no-repeat; */
}
以下の様に表示されます。
これで、ボーダーの完成です。
あとは、色や大きさを好みに合わせて変えていきます。
又、色の指定は、透明（transparent）を指定することもできます。
例）
背景の片方を透明にして、線分を20％にして、大きさを20pxに指定
.gra {
width: 200px;
height: 200px;
background-image: linear-gradient(to top, #f77237 20%, transparent 20%);
background-size: 20px 20px;
}
向きをto leftもしくは、to rightに変えれば、ストライプになります。
ただし、全ての大きさでできるわけではなく、background-sizeの大きさによってはずれてしまう場合もあります。
.gra {
width: 200px;
height: 200px;
background-image: linear-gradient(45deg, #f77237 25%, transparent 25%, transparent 50%, #f77237 50%, #f77237 75%, transparent 75%);
background-size: 35px 35px;
}
以上の様に表示されます。
斜めに、グラデーションを指定します。
例えば、background-sizeを、30px 30px に指定すると、うまく繰り返されず、エッジがかなり目立ってしまいます。エッジの目立たないサイズで作成してください。
.gra{
〜省略〜
background-size:50px 50px;
background-repeat:no-repeat;
}
横幅と高さが、50pxずつの四角形が、div（200px - 200px）の中にある状態になります。
この様に、background-sizeを指定すると、通常の表示領域（今回の場合、200px - 200pxの四角形）よりも小さい大きさの背景画像（今回の場合、赤と青のボーダー）を表示させる事ができます。
この状態で、background-repeatを通常のrepeat状態に戻します。
CSS
.gra{
〜省略〜
background-size:50px 50px;
/* background-repeat:no-repeat; */
}
以下の様に表示されます。
これで、ボーダーの完成です。
あとは、色や大きさを好みに合わせて変えていきます。
又、色の指定は、透明（transparent）を指定することもできます。
例）
背景の片方を透明にして、線分を20％にして、大きさを20pxに指定
.gra {
width: 200px;
height: 200px;
background-image: linear-gradient(to top, #f77237 20%, transparent 20%);
background-size: 20px 20px;
}
向きをto leftもしくは、to rightに変えれば、ストライプになります。
1-4.【応用】斜めのストライプ
同じ考え方で、斜めのパターンをグラデーションで作成する事が可能です。ただし、全ての大きさでできるわけではなく、background-sizeの大きさによってはずれてしまう場合もあります。
.gra {
width: 200px;
height: 200px;
background-image: linear-gradient(45deg, #f77237 25%, transparent 25%, transparent 50%, #f77237 50%, #f77237 75%, transparent 75%);
background-size: 35px 35px;
}
以上の様に表示されます。
斜めに、グラデーションを指定します。
例えば、background-sizeを、30px 30px に指定すると、うまく繰り返されず、エッジがかなり目立ってしまいます。エッジの目立たないサイズで作成してください。
2.CSSで、マーカーを引いた様なデザインを作る
次に、テキストにマーカーを引いた様なデザインを作ります。
HTMLを準備します。
<p>文字の中で、<span class="marker">マーカー</span>を引いた感じにする。</p>
上記のコードのspanタグの箇所にマーカーを引いた様なデザインにしていきます。
クラスmarkerに、縦方向にグラデーションを指定する。
.marker {
background-image: linear-gradient(to top, #f77237 25%, transparent 25%);
}
これだけで完成。
後は、色を変えたり線分を調整するなどして、好きな大きさと色に指定できる。
また、javascriptやCSSのアニメーションを使用して、background-sizeのx方向の大きさを、0から100%に指定すれば、マーカーが引かれている様なアニメーションにする事も出来る。
CSSのグラデーションを応用すると、以上の様な事が出来るので、覚えておくと良いでしょう。
