Menu
テーマ切り替え

8bitなレトロゲーム風CSSフレームワーク「NES.css」

8bitなレトロゲーム風CSSフレームワーク「NES.css」

ファミコン風デザインのウェブサイトを簡単に作れる無料CSSフレームワークが「NES.css」です。ボタンや入力フォームといった基本的な要素から、SNSやキャラクターのアイコンまで用意されています。

https://nostalgic-css.github.io/NES.css/#

導入方法

以下のタグをHTMLのhead部分に追加してください。

<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />

試しに使ってみます

<div class="nes-container is-rounded is-dark">
  <p>RU DESIGNを見てくれてありがとう!</p>
</div>

・表示結果

RU DESIGNを見てくれてありがとう!

このほかに、ボタンやラジオ・セレクトなどの各種フォームなども用意されています。

ドット風キャラクターのCSSもあり

基本的な内容の他に、ドット風キャラクターもCSSで表現し使用することができます。 なんか、懐かしい感じがとてもいいですね!

オリジナルでドット風キャラクターCSSを作りたいって場合思ったら、こちらのNES.cssの制作者の方が提供しているジェネレーターを使ってみてください。

https://bcrikko.github.io/css-collection/tool/dotgen/index.html

趣味の一環としても配信しているゲーム情報サイトでも、このCSSを一部使用させてもらってます。

https://game.pon-poo.com/ponpoo-quest

使い道は限定されますが、レトロっぽい雰囲気のサイトやコンテンツを作りたい場合にいかがですか?

Share:

RU DESIGNの無料Webツール集

画像処理、テキスト整形、AIツールなど、制作や作業を効率化する便利ツールをブラウザで無料公開中!

ツールを見る →
Contact & Request

お問い合わせ・お仕事のご相談

Webサイト制作、システム開発、サイト保守・改善などのご依頼や技術的なご相談を承っております。専用フォームよりお気軽にご連絡ください(2営業日以内にご返信いたします)。

フォームより24時間受付 初回ご相談・お見積り無料 全国オンライン対応
RU DESIGN
AUTHOR

RU DESIGN

Webサイト制作・システム開発・保守運用を手がけています。一般からナイト系まで幅広く対応し、制作で培った実践的なノウハウや技術知見、自作Webツールも公開中。制作のご相談もお気軽にどうぞ。