ヘルプ - バーンワークス UI ライブラリ

バーンワークス UI ライブラリは、Tailwind CSS を使用した日本語ウェブサイト向け UI サンプル集です。各 UI は HTML と React 向けのソースコードがコピーできます。

本 UI ライブラリは、Tailwind CSS （v2.0 以降）の使用が前提です。npm を使用して最新の Tailwind CSS、およびその依存パッケージをインストールすることが可能です。

# Get started
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

詳しいインストール方法、使用方法に関しては、Tailwind CSS の公式ドキュメントを確認してください。

Documentation - Tailwind CSS

基本的な使い方

各コンポーネントは、「UI のプレビュー」の下部に「ソースコードの表示」ボタンがセットになって表示されています。また、一部の UI コンポーネントは、ダークモードのエミュレートができるようになっています。

ソースコードの表示は、素の HTML、もしくは React 用のソースコードを選択できます。それぞれのソースコードは、ソースコード表示エリア右上に表示されるコピーボタンでクリップボードにコピーすることができます。

使い方のヒント

各コンポーネントのソースコードは汎用性を重視して上下方向の margin や padding は設定していません。

実際に使用する場合は、下記の例のように、コンポーネントを div 要素などで包含し、その要素に margin や padding、あるいは背景色などを設定すると使いやすいと思います。

<div class="py-16 bg-gray-50">
  <!-- ここにコピーしたコンポーネントのソースコード -->
</div>

React コンポーネントの作成

サンプルとして公開している React ソースコードは、シンプルな単一のコンポーネントとして機能するようにしていますが、実際に利用する場合は、プロジェクトで使いやすいようにより細かいコンポーネントに分解したり、props を利用する形に変更するなどうまいことやってください。

コンポーネントのアクセシビリティ

各 UI コンポーネントの HTML 文章構造や、使用している文字色と背景色のコントラスト比などは、WCAG 2.0 の適合レベル AA を基準に設定しており、アクセシビリティに配慮されています。

ただし、背景画像を伴うコンポーネントに関しては、使用する画像などによってそれに重なる文字色とのコントラスト比が不足する可能性があるなど、完全ではない場合もあります。実際にご利用の際、あるいは文字色や背景色を変更するなど、独自にデザインのカスタマイズを行う際はご注意ください。

サードパーティプラグイン

一部のコンポーネントでは、Tailwind CSS プラグインを使用しています。詳しくは下記の公式ドキュメントをご確認ください。

Plugins - Tailwind CSS

必要に応じてプラグインをインストールし、tailwind.config.js に設定を追加しますが、例えば、@tailwindcss/line-clamp を使用する場合、下記のいずれかの方法でパッケージをインストールし、

# Using npm
npm install @tailwindcss/line-clamp

# Using Yarn
yarn add @tailwindcss/line-clamp

tailwind.config.js にプラグインを読み込むための設定を追加します。

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/line-clamp'),
  ]
}

Just-in-Time （JIT）モード

一部のコンポーネントは Just-in-Time モードが有効である前提になっています。詳しくは下記の公式ドキュメントをご確認ください。

Just-in-Time Mode - Tailwind CSS

Just-in-Time モードを有効にするには、tailwind.config.js に設定を追加します。

// tailwind.config.js
module.exports = {
  mode: 'jit',
    purge: [
      // ...
    ],
    theme: {
      // ...
    }
    // ...
  }

動作確認ブラウザ

バーンワークス UI ライブラリに掲載している各コンポーネントは、基本的に Tailwind CSS v2.0 がサポートするブラウザにおいて、動作、及び表示確認を行っています。

具体的には最新版の Google Chrome、Firefox、Edge、そして Safari が動作確認ブラウザになりますが、一方で、IE11 をふくめ、Internet Explorer はサポート対象外ですので表示が崩れたり、動作しない場合があります。あらかじめご了承ください。

使用したリソース

バーンワークス UI ライブラリでは Tailwind CSS 以外に下記のリソースを使用しています。

サンプルで使用している画像に関しては、CC0 ライセンス下、もしくはパブリックドメインで公開されているものを使用しています。CC0 ライセンスについて詳しくは下記をご確認ください。

CC0 1.0 Universal (CC0 1.0) - Creative Commons

サンプルで使用している画像はあくまでサンプル UI を構成する目的で使用しており、画像自体の再配布のためではありません。同じ画像を使用したい場合は、各画像を配布しているウェブサイトの利用規約を確認してください。

ソースコードの使用について

個人利用、商用利用を問わず、本ライブラリのソースコード表示機能からコピーしたソースコードは自由に使用していただいて構いません。また改変なども当然問題ありません。さらに、クレジットの表記やリンクを張るといったことを義務付けることもありません。

ただし、本ライブラリで公開されているソースコードをそのまま有料、無料を問わず再配布するような行為はおやめください。

プロジェクトのサポート

本ライブラリが役に立ったので少しカンパしてもいいという気前のよい方がいらっしゃいましたら、「サポートする」ページもあわせてご覧頂ければ幸いです。

更新履歴

更新履歴（Changelog）は下記で更新しています。

更新履歴

How to useヘルプ