イイダリョウのブログ。幾何学模様】CSS背景などでいつもお世話になっているCSSグラデーション(linear-gradient)。他にもいろいろな模様を描くことができます。そのなかでも「ストライプ(縞模様)」はよく知られています。これを応用して「斜線」を作れないかなー、と試行錯誤してみました。幾何学模様」シリーズ開幕です。※目次:背景などでお世話になっているCSSグラデーション2箇所を同色にするとクッキリとした縞模様(ストライプ)にdegで45度傾けるパーセントの位置を偏らせてストライプを斜線にする課題:半端な角度だと綺麗な斜線にならない。クモのようにコツコツと背景などでお世話になっているCSSグラデーションこれが生まれる前はグラデーションはビットマップ画像で表現していました。スマホ時代には可変背景が多いので、画像は厳しいっす。);}backgroundプロパティの値をCSS関数linear-gradient()に開始色は#FFF(白)中間色70%の位置は#55cc33(緑)終了色は#337A1F(深緑)こうなります。CodePen.中間色は色名だけ入れると50%の位置の色になります。パーセンテージを入れることで位置をズラすことができます。中間色を何色もいれた場合も初期値では均等に割り振られますがパーセンテージを入れると自由な位置に指定できます。);}開始色〜25%まで#fff(白)25%〜50%まで#55cc33(緑)50%〜75%まで#fff(白)75%〜終了色まで#55cc33(緑)今度は2つずつ同じ色を書いて、パーセンテージは色の変わり目を同じ数値にしました。CodePen.色の変わり目がクッキリして綺麗なストライプになりました!グラデってジンワリじゃなくてクッキリした表現もできるんですね!degで45度傾ける今度はlinear-gradient()の設定値degを使って45度傾けてみます。CodePen.ちなみにマイナスを取ると右側に傾きます。パーセントの位置を偏らせてストライプを斜線にするこれまでは2色の線の太さが均等でしたが、これを片方を太く、片方を細くしてみたい。太い方を白にすれば斜線になるはず...。);}開始色〜45%まで#fff(白)45%〜50%まで#55cc33(緑)50%〜95%まで#fff(白)95%〜終了色まで#55cc33(緑)一見ではわかりにくいですよね?1色目と3色目は45%の幅に対して2色目と4色目の幅は5%しかありません。4色の合計は100%になります。CodePen.斜線になりました!均等な縞模様だけでなく、こういうのを背景にしたいときもありますよね?なお、-45degを削除すれば傾きは水平になります。90度にしたら垂直です。課題:半端な角度だと綺麗な斜線にならない。);}こちらは60度(-60deg)にした例です。CodePen.むむむ?なんじゃこりゃあ...!CSSグラデ以外の部分のコードは下記となります。/*背景サイズ*/}幅300px、高さ300pxの正方形ボックスbackground-sizeで背景サイズ30pxに(ボックスの1/10のサイズ)CSSグラデーションは背景の1/10サイズで繰り返していいます。この繰り返しが正方形だと60度の角度がうまく繰り返されません。background-sizeを打ち替えてみる。/*背景サイズ*/}background-sizeを幅17px、高さ30pxの長方形になんとなくさっきよりはマシになったけど、たぶん拡大すると正確じゃなさそう。幾何学模様シリーズを続けます。いや〜、幾何学って、ほんとにいいものですね。CSSやってみたシリーズqiita.com*1:開始色と終了色はパーセントは入れても入れなくても大丈夫です。入れる場合は開始色は0%、終了色は100%です。Train(p5.js1.4〜1....p5.jsの続きです。」でSh...2019-08-31【CSS】scroll-snapでスナップ(引っかかり)のあるスクロールがまったくカン・タン・だ!スナップ(ひっかかり)のあるスクロールをするのに昔はJSを利...2019-08-04【CSS】conic-gradientで放射状の光線を放つ太陽を作るCSSのグラデーションで最近追加されたconic-gradient。間はどのくらいグラデーションになるかCSSで色を指定するときによく使う#fff、#eeeなどの3桁コード。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。