1. TOP
  2. >技術メモ>
  3. 8bitなレトロゲーム風CSSフレームワーク「NES.css」

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

技術メモ, CSS

2022/01/13
2022/07/21
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を一部使用させてもらってます。

 

PONPOO-QUEST(ポンクエ)

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

ホームページ制作ならRU DESIGN
「スタードメイン」は、年額100円からの独自ドメイン+無料サーバーも付いてきます。
WordPressも使えるので、練習も兼ねてお手軽にサイト運営ができちゃいます。


ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。

関連記事

古いMacに「ChromeOS 」をインストールして利用
2023/10/08
 Googleが提供しているChrome OS(クローム・オーエス)は、Linuxをベースとしたオペレーティングシステム(OS)の1つ。その中でPCやMACでも...
公式サポートが終了した古いMacに最新のmacOSをインストールするプロジェクト
2023/10/07
 古いMacに最新のmacOSをインストールするプロジェクト「OpenCore Legacy Patcher」(OCLP)は、Appleが提供する最新のmacO...
【WordPress】古い投稿を現在の日付で再投稿してくれるプラグイン「Republish Old Posts」
2023/08/31
注意:パーマリンクに日付が含まれている場合は、このプラグインを使用しないでください。SEOプラグイン「All in One SEO」との相性もよくないそうです。...
Crayon Syntax Highlighterの代替プラグイン「Enlighter」
2023/06/05
 ソースコードをきれいに表示させるのに役立っていた「Crayon Syntax Highlighter」ですが、更新も止まったままの状態で再開の目処はなさそうで...
WordPressの文字列を一括変換する便利なプラグイン「Search Regex」
2023/05/26
 WordPressのサイト内の文字列を一括置換・一括変換するのに便利なプラグインをご紹介します。ドメインを変更した場合だったり、「WordPress」を「ワー...