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>

・表示結果

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

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

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

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

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

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

PONPOO-QUEST(ポンクエ)

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

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 タブの作成 【WordPress初心者さん必見！】「これ、どうすればいいの？」検索しても意外と見つからない疑問を解決！ サイト公開しました Web制作の手間を少しでも省く！SVG作成ジェネレーター