ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【css3】背景を斜線にするlinear-gradientの書き方

2016年10月23日
linear_mainimg

最近、css3のlinear-gradientを使って背景を斜線で表現することがあるのですが、ジェネレーターを使って簡単には出来るものの仕組みがいまいち分かっていなかったので、勉強も兼ねて自分で書いてみました。
下記がサンプルコードと内容です。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.linear{
width:300px;
height:300px;
background-color: #ffffff;
border:1px solid #000000;
        /* ココから下 ↓ */
background: #ffffff;
background-image:linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584);
background-image:-webkit-linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584);
background-image:-moz-linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584);
background-image:-ms-linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584);
-webkit-background-size:50px 50px;
-moz-background-size:50px 50px;
-ms-background-size:50px 50px;
background-size:50px 50px; /* 2つ書かないと、firefoxで崩れがおきる */
}

1、さっそく、開始色と終了色を書いてみよう!

開始色(#fff)と終了色(#82F584)のみを書いた場合は、デフォルトの設定で上から下にグラデーションが掛かるようになっている

CSS
1
background-image:linear-gradient(#fff,#82F584);

linear01

スポンサードサーチ

2、%(パーセント)を指定して開始色の表示範囲を決める

開始色(#fff)の後にスペースを入れて50%を指定すると、白とみどりが半分ずつのグラデーションになる

CSS
1
background-image:linear-gradient(#fff 50%, #82F584); /* 上50%は白、下はみどりのグラデーション */

linear02

3、開始色と終了色の境目を明確にわける

終了色(#82F584)にも50%をつけたことで、グラデーションがない、白とみどりが半分ずつの背景色になった。このことから、開始色(#fff)が50%まで、それ以降の50%は終了色(#82F584)にきっちり分かれることがわかった

CSS
1
background-image:linear-gradient(#fff 50%, #82F584 50%); /* 上50%は白、下50%はみどり ※この指定で半分にわかれる */

linear03

スポンサードサーチ

4、deg(degree:度)を指定して斜めにする

-45度(-45deg)を入れて斜線にしたいと思います。
ここで注意したいのが、ベンダープレフィックス無しのlinear-gradientだと-45degが、なぜか135degの角度になってしまいます。

対処法として、ベンダープレフィックスを記述したcssを後に書くか、ベンダープレフィックス無しの記述を削除するかで解決できるかと思います。

CSS
1
2
3
4
background-image:linear-gradient(-45deg, #fff 50%, #82F584 50%); /* -45deg で45度マイナス回転するので斜めになる */
background-image:-webkit-linear-gradient(-45deg, #fff 50%, #82F584 50%);
background-image:-moz-linear-gradient(-45deg, #fff 50%, #82F584 50%);
background-image:-ms-linear-gradient(-45deg, #fff 50%, #82F584 50%);

linear05

5、背景のサイズを指定する

斜線ぽくなってきたので、background-imageで太さを指定し、繰り返し表示していくようにします。
50pxで指定しているので、縦横300pxの中に、6×6=36のブロックができます。
この時、background-image:○ ○;と2つ書かないとfirefoxで崩れがおきるので要注意。

CSS
1
background-size:50px 50px; /* width300pxに対して50pxを指定すると、横に6つならびになる */

linear06

6、斜線を繰り返し表示する

先ほど、50%ずつ区切っていたのでブロックのようになっていましたが25%ずつ区切っていくと、うまく重なり合い斜線の繰り返しが表示されます。

CSS
1
background-image:-webkit-linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584); /* 完成版 */

linear07

スポンサードサーチ

ちなみに仕組みはこんな感じ!

linear_description

最後に

ブラウザごとに、斜線の繰り返しが上手く重なり合わずギザギザになってしまうことがありますが、これはギザギザが発生しているブラウザ個別にcssを書いて対処できるかと思います。(他にいい方法があったら教えてください!)

関連記事

  • 【css3】縞(シマ)模様や、チェック、ストライプなどの背景を簡単に表現できる便利なジェネレーター2016年9月25日 【css3】縞(シマ)模様や、チェック、ストライプなどの背景を簡単に表現できる便利なジェネレーター
  • 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法2017年4月19日 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法
  • 超簡単!cssを使って背景画像のみ透過にする方法2016年11月5日 超簡単!cssを使って背景画像のみ透過にする方法
  • 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法2016年11月10日 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法
  • js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日 js不要!cssのみで『無限ループスライダー』を作成する方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.