この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。
ファミコン風デザインのウェブサイトを簡単に作れる無料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を一部使用させてもらってます。
使い道は限定されますが、レトロっぽい雰囲気のサイトやコンテンツを作りたい場合にいかがですか?
関連記事
2025/01/09
ブログやホームページのアドレス・ドメインを変更した際に、サイト変更内容をいち早くGoogleに知らせる方法の簡易的な説明になります。 サイトのドメインを変更した...
2024/08/02
公式サポートの終了した古いMacに最新のmacOSを導入することができる「OpenCore Legacy Patcher(OCLP)」を利用してみました。今回...
2024/05/23
サイトのドメイン変更時、なんらかの理由で公開時のアドレスと異なる記事へ移転や変更をした際に、訪れたユーザーを指定したURLへ転送するリダイレクト機能について。古...
2024/05/20
ワードプレスのアイキャッチの設定をしなかった場合でも、投稿時に自動で設定してくれる方法です。 functions.php function def...
2024/05/16
ワードプレスの記事をエクスポートする際に、デフォルトの状態ではメディア(添付ファイル)は含まれません。「Export media with selected c...