【Web】ブラックホールの作り方【HTML,CSS】 | GUARDIAN Creative BLOG | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

突然ですが、みなさんはブラックホールの写真をごらんになったことはありますか？

実は、ブラックホールの写真が史上初めて撮影されたのは2019年と、比較的最近のことなのです。

それ以前にはブラックホールの存在は理論上確実とされていたものの、宇宙のそこかしこに存在するはずのそれを実際に観測することはできていませんでした。

なぜならブラックホールはその強すぎる重力により光をも飲み込んでしまうためです。

光の反射がなければ視覚的に観測することはできません。

ところが世界中に散らばる8つの電波望遠鏡を連動させて、地球規模の巨大な電波望遠鏡を仮想的に作り上げるというプロジェクトが発足し、とうとう2019年にはブラックホールの写真が撮影されました。*1

こちらがブラックホールの写真です！

デデン！

出典：EHT Collaboration

どうでしょうか？とっても美しいと思いませんか？（うっとり）

*1 より正確に言うと周囲の光子リングを撮影することで中央の影（ブラックホールシャドウ）を浮かび上がらせているそうです。ブラックホールそのものは見えませんからね

ではお待ちかね、早速ブラックホールを作っていきましょう！

1. HTMLで黒い球を作る

HTML

<div class="circle"></div>

CSS

.circle {
    border-radius: 50%;
    background-color: #000;
    width: 180px;
    height: 180px;
    transform: skew(0deg, -11deg);
}

これはそのまんまですね。HTMLはたったの一行だけ。

transform:skew(); で少し形を歪ませましょう。

2.CSSでbox-shadowをつける

box-shadow: 86px 56px 90px -2px #ffe500, 0 0px 100px 130px #8d1f00c9;

周囲の赤っぽいリングをつけます。

3番目のパラメーターでぼかし、4番目のパラメーターで拡大率を変更できます。

box-shadowは複数回の指定ができるため、黄色いところなど重ねて足していきます。

3.filter:blur();をつけて黒球をぼやけさせる

filter: blur(24px) contrast(2);

ついでにcontrastもつけました。色が混じり合ったり、ちょっと画質が落ちた感じに見えますね。

4.背景を黒くする

background-colorで背景を黒くします。

コードは載せませんが、最初に書いたHTMLの記述をまたdivタグで囲んでいます。

（記事の最後にHTML,CSSのサンプルコードを掲載しています）

リングが光り輝いて見えますね！いい感じ！

どうでしょうか？

ブラックホールっぽくなったのではないでしょうか。

お好みでkeyframeを使って光子リングなどに動きをつけてもカッコイイですね！

行ったこととしてはbox-shadowを重ねがけしただけですので、普段HTML,CSSを触っている方でしたら易しい内容かと思います。

最後に全体のコードを掲載しておきます。

ぜひ、みなさんのWebサイトにもブラックホールを出現させてうっとりしてください！

https://codepen.io/gdn_aki_matsumura/pen/KKegQmw

それではまた次回( ´∀｀)