BLOGCSSのみ画像不要のストライプ背景の作り方を若干丁寧に解説してみるHTML/CSSコーディングTwitterFacebookはてブPocketLINEコピー2012.10.06スポンサーリンク縦ボーダーのシャツを着ても縞のゆがみなんて全く気にならないガリのゴロドクさんです、どうも。CSSで作る吹き出しの記事がなかなか評判良かった(WEBクリエイターボックスさんにツイとFBで拡散されて見たことのない時間PVになりました。ありがとうマナさん!)ので画像不要・CSSのみの定番演出シリーズ第2弾ということで「ボーダー柄の背景」の作り方を解説します。スポンサーリンクツートンのバックグラウンドイメージを繰り返すベースとなるHTMLは例によって1行のみです。どのタグでも良いんですがとりあえず中身のないdiv要素を用意してこれに適用することとします。class="stripe"></div>CSSではクラスで管理しようと思いますので適当にクラスを付けておいて下さい。基本となるCSSは以下の通り。.stripe{display:block;width:425px;height:225px;background-color:#ff0040;}【ブラウズ結果】サンプルページ濃ピンク背景のただのボックスです。サイズは425px×225px。変わったことのないただの箱ですね。これにいくつかプロパティを足してみます。transparent);}【ブラウズ結果】サンプルページはい、2行足しただけでストライプができました。【background-size】で背景のサイズを指定しています。ここでは幅を自動、高さを50pxにしています。【background-repeat】を指定しなくても通常ここで指定したサイズの背景が繰り返されます。【background-image】でストライプの元を作ります。ご覧のとおり高さ方向(top指定)へグラデーションを指定していますが、色の境界が明確になるように高さの50%を挟んで若干透過の白と完全透過のツートンになっています。これによって【background-color】の上にさらに色を重ねるところと下地が見えるところを作っているんですね。これが繰り返されることによってストライプに見えるのです。簡単な原理なんだ!なお、サンプルコードについてはベンダープレフィックスは取り除いています(以下のサンプルも同様)ので必要に応じて書き加えてくださいね。方向を変えれば縦縞もできます。transparent);}【ブラウズ結果】サンプルページ1つ前のサンプルとほぼ同じですが【background-size】の縦横指定を入れ換え(幅を50px、高さを自動)、【background-image】の方向指定を縦から横(topをleft)に変更しました。応用としては角度指定することで斜めボーダーも簡単に作れます。縦・横を両方指定するとどうなるでしょうか。transparent);}【ブラウズ結果】サンプルページ【background-size】を50px×50pxの矩形とし【background-image】に縦横直交するグラデーションを2つ指定するとこんなチェック柄もできます。重ねる色の透過度合いを変えたり幅を変えたりすることでバリエーションもすぐに作れます。いうわけで簡単ボーダー背景の作り方でした。なんでこれ紹介しようかと思ったかというと、当ブログではまさに今回の記事のようにソースコードを紹介するときに、以前は黒背景に白文字で表示してたのですがサナナ先生から「それじゃ読みにくいんじゃタワケめッ!」と言うご指摘を頂戴したからであります。リスト使ってソースコード書いていれば:nth-child(2n)と:nth-child(2n+1)で偶数ラインと奇数ラインの背景色変えるとかできるんですが、私は【<pre><code>~この辺にソースゴニョゴニョ~</code></pre>】という改行つき生テキストそっくりそのまま入れる書き方をしているのでその方法が使えないんですよね。そんなわけでpreタグの背景に今回のようなボーダーを用いたら見やすくならないかなと色々調べた結果が今回の記事です。preタグの【line-height】で指定した行送りの倍の幅を【background-size】で指定するとちょうど良く1行分の高さごとに交互に背景色が入れ替わります...ということでさっそく当ブログのスタイルにも反映しておきました。ボーダー柄自体はもちろんこういった機能面の補完としてだけでなく色んな場面で使えると思いますので取り入れてみてはいかがでしょうか。BLOG関連記事HTML/CSSコーディング画像不要CSSだけで作るテキストロゴデザインのTipsWebサイトのロゴタイプといえばPhotoShopを初めとした画像ソフトを用いて作るのが一般的な気もしますが、シンプルなものならCSSのプロパティを指定するだけでも作れたりします。今回はそのサンプルとフォント関係で使うCSSプロパティいくつ...HTML/CSSコーディングファビコン付けるにあたってコーディングで困ったことのメモコンテンツと関係ないから後回しでいいや、と思ってずっと放置しておいたファビコンをとりあえず付けてみました。画像作ってiconファイルに変換してメタタグ1行コード付け足せばいいや...と簡単に考えてたんですが、なぜか上手く表示されない。背景画像のサイズ調整をする方法とあるページのコーディングをしていて演出部分でやりたいことを実現する方法がわからず調べてみたら、知らなかったCSSプロパティを見つけました。ウェブ界隈一般では周知されてるかもしれませんが自分用のメモということで。HTML/CSSコーディングCSSだけでスマホでも使えそうなスライドインするメニューを考えてみた一週間ほど鼻水が止まらず、咳までで出したごろどくです、どうも。北海道ではまだ花粉の時期ではないので花粉症ではないのですが、ここ数年毎年この時期には同じような症状で体調崩してる気がします。年度末の気の緩みでしょうか。チートシート/リファレンス系サイトまとめ先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。いうわけでここらで初心者...HTML/CSSコーディングCSS知らないとハマり続けるfloatboxの貫通問題CSSでデザインしてて、「あれっ」と思うこと。親要素の中にfloatした子要素を入れると子要素の高さが親要素の高さに反映されず貫通して表示されてしまう問題。基本的なことですが一応整理しておかないといつまでもハマり続けたりするので備忘録を。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(1)スポンサーリンクタイトルとURLをコピーしました。