• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

cssで斜めボーダーを簡単に実装しちゃうブログ

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

cssで
斜めボーダーを
簡単に
実装しちゃうブログこの背景もcss!

こんにちは、プロクラスの渡辺です。

突然ですが、私はパターンを作成するのが壊滅的に苦手でして、本当にできるのなら使いたくないとさえおもうくらいには苦手なんですが、そんなことも言ってられない今日この頃です。

ただの縦ボーダー、横ボーダーくらいなら作れるんですけど、それ以外は全くダメ、でも今そのパターンを作るのに時間をかけてる場合じゃない!!ってときに
今ならcssでできるパターン背景もあるんじゃ…?
と思い至りまして、見事に再現してくれたので備忘録として残しておきたいと思います~!

今回は、黄色と白のボーダーにしてみました!


.border {
    background-color: #ffec6f;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fff),
color-stop(.25, transparent),color-stop(.5, transparent),
color-stop(.5, #fff),color-stop(.75, #fff), 
color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 7px 7px;
    margin: 2% auto 5%;
    padding: 2% 0;
}

これだけで!斜めのボーダーができちゃうんです! もう私にとっては救世主…ありがとう~~!!
簡単に色も変更できるのでいろんなボーダーが使えますね!
簡単なんで説明するほどでもないんですけど、忘れてしまった未来の私のためにきちんと記録を残しておこうと思います!

色を変えたいときはここ!


.border {
    background-color: #ffec6f;
    /*ここでは黄色を背景にしています。*/

今回なぜ黄色を背景にしたかというと、このcssが効かないブラウザがあった場合、白だと締まりのないページになってしまうので、もしものために黄色を背景にしました。


background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fff),
color-stop(.25, transparent),color-stop(.5, transparent),
color-stop(.5, #fff),color-stop(.75, #fff), 
color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 7px 7px;
/*白のボーダーをこのcssで作っています。*/

背景を黄色にしたのでボーダーの白を作りました。今[#fff]になってるところを赤色にしたら某ファストフード店みたいな色合いも簡単にできちゃいます!

ちなみに、太さを変えたいときはここの数値を変えてあげます!


-webkit-background-size: 7px 7px;

おわり

確認したのですが、Firefoxはキレイに斜めになってくれないみたいです…。
いつか解決策が見つけられたら追記しようと思います。

cssでいろいろできるようになってきて、パターンを作らなくていいというのは大変ありがたい限りです。
もちろん時と場合によるとおもいます!使い分けていければいいな~と思います。
なにより、楽しいですしね!!楽しくコーディングできるのが一番いいです!

ちなみに、プロクラスでは初心者向けのcssの授業もしています~!!!
こんな雑な感じじゃなく、もっと丁寧にイチから教えていただけますよ! 😉
http://proclass.jp/class/detail0202/

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
好評につき、大阪会場もスタート!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら