Corredor

ウェブ、プログラミングの勉強メモ。

CSS だけで実装する宇宙空間

はじめてのWebページ作成 HTML・CSS・JavaScriptの基本 (KS情報科学専門書)

はじめてのWebページ作成 HTML・CSS・JavaScriptの基本 (KS情報科学専門書)

  • 作者: 松下孝太郎,山本光,沼晃介,樋口大輔,鈴木一史,市川博
  • 出版社/メーカー: 講談社
  • 発売日: 2017/10/31
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

KeithClark というサイトの 404 ページに遭遇したのだが、その実装が面白かった。

星々が飛び交う宇宙空間に「404 Where has that gone?」の文字が浮かび上がる。

実装を見てみるとさらに興味深かったので、CodePen 用にちょっと修正して作ってみた。

See the Pen 404 Where has that gone? by Neos21 (@Neos21) on CodePen.

飛び交う星 (宇宙のチリ?) はドットがちりばめられた透過画像で、DataURL 形式の画像として用意している。コレを head 要素、body 要素、さらに head 要素内の style 要素の ::before::after 要素に適用している。head 要素や style 要素にスタイルを当てるのは少々意外な実装方法だろう。

コレで合計6つの要素にドットの背景画像が適用できた。後はコレを各要素ごとにタイミングをズラしてアニメーションさせており、回転と拡大をかけている。この動きは開発ツールで要素を選択した状態でアニメーションを見てみると分かりやすいだろう。

CodePen では style 要素の代わりに div 要素を配置しているが、実際は body 要素内に一切の要素がない。コレも驚きだ。

テキストについては、黒い背景色を提供している html 要素の :before 疑似要素にて表示している。コチラは近くまで寄ってきたらその場で止まる、1回限りのアニメーションである。

head 要素や title 要素も CSS でスタイリングして表示させようと思えばできるのは知っていたが、ココまでトリッキーな実装は見たことがなかった。body 要素内に一切コンテンツがなく、画像も DataURL で埋め込んでいるので 404 ページ単体でしっかり動作する (404 ページは独立して動作するようにしておくため、外部スタイル等は使わずインラインで記述しておくことが望ましい)。なかなか面白く、かつ有用な 404 ページの実装を見られた。