斜めストライプ模様の囲み枠


斜めストライプ模様の囲み枠

2016/03/27 斜めストライプ模様の囲み枠の作成ツール(ジェネレーター)を作ってみました

こんにちは、松本です。

先日、「CSS3:CSSのみで斜線背景を実装する」という記事に出会いまして、この記事で紹介されていたCSSを使った斜めストライプ模様がとても良い感じだったので、参考にさせてもらって囲み枠を作ってみましたので、紹介させてもらいます。

いつものように、タグも一緒に書いておきますので、よかったらコピペでご利用下さい。

(【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。)

なお、こちらのタグは画像を使用していませんので、アメブロ以外でも使えると思います。

斜めストライプ模様の囲み枠(ブルーグレー)


まず、ブルーグレーっぽい色の斜めストライプ模様の囲み枠です。

参考にさせてもらった記事で紹介されていたものに近い色にしてみました(同じ色ではありません^^)。

斜めストライプの囲み枠


↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="background-size:24px 24px;background-color:#456;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>

斜めストライプ模様の囲み枠(赤)


次は、赤い斜めストライプ模様の囲み枠です

斜めストライプの囲み枠


↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="background-size:24px 24px;background-color:#f00;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>

斜めストライプ模様の囲み枠(赤)


次に、オレンジ色の斜めストライプ模様の囲み枠です

斜めストライプの囲み枠


↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="background-size:24px 24px;background-color:#f90;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>

斜めストライプ模様の囲み枠(ピンク)


そして、ピンクの斜めストライプ模様の囲み枠です

斜めストライプの囲み枠


↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="background-size:24px 24px;background-color:#f6c;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>


自分で色を決めたい場合


最後に、自分で色を決めたい場合について、やりかたを紹介します。

簡単に色を変えられるように作りましたので、初心者でも大丈夫だと思います。

<div style="background-size:24px 24px;background-color:#000000;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>

自分で決めた色の囲み枠を作りたいときは、上記タグの「#000000」の部分を、希望の色の色コードに設定しなおして下さい。

すると、「設定した色と、設定した色をもう少し明るくした色の2色」の斜めストライプ模様の囲み枠ができます。

色コードは、こちらのWEB色見本のサイト様が参考になると思います。

なお、当記事でご紹介したタグは、CSS3という比較的新しい技術を多用していて古いブラウザでは正常に表示できない可能性がありますのでご注意下さい(単色で表示されたり、角丸部分が直角になったりします)

以上、コピペで使える斜めストライプ模様の囲み枠の紹介をさせて頂きました。

もしよかったら試してみてください。

関連記事


ワッペン風(デニム調)の囲み枠
ワッペン風(リネン調)の囲み枠
付箋風の囲み枠
黒板風の囲み枠







コメント(6)