動画ストリーミング大手のNetflixが、日本とカナダ、アメリカを除く世界中でスタジオジブリ作品の配信をおこなうなど、海外でも高く評価、注目されているジブリ映画。
今回は、そんなスタジオジブリ映画への愛があふれるHTML/CSSスニペットをまとめてご紹介します。
スタジオジブリを代表する往年の人気キャラクターが、CSSを中心に再現されています。スニペットはどれも海外のウェブデザイナーが作成しており、ジブリ映画の人気の高さが伺えます。
トトロやカオナシも！ジブリ愛が止まらないHTML/CSSスニペットまとめ
■ Howl’s Moving Castle
ハウルの動く城も無限ループでどうぞ。各パーツごとに切り分けることで、アニメーションをCSSで実装しています。
See the Pen
Howl’s Moving Castle by Nathan Gordon (@gordonnl)
on CodePen.
■ Spirited Away Bathhouse (Aburaya) – 3D CSS
マウスカーソルの動きに合わせて視点が切り替わる、立体的な３DデザインをCSSのみで表現しています。
See the Pen
Spirited Away Bathhouse (Aburaya) – 3D CSS by Adam Kuhn (@cobra_winfrey)
on CodePen.
■ Kiki’s Delivery Service – Pure CSS
魔女のキキをCSSピクセルアートでデザインしたスニペット。
See the Pen
Kiki’s Delivery Service – Pure CSS by Kirsten Rauffer (@kkdawg)
on CodePen.
■ Totoro Toggle
トトロがごろりと寝返りを打つトグルボタン、こちらもCSSのみでスタイリングされています。
See the Pen
Totoro Toggle by Adam Kuhn (@cobra_winfrey)
on CodePen.
■ 6 CSS Studio Ghibli Characters
CSSのみでデザインされたスタジオジブリの人気キャラクターたち6種類。
See the Pen
6 CSS Studio Ghibli Charaters by chilli con code (@chilliconcode)
on CodePen.
■ Kodama – CSS
もののけ姫でおなじみのキャラクターもCSSで完全再現。
See the Pen
Kodama – CSS by Andrés Nicolás Tonello (@AndreusCafe)
on CodePen.
■ Totoro Bus Stop w/ Grid Layout | Daily CSS Images
トトロのバス停をピクセルドットで表現、CSS Gridプロパティを使って配置しています。
See the Pen
Totoro Bus Stop w/ Grid Layout | Daily CSS Images by Jackie Card (@jackiecard)
on CodePen.
■ Totoro in Rain
See the Pen
TOTORO in Rain by Motoko Ishii (@MotokoIshii)
on CodePen.
■ Princess Mononoke Game 🗻 SVG React Game
右から飛んでくる障害物を避けながらステージクリアを目指すゲーム。
See the Pen
Princess Mononoke Game 🗻 SVG React Game by Anna the Scavenger (@ScavengerFrontend)
on CodePen.
■ Miyazaki tribute – with SVG and GSAP
See the Pen
🌳👻 Miyazaki tribute – with SVG and GSAP by Nerdmanship (@nerdmanship)
on CodePen.
■ My Neighbor Totoro
マウスカーソルを合わせると手を広げて笑顔をみせるトトロを、CSS Variablesテクニックでデザイン。
See the Pen
My Neighbor Totoro by tiffany choong (@tiffachoo)
on CodePen.
■ Catbus
トトロに出てくるネコバスもCSSアニメーションで。
See the Pen
Catbus by Adam Kuhn (@cobra_winfrey)
on CodePen.
■ Castle in the Sky CSS
天空の城ラピュタのワンシーンもピクセルドット状にCSSで再現。
See the Pen
Castle In The Sky CSS by Kirsten Rauffer (@kkdawg)
on CodePen.
■ Chibi Totoro
白くてふわふわでとても小さくな「チビトトロ」もCSSのみで表現。スタジオジブリの世界的な人気を感じる、ジブリ愛にあふれるスニペット作品となっています。
See the Pen
Chibi Totoro by mintlodica (@mintlodica)
on CodePen.
スタジオジブリでは、作品の静止画の無料配布も行っており、「となりのトトロ」や「天空の城ラピュタ」、「風の谷のナウシカ」など人気タイトル24作品、1178枚の場面写真がフリー提供されています。
