Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS+SVG】れんが模様の背景

HTMLなど

　どうも！LSSです！！

CSSで描く背景について、色々と考えていました。

ふと「れんが模様の背景って描けないかな？」と思い立ったのですが…。

【CSS】うろこ模様その他【小ネタ】

【CSS】background-sizeとbackground-positionを使うとドット絵が描けちゃいます！【極端な例】

【CSS】repeating-radial-gradientを何気に初めて使ってみる

【CSS】CSS模写再び！【格子模様】

↑これらと同様の手段を用いて、描けないものかと色々試みていましたが…挫折^^;;;;;

で、

【CSS+SVG】ちょっと変テコな模様（背景用）を考えてみました

で使った、SVGをCSSに織り込む、という方法を使うと一発で作れました！

れんが模様の背景
コード
ボックスサイズに合わせて繰り返す、というのが
CSS+SVGの謎、ひとつ解決しました
あとがき

れんが模様の背景

れんが模様の背景。
これをCSSのみでやろうとしたのですが、かなーり難しくて…^^;;;

CSS+SVGでなら描けました！

…が、そうややこしい模様でもないので、CSSのみで表現する方法はないものか…。

コード

<style></style>
<div class="renga">中に入れる文章</div>

ボックスサイズに合わせて繰り返す、というのが

CSSのみではついにできませんでした…。

問題は「縦にも横にも」繰り返す、という部分で、例えば「格子模様」の応用で、

れんが
模様

みたいな事なら出来たのですが、段ごとに書いた分だけしか表示されない、という事になり、縦の繰り返しを指定すると、

れんが
模様

このように模様が破綻しますｗ

コード

<p>問題は「縦にも横にも」繰り返す、という部分で、例えば「格子模様」の応用で、 </p>
<div style="padding: 0.6em; background-color: #eeeeee; background-image: linear-gradient(90deg,#cccccc00 4%,#ccccccff 5%,#ddddddff 95%,#dddddd00 96%),linear-gradient(90deg,#cccccc00 4%,#ccccccff 5%,#ddddddff 95%,#dddddd00 96%); background-size: 40px 18px; background-position: -20px 0px,0px 20px; background-repeat: repeat-x;">れんが<br />模様</div>
<p>みたいな事なら出来たのですが、段ごとに書いた分だけしか表示されない、という事になり、縦の繰り返しを指定すると、</p>
<div style="padding: 0.6em; background-color: #eeeeee; background-image: linear-gradient(90deg,#cccccc00 4%,#ccccccff 5%,#ddddddff 95%,#dddddd00 96%),linear-gradient(90deg,#cccccc00 4%,#ccccccff 5%,#ddddddff 95%,#dddddd00 96%); background-size: 40px 18px; background-position: -20px 0px,0px 20px; background-repeat: repeat;">れんが<br />模様</div>
<p>このように模様が破綻しますｗ</p>

そう複雑な模様でもないので、CSSだけで表現する方法がありそうな気もするんですが、今の自分にはまだ分かりません^^;

CSS+SVGの謎、ひとつ解決しました

CSSにSVGを織り込むにあたり、以前に記事上で
「なぜか#が入るSVGは有効にならない」
と書きましたが、それは解決策が見つかりました！

# を %23 に置き換えればOKです^^

あとがき

「インラインSVGの有効活用」のひとつ、としてはいいのですが、模様がシンプルな分、CSSだけで（自分には）できなかったのがちょっと悔しいですね^^;

ただ、もしCSSだけで実現できたとして、よほどコードが煩雑になるようなら、今回のCSS+SVGが最適解かも知れません。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^