Little Strange Software

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

【和柄CSS】青海波(せいがいは)

 どうも!LSSです!!

 

和柄CSSチャレンジ、今回は「青海波」です。

「あおうみなみ」と訓読みしたくなりましたが、「せいがいは」または「せいかいは」と読むようです。

画像検索してみると、そのパターンも必ずしも決まっているわけではなく、様々なバリエーションがあるようで。

青海波 - Google 検索

 

 

青海波

 

 

 

コード

<style>
.seigai{
width:300px;
height:200px;
background:
radial-gradient(20px circle at 50% 150%,#ffffff 0% 12.5%,#0000ff 12.5% 25%,#ffffff 25% 37.5%,#0000ff 37.5% 50%,#ffffff 50% 62.5%,#0000ff 62.5% 75%,#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,transparent 99.9% 100%) 20px 0px/40px 20px
,radial-gradient(20px circle at 50% 100%,#ffffff 0% 12.5%,#0000ff 12.5% 25%,#ffffff 25% 37.5%,#0000ff 37.5% 50%,#ffffff 50% 62.5%,#0000ff 62.5% 75%,#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,transparent 99.9% 100%) 0px 0px/40px 20px
,radial-gradient(20px circle at 50% 100%,#ffffff 0% 12.5%,#0000ff 12.5% 25%,#ffffff 25% 37.5%,#0000ff 37.5% 50%,#ffffff 50% 62.5%,#0000ff 62.5% 75%,#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,transparent 99.9% 100%) 20px 10px/40px 20px
;
}
</style>
<div class="seigai"> </div>

 

 

模様の構造

今回は横40px縦20pxのサイズが繰り返しの基準となります。

 

まず一番下に、

 

↑こういう模様…これは「半径20pxの円。まず枠の下辺の左右位置中心を中心とした円…を横20px縦10pxずらしたもの」です。(この解説でのみ、透過部分を黄緑で表現しています)
コード中3つ入っているradial-gradientの最後のもの、

,radial-gradient(20px circle at 50% 100%,#ffffff 0% 12.5%,#0000ff 12.5% 25%,#ffffff 25% 37.5%,#0000ff 37.5% 50%,#ffffff 50% 62.5%,#0000ff 62.5% 75%,#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,transparent 99.9% 100%) 20px 10px/40px 20px

の部分ですね。
「#ffffff」と「#0000ff」が何度も出てきますが、これによって白と青の縞模様を表現しています。

 

その上に、

 

が重なります。

3つあるradial-gradientの真ん中のもので、上記3つめのコードから終わりの方の「20px 10px」を「0px 0px」にしただけのものとなります。

 

最後に、一番上に、

 

を重ねます。
これは最初に書いた最下層のradial-gradientの下半分と全く同じ模様ですが、上半分を描かずに繰り返すために、違う書き方をしています。

radial-gradient(20px circle at 50% 150%,#ffffff 0% 12.5%,#0000ff 12.5% 25%,#ffffff 25% 37.5%,#0000ff 37.5% 50%,#ffffff 50% 62.5%,#0000ff 62.5% 75%,#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,transparent 99.9% 100%) 20px 0px/40px 20px

円の中心の縦位置を150%という枠外の位置(枠の下辺よりさらに枠の高さの半分下の位置)に置き(これにより、はみだした部分は描画されない)、配置位置をずらす方は横位置のみ20pxずらし、縦位置はずらさない、という指定にしています。

 

 

青海波って

半円の上に乗っかるように、半段下にずれた半円がきて、さらにその上に乗っかるように半円が…と、無限に積み重ねたような模様です。

そのためにradial-gradientを無限に書く、というわけにもいかないので、「繰り返しの最小単位」を見極め、最低限の表現を探したところ、この3層構造に行きつきました^^

 

 

iPhone対策

radial-gradientの中身、白と青の繰り返し表現の部分ですが、

#ffffff 0% 12.5%,#0000ff 12.5% 25%,
#ffffff 25% 37.5%,#0000ff 37.5% 50%,
#ffffff 50% 62.5%,#0000ff 62.5% 75%,
#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,
transparent 99.9% 100%

%の指定、同じ値をリレーしつつ12.5%づつ足していますが、最後のところだけ、

#0000ff 87.5% 99.9%,
transparent 99.9% 100%

と、不自然な指定になっています。

これ、実は最初は「…,#0000ff 87.5% 100%,transparent 100%」のように書いていたのですが、下書きをiPhoneはてなブログアプリで確認したところ、縞模様にはなっているのに最後のtransparentだけ効かず、青海波模様が完全にぶっ壊れてしまっていました^^;

次に、「…,#0000ff 87.5% 99%,transparent 100%」として試してみると、iPhoneでも問題なく表示されます。

縞模様部分は縞模様になっているので、%の値が重なっている事自体が問題というわけではないはずで…最後だけ無効になるのがナゾ^^;

とりあえず、99.9%と100%というほぼほぼ同じ値でもiPhoneでちゃんと表示されているので、こうしておきました。

 

 

あとがき+背景適用について

little-strange.hatenablog.com

当初、↑と同じようなもの…と楽観していましたが、この「うろこ模様」は「半径の長さ=段の高さ」だったのに対し、今回の「青海波」は「半径の高さの半分=段の高さ」となっており、「最低限の模様の構造の理解」から苦戦しちゃいました^^;

 

あと、余談なのですが、今回のコードも、

【和柄CSS】千鳥格子 - Little Strange Software

【和柄CSS】分銅繋ぎ+α - Little Strange Software

【CSSサンプル】亀の甲羅のような模様 - Little Strange Software

のコードも、

 

<style>
body{
background:
radial-gradient(20px circle at 50% 150%,#ffffff 0% 12.5%,#0000ff 12.5% 25%,#ffffff 25% 37.5%,#0000ff 37.5% 50%,#ffffff 50% 62.5%,#0000ff 62.5% 75%,#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,transparent 99.9% 100%) 20px 0px/40px 20px
,radial-gradient(20px circle at 50% 100%,#ffffff 0% 12.5%,#0000ff 12.5% 25%,#ffffff 25% 37.5%,#0000ff 37.5% 50%,#ffffff 50% 62.5%,#0000ff 62.5% 75%,#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,transparent 99.9% 100%) 0px 0px/40px 20px
,radial-gradient(20px circle at 50% 100%,#ffffff 0% 12.5%,#0000ff 12.5% 25%,#ffffff 25% 37.5%,#0000ff 37.5% 50%,#ffffff 50% 62.5%,#0000ff 62.5% 75%,#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,transparent 99.9% 100%) 20px 10px/40px 20px
;
}
</style>

のように、「background:から;までの部分をコピペ、その前に<style>body{」をつけ、その後に}</style>をつける」と、ページ全体の背景に適用できたりします。

 

 

 

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

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