Menu
テーマ切り替え
ほのぼの情報サイト
ほのぼのゲーム情報GAME PON-POO
無料画像素材

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

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

RU DESIGN
AUTHOR

RU DESIGN

個人でWeb制作をしています。一般からナイト系まで幅広く対応し、実践的なノウハウや自作ツールをこのブログで公開中。制作のご相談もお気軽にどうぞ。

この記事をシェア: