Advertisement

 

動画ストリーミング大手の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

マウスカーソルの動きに合わせて視点が切り替わる、立体的な3Dデザインを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枚の場面写真がフリー提供されています。

厳しく著作権を管理していることでも知られるスタジオジブリは、公式ウェブサイトを通じて、今月から全作品の場面写真を順次無料提供することを発表しました。
先月スタジオジブリより、公式で作品の場面写真の無料提供を開始したことでも話題となりましたが、新しく300枚の素材が追加されました。 今月公開された6作
スタジオジブリ往年の人気作品の場面写真の無料公開がはじって以来、これまでに700枚を超える素材が提供されています。 https://photoshopvip.