bauhausify美大出身の
WEBエンジニアリング奮闘記
CODING

かわいいファミコン風CSSライブラリNES.css

2019.07.23
簡単にファミコン風の見た目にするCSSライブラリ NES.css について、その内容や導入方法、使用感などをレポートします。

早速ですが、こちらのデモをご覧ください。

装飾的なCSSは一切かかずに、すべてNES.cssというライブラリのみで装飾しています。
(演出として、タイピングエフェクト部分はTyped.jsというJSライブラリを使っています)

デモ以外にも、チェックボックスやリスト、テーブルなど基本的なHTML要素のスタイルはそろっています。
詳しくは公式サイトをご覧ください。

作者は日本人です。作者自身の紹介記事はこちらです。

導入方法

CDN版

ページの内を編集できる場合は、こちら

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

package版

インストールします。

npm install nes.css
# or
yarn add nes.css

css-loaderが設定されている場合は、JSファイルでcssをインポート

import "nes.css/css/nes.css";

scssの場合は、scssファイル内でインポートします。

@import "~nes.css/scss/nes.scss";

使用する上での注意点

日本語はフォントの準備が必要

英語のレトロフォントはGoogle Fontsにあるのですぐ使えますが、
日本語を使う場合は、別途サーバーなどにWebフォントを準備する必要があります。

大抵のフォントファイルはTTF形式で配布されているので、WOFFコンバータなどを使ってEOT, WOFF形式のWebフォントを生成し、サーバーに配置してCSSから読み込みましょう。この記事ではその方法は割愛します。

dialogを使う場合はpolyfillの導入が必要

dialogにはhtmlの<dialog>要素が使われているため、デフォルトだと対応しているブラウザしか動きません。
JSとCSSの2つのpolyfillファイルのimportが必要です。
CDNの場合は以下を<head>タグ内で読み込みましょう

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>

Bootstrapやtailwindcssなどのレイアウト系クラスと組み合わせると使いやすい

NES.cssはあくまでウィンドウやボタンなどの単体コンポーネントの装飾スタイルのみ提供します。
デモのコードもそうですが、Bootstrapやtailwindcssなどと組み合わせることにより、CSSは書かずに使うことができます。

CSSアーキテクチャはBootstrapベース?

Bootstrapではお馴染みのカラー、Primary, Info, Danger, Warn, Successが用意されています。
prefixとしてis-primaryといったようにis-***がつきます。 暗くしたい場合はis-dark、丸みをもたせる場合はis-roundedとなります。 とてもシンプルです。

このライブラリの使い所

趣向性が高い分、使い所はけっこう限られていますが、なんといっても見た目がかわいいので個人的にはうまく使っていきたいところです。

  • ゲーム紹介サイトなど
  • レトロな考えでやるてきな思想のサイトやサービスなど
  • 開発者向けのサイトなど、ファミコン好き多いでしょう、たぶん受けはいいはず

この記事を共有しよう!

前の記事
Pts.jsによる実践ジェネラティブアート
次の記事
たった4ステップでVueを使う方法
関連記事
  • CODING
    BEM, SMACCSを受け継いだ書きやすいCSS記法RSCSS3ヶ月前
    気軽にCSS書きたいけどGlobal汚染して破綻するのは避けたい。RSCSSというCSS記法(設計)はそんなケースにぴったりです。私は2年ほど前から今もずっと使い続けているので、その特徴などをコードベースでご紹介します。