コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームCSS斜めのストライプをCSSのみでデザインする方法CSS2018.04.8斜めのストライプをCSSのみでデザインする方法ここでは、背景などのデザインとして活用できる斜めのストライプ柄をCSSのみで実装してみたいと思います。できあがるのは、こんなデザインです。ボタンで表示を切り替えてご覧ください。#色2);という形でbackgroundプロパティでグラデーションの設定をします。ここではセレクタがhtmlになっていますが、ストライプにしたい要素を指定してくださいね。);}細かくて見えにくいかもしれませんが、上記の設定をするとグラデーションを2色の線に変えることができます。コードが複雑になって申し訳ないですが、下記のような設定です。);本当はこんなに複雑にしなくても2色の線にすること自体は可能なのですが、斜めにするために必要な設定なのです。40px;}background-sizeプロパティで同じ値を2つ指定します。ここで指定した値の4分の1のサイズが線の幅になります。ここでは、10pxの幅を表現したいので、その4倍の40pxで指定しました。40px;}一番最初に設定したグラデーションのところに-45degという形で角度を入れます。この場合、右斜め上の線になりますが、右斜め下にしたい場合は45degと入れくてださい。これで斜めのストライプ模様が完成しました。ストライプがデザインできるようになると、例えば、見出しの下線をストライプにしたり、デザインの幅がいろいろと広がります。CodePen.あと、色の割合とか分かってくると3色以上の縞模様も作れるようになります。CodePen.以上が、斜めのストライプをCSSのみでデザインする方法でした。ここでは線形のグラデーションを表現できるlinear-gradientの使い方についてお話します。