Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8586

HTMLとCSSで魔法陣を描いてみる

$
0
0

そもそも魔法陣って?

創作作品でよく見る、モンスターが召喚されたりするときに下にひいてあるアレ。
最近だとiPhoneの充電もできるようになりました。
「魔法陣」というのはいわゆる創作作品で描かれる演出用の陣の名称で、実在の魔術で使われるガチな方のやつは「魔法」と呼ばれて区別される。

魔法円はだいたいが「円の中と外を魔術的に遮断する」という目的の元に作成される結界。なので、その中にモンスターを召喚するのではなく、むしろ魔法使いが魔法陣の中に立つのが正しい利用法なのだそう。というか、そうしないと召喚した悪魔や精霊に襲われてしまう。
(なお、お祈りや魔除けとしての魔法円も存在する。)

ちゃんとした魔術的儀式をやって魔法陣を使うには「聖別」という下準備が必要らしいが、ブラウザやウェブサーバーを聖別することはいろんな意味で不可能なので、本記事ではあくまで「魔法陣」の作り方を記述していくことにする。

構造解説

完成図がこちら。
1582636266722.jpg

See the Pen Magic Circle example by CSS by Yomogenium (@yomogenium) on CodePen.

CSSで魔法陣を作るにあたってカギとなるのは、CSSの一つ、「position」。
最大のポイントは以下の部分。

position: absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
出典: http://www.htmq.com/style/position.shtml

つまり、複数の要素に連続してposition:absolute;を使えば、要素同士の干渉を防ぎつつ図形を重ねられるのだ。
CSSで魔法陣を描くのは確かに困難だ。だが、魔法陣に使われる図形を個々で作成していけば、そこまで難易度の高い工作にはならないのではないだろうか?

そういう設計思想で作ってみた。うまくいった。
以下がhtmlソースだが、比較的見やすいものになっている。

html
<divclass="base"><!-- 外側の輪 --><divclass="pattern01"></div><!-- 輪状に並ぶ文字 --><divclass="pattern02 rune"><span>P</span><span>r</span><span>o</span><span>t</span><span>e</span><span>g</span><span>o</span><span></span><span>H</span><span>o</span><span>r</span><span>r</span><span>i</span><span>b</span><span>i</span><span>l</span><span>i</span><span>s</span></div><!-- 内側の輪 --><divclass="pattern03"></div><!-- ヘキサグラム --><divclass="pattern04"><p></p><p></p><p></p><p></p><p></p><p></p></div><!-- アクセント --><divclass="pattern05"><div><pclass="rune">v</p></div></div></div>

ここに準備のためのCSSを書き加え、以下のようにしてから、工作スタートだ。

html
<style>body{background-color:black;}.base{position:relative;width:300px;height:300px;background-color:black;}/* 具体的に言えば、「pattern01~pattern04は中心が親要素の中心と重なる位置に来る」という効果。 */.pattern01,.pattern02,.pattern03,.pattern04{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;}</style><divclass="base"><!-- 外側の輪 --><divclass="pattern01"></div><!-- 輪状に並ぶ文字 --><divclass="pattern02 rune"><span>P</span><span>r</span><span>o</span><span>t</span><span>e</span><span>g</span><span>o</span><span></span><span>H</span><span>o</span><span>r</span><span>r</span><span>i</span><span>b</span><span>i</span><span>l</span><span>i</span><span>s</span></div><!-- 内側の輪 --><divclass="pattern03"></div><!-- ヘキサグラム --><divclass="pattern04"><p></p><p></p><p></p><p></p><p></p><p></p></div><!-- アクセント --><divclass="pattern05"><div><pclass="rune">v</p></div></div></div>

外側の円

これはかんたん。

html
<style>.pattern01{border:2pxsolidwhite;border-radius:50%;width:95%;height:95%;}</style><divclass="pattern01"></div>

widthheightの値は親である.baseを参照しているので、そこから適度に縮めればよい。これは以降の図形でも同じ。
ちなみに、border-radiusの値を50%にすると、どんなサイズの要素でも完全な円形になる。

円形に並ぶ文字

この部分を制作するにあたって、こちらのサイトが大きな助けになった。
https://mail.conifer.jp/csstest/css-circle-text.html

このサイトで使っているのはこちらの応用。
やっていることは箇条書きにするとざっくり以下の通りだ。

  • 文字を一文字ずつ区切る
  • 一文字ごとに異なる傾斜をつける (その角度は、360° ÷ 文字の数。今回は18文字なので360 ÷ 18 = 20、つまり20°ずつ傾ければいい。)
  • その文字が含まれる要素に高さをつける
  • transform-originで回転の中央軸を本来の位置からずらす
  • 出来上がった円形文字は本来の位置からズレるので、position:absoluteを使って正しい位置に戻す

この5つができていれば、おかしな形になることはないだろう。
transform-originについてはhttps://developer.mozilla.org/ja/docs/Web/CSS/transform-originを参照のこと。)

呪文には、ハリーポッター・シリーズに登場する防衛呪文、「Protego Horribilis」(18文字)を使うことにした。


コード。長いので折りたたみ
html
<style>.pattern02{width:95%;height:95%;}/* top、bottom、left、right、heightは%で指定しよう。親要素のサイズに合わせて可変するので、幅や位置を微調整する必要がなくなるからだ。 */.pattern02span{position:absolute;top:0;bottom:0;left:49%;color:white;height:50%;transform-origin:bottomcenter;}.pattern02span:first-of-type{transform:rotate(0deg);}.pattern02span:nth-of-type(2){transform:rotate(20deg);}.pattern02span:nth-of-type(3){transform:rotate(40deg);}.pattern02span:nth-of-type(4){transform:rotate(60deg);}.pattern02span:nth-of-type(5){transform:rotate(80deg);}.pattern02span:nth-of-type(6){transform:rotate(100deg);}.pattern02span:nth-of-type(7){transform:rotate(120deg);}.pattern02span:nth-of-type(8){transform:rotate(140deg);}.pattern02span:nth-of-type(9){transform:rotate(160deg);}.pattern02span:nth-of-type(10){transform:rotate(180deg);}.pattern02span:nth-of-type(11){transform:rotate(200deg);}.pattern02span:nth-of-type(12){transform:rotate(220deg);}.pattern02span:nth-of-type(13){transform:rotate(240deg);}.pattern02span:nth-of-type(14){transform:rotate(260deg);}.pattern02span:nth-of-type(15){transform:rotate(280deg);}.pattern02span:nth-of-type(16){transform:rotate(300deg);}.pattern02span:nth-of-type(17){transform:rotate(320deg);}.pattern02span:nth-of-type(18){transform:rotate(340deg);}</style><divclass="pattern02"><span>P</span><span>r</span><span>o</span><span>t</span><span>e</span><span>g</span><span>o</span><span></span><span>H</span><span>o</span><span>r</span><span>r</span><span>i</span><span>b</span><span>i</span><span>l</span><span>i</span><span>s</span></div>

ここを行った直後の状態がコレ。
1582633697492.jpg

ここでは「上が外向き」になるように並んでいるが、逆に「下が外向き」の状態にすることも可能だ。

css
.pattern02span{position:absolute;top:50%;bottom:0;left:49%;color:#ffffff;padding-top:44%;transform-origin:topcenter;}

1582639027901.jpg

※位置や形状を調整するときはbackgroundで正方形を表示させて行うとよい。

フォント(文字の書体)の変更

魔法陣を作るうえで要となるのが、判読不可能な謎言語、だろう。
どうせ作るなら厨二臭いカッコいいディティールにこだわりたい、と思って探していたら、なんとルーン文字のフォントが配布されていた。しかも無料で。
あるものは使うべし、というわけで、筆者はここからフォントをダウンロードして使うことにした。

以下配布サイト's。
https://coliss.com/articles/freebies/free-font-which-cannot-read.html
https://sitebk.com/summary/ancient-font/

フォントの適用方法はこちらのサイトに記載されていたので割愛。
とりあえず手元のサーバー、あるいはパソコンに置き、その上で@font-faceをかければどうにかなるだろう。
ただ、拡張子が.otf.ttfのままではうまく動作しないので、きちんと.woffに変換することは忘れずに。woffファイルへの変換はこちらのサイトから可能だ。
一応、コードも貼っておく。

css
@font-face{font-family:'runefont';src:url('./rune.woff')format('woff');}.rune{font-family:runefont;}

あ、フォント適用したら以下のようになった。

1582633899884.jpg

内側の円

「外側の円」と仕組みは同じ。だが、外側の円に比べて幅を小さくしてある。

html
<style>.pattern03{border:2pxsolidwhite;border-radius:50%;width:83%;height:83%;}</style><!-- 内側の輪 --><divclass="pattern03"></div>

1582634245395.jpg

なんだかそれっぽくなってきたぞ。

六芒星(ヘキサグラム)の描画

仕組み自体は上に挙げた「円形に並ぶ文字」と大差ない。
星型多角形……通称「n芒星」は、辺の本数自体は通常の正多角形と変わらないので、傾ける角度さえ正しければ、あとは辺の長さ(=width)と中心からの距離(=height)を調整してやればよいのだ。

html
<style>.pattern04{width:83%;height:83%;}.pattern04p{border-top:2pxsolidwhite;width:86%;height:50%;transform-origin:center;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}.pattern04p:first-of-type{transform:rotate(0deg);}.pattern04p:nth-of-type(2){transform:rotate(60deg);}.pattern04p:nth-of-type(3){transform:rotate(120deg);}.pattern04p:nth-of-type(4){transform:rotate(180deg);}.pattern04p:nth-of-type(5){transform:rotate(240deg);}.pattern04p:nth-of-type(6){transform:rotate(300deg);}</style><!-- ヘキサグラム --><divclass="pattern04"><p></p><p></p><p></p><p></p><p></p><p></p></div>

完成するとこのようになる。
1582634573542.jpg

ふつうの多角形を生成したい場合であっても、基本的にwidthとheight以外は変える必要がない。
ノーマルな六角形verにしたのが以下のコードである。

css
<style>.pattern04{width:83%;height:83%;}.pattern04p{border-top:2pxsolidwhite;width:50%;height:86%;transform-origin:center;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}.pattern04p:first-of-type{transform:rotate(0deg);}.pattern04p:nth-of-type(2){transform:rotate(60deg);}.pattern04p:nth-of-type(3){transform:rotate(120deg);}.pattern04p:nth-of-type(4){transform:rotate(180deg);}.pattern04p:nth-of-type(5){transform:rotate(240deg);}.pattern04p:nth-of-type(6){transform:rotate(300deg);}

1582651192128.jpg

※ここには書いていないが、五芒星、七芒星でも同様の仕組みで作成できた。

アクセントの作成

実際の魔法陣を見てみるとわかるが、ただ単にきれいな図形を並べただけのものは少ない。
むしろモノホンの魔法陣ほど、幾何学性とはかけ離れたデザインをしている気もしなくはない。
というわけで、魔法陣に華を添えるアクセントも作成していく。

作るのは画像の真ん中にある月のようなパーツ。(スピログラフ、というらしい。)

1582636266722.jpg

これは2つの円を重ねて月のように見せているもの。特に特殊な技術は使っていない……はず。

html
<style>.pattern05{position:absolute;top:40%;left:40%;border:2pxsolidwhite;border-radius:50%;width:18%;height:18%;background:white;}.pattern05div{border:2pxsolidwhite;border-radius:50%;width:73%;height:73%;position:absolute;top:0%;left:0%;background:black;}.pattern05divp{color:white;font-size:22px;text-align:center;height:1em;width:1em;margin:auto;vertical-align:baseline;position:absolute;top:0;bottom:0;left:0;right:0;}</style><!-- アクセント --><divclass="pattern05"><div><pclass="rune">v</p></div></div>

完成。

1582636266722.jpg

おわりに

CSSで魔法陣を作るにあたり、色々見て回っていた。

https://coliss.com/articles/build-websites/operation/design/alchemy-circles-generator.html

もう既にあるんじゃねえか。

余談

手作業だとなかなか手間なので、Javascriptで自動化できないものかと模索中。

参考文献

https://mail.conifer.jp/csstest/css-circle-text.html

http://slpr.sakura.ne.jp/qp/polygon-spirograph/

https://www.ho-yu.ed.jp/club-news/science/1688.html

https://ja.wikipedia.org/wiki/%E6%98%9F%E5%9E%8B%E5%A4%9A%E8%A7%92%E5%BD%A2

https://theorthodoxworks.com/study/various-polygon-in-css/


Viewing all articles
Browse latest Browse all 8586

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>