中小企業-経営戦略ライフハック業務効率化Homeホームページ制作関連コーディングlinear-gradientのグラデーションでしましま模様を実現するテクニック2017.10.172017.10.18コーディングlinear-gradientのグラデーションでしましま模様を実現するテクニックcssでグラデーションを実現することができるlinear-gradient。今回はこれを使ったちょっとしたテクニックをご紹介します。内容としては、linear-gradientを使って、グラデーションではない、しましま模様を背景に設置するテクニック、です。いうこと?と思いますよね。CodePen.基本形として見出しの背景にbackground-imageでグラデーションを配置してみました。linear-gradientは開始色と終了色を指定することでその間をグラデーションで補完して表示してくれるCSS3プロパティです。中間色や角度を指定することもでき、その機能で複雑なグラデーションを実現することもできるのですがそれは使わず、ここではbackground-sizeを記述してみます。CodePen.10px四方のグラデーションが領域内でリピートしてこのような見た目になっています。見出しとしては見難くなっていますがわかりやすさのために色を濃くしているので後で調節しましょう。しましまの気配がしてきましたね。ここでlinear-gradientの機能を活用します。プロパティに45degを指定してグラデーションの向きを斜めにし、中間色を指定してグラデーションの見栄えを調節します。CodePen.一気にしましま模様になりました。解説すると、中間色の設定方法を#dddから#ddd、#eeeから#eee、とすることで、グラデーションではなく矩形が隣り合っているような色変化にし、これを実現しています。加えて色の調節も行っています。ここではモノトーンですが、サイトカラーに合わせたりしましまの太さを調節したりすると、シャープな印象になったりポップな雰囲気にしたりできそうですよね。CodePen.もう一工夫だけして枠線のように使ってみました。領域の中の要素に背景色を設定してしましま部分の見え方を調節しています。まとめ今回はグラデーション用のプロパティをグラデーション以外の用途で使うテクニックでした。cssには機能を理解することで本来の使い方とは少し違う応用が効くことがあります。機能やプロパティの指定をしっかり理解して、どういうことができるのか表現の引き出しを広げておきたいです。面白いテクニックがあったらこちらで紹介しようと思います。楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。