{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"5732c3b3-4830-56a4-a897-9ad20e605e6f","html":"

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

\n

\n

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

\n

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

\n

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

\n

\n \n \n \n \n \n \n \n導入方法

\n

\n \n \n \n \n \n \n \nCDN版

\n

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

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

\n \n \n \n \n \n \n \npackage版

\n

インストールします。

\n
npm install nes.css\n# or\nyarn add nes.css
\n

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

\n
import \"nes.css/css/nes.css\";
\n

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

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

\n \n \n \n \n \n \n \n使用する上での注意点

\n

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

\n

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

\n

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

\n

\n \n \n \n \n \n \n \ndialogを使う場合はpolyfillの導入が必要

\n

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

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

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

\n

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

\n

\n \n \n \n \n \n \n \nCSSアーキテクチャはBootstrapベース？

\n

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

\n

\n \n \n \n \n \n \n \nこのライブラリの使い所

\n

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

\n","fields":{"slug":"/2019-07-23_かわいいファミコン風CSSライブラリNEScss/"},"tableOfContents":"","frontmatter":{"date":"2019.07.23","title":"かわいいファミコン風CSSライブラリNES.css","cover":"","category":"Coding","excerpt":"簡単にファミコン風の見た目にするCSSライブラリ NES.css について、その内容や導入方法、使用感などをレポートします。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"5732c3b3-4830-56a4-a897-9ad20e605e6f","next":{"path":"/2019-07-15_Ptsjsによる実践ジェネラティブアート/","title":"Pts.jsによる実践ジェネラティブアート","category":"Coding"},"prev":{"path":"/2019-08-15_たった4ステップでVueを使う方法/","title":"たった4ステップでVueを使う方法","category":"Coding"},"relatedPosts":[{"id":"b1d3973a-65b6-5631-ae87-d3334f795deb","fields":{"slug":"/2019-08-30_BEMSMACCSを受け継いだ書きやすいCSS記法RSCSS/"},"frontmatter":{"title":"BEM, SMACCSを受け継いだ書きやすいCSS記法RSCSS","date":"2019-08-30T00:00:00.000Z","excerpt":"気軽にCSS書きたいけどGlobal汚染して破綻するのは避けたい。RSCSSというCSS記法(設計)はそんなケースにぴったりです。私は2年ほど前から今もずっと使い続けているので、その特徴などをコードベースでご紹介します。","templateKey":"post","category":"Coding","propertags":null,"commontags":["css","arch"]}}]}}