デザインをもっと楽しく!WEBデザイナーの皆様にとって役に立つ情報をお届けいたします! おしゃれなボタンの作り方やテクスチャの使い方、制作関連のおすすめサイトなどの情報が満載! | フォトショッパーフォトショッパー

必見!覚えておくととにかく便利!「斜めストライプ」をcssで実装しよう!


「斜めストライプ」のcssを使ってみよう

とっても簡単に実装できる「斜めストライプ」のcssを使ってみよう

こんにちは、おぎしおです。前回のブログで「斜めストライプを簡単に作成できるパターン」をご紹介しましたが、今回はcssで斜めストライプを実現する方法をご紹介したいと思います。
とっても簡単に実装できるので、覚えておくと便利なcssです。ではさっそくご紹介させていただきます。

1,background: repeating-linear-gradientで斜めストライプをかんたん実装♪

repeating-linear-gradient 関数は、グラデーションを繰り返し表現するための関数です。
グラデーションには色の始点と終点があると思いますが、この「始点と終点」を同じ色にすることでストライプ柄を実現することができる、というものです。

斜めストライプ

上記が斜めストライプを実現するためのcssです。後ほどサンプルデータを公開しますので、ここではまず『記述の意味』を説明していこうと思います。

ストライプの角度

2行目の「45dge」はストライプの角度になります。ストライプの角度を決めていきます。
例えば、ボーダーは「0dge」左肩上りが「45dge」右肩上がりが「-45dge」普通のストライプは「90dge」という感じです。

1つめの始点の色

3行目の「#0088CF」は1つめの始点の色になります。

1つめの終点の色・位置

4行目の「#0088CF 2px,」は1つめの終点の色・位置になります。「2px」は1つめの始点から、1つめの終点までの距離となります。

2つめの始点の色・位置

5行目の「#0099e9 2px,」は2つめの始点の色・位置になります。「2px」は1つめの始点から、2つめの始点までの距離となります。

p0001_05

6行目の「#0099e9 4px,」は2つめの終点の色・位置になります。「4px」は1つめの始点から、2つめの終点までの距離となります。

始点と終点

図で説明すると上記のような感じです!
始点と終点を複数繰り返すことで、ストライプができあがっていきます。

2,repeating-linear-gradient 関数を使って実装したページを見てみよう!

では実際に「cssで背景を設定したらどうなるか?」をサンプルファイルでご紹介したいと思います。

こちらのデモページにサンプルファイルをUPしました。4つほどcssを公開しています。
クラス名などは任意で変更していただき、hタグやpタグにclassを設定すれば、簡単にストライプ背景のcssが実現します。

まとめ

いかがでしたでしょうか。
cssで背景を設定すると画像ファイル数が減り、表示速度が速くなるというメリットがあります。またソースを更新するだけで簡単に修正ができるため、運用がとても楽になります。
ぜひ皆様もサンプルファイルを使って、斜めストライプのcssを実装してみてくださいね!


Comment

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

新着