開発の基盤づくり

アプリケーションのデザインに一貫性をもたせるうえで、カラーやタイポグラフィーなどは重要な要素となります。 このページでは、Lit と Tailwind CSS (React) 環境へ、このデザインシステムのカラー＆タイポグラフィ設定ファイルを取り込み・活用する手順をざっくりとご紹介します。

ヒント

注意: LitやTailwind自体のインストール方法については、このページでは詳細に扱いません。公式ドキュメントを参照してください。

1. GitHubリポジトリのコピー

まずは、このデザインシステムが管理しているカラーとタイポグラフィの設定ファイルを取得するところからスタート。 以下のリポジトリをClone or Downloadし、必要なファイルだけをコピーすることでも始められます。

リポジトリ

Lit

Tailwind (React)

注記

もし部分的にだけ使いたい場合は、該当するCSSファイルやモジュールをピックアップしてコピーするとよいでしょう。

2. 適用例

Tailwind

Tailwindでの利用を想定する場合、tailwind.config.jsの中にこのデザインシステムで定義した色やフォントの設定を取り入れつつTailwindを利用するCSSファイルをマージする形が基本です。

注意

こちらはあくまで設定ファイルを参考に追加する方法です。Tailwind自体のインストールや詳細設定は公式ドキュメントを参照してください。

例

tailwind.config.js

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        black: "var(--basic-black)",
        silver: "var(--basic-silver)",
        gray: "var(--basic-gray)",
        white: "var(--basic-white)",
        // 追加のスタイル
      },
      fontFamily: {
        // 追加のスタイル
      }
    },
  }

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --basic-black: #000000;
  --basic-silver: #c0c0c0;
  --basic-gray: #808080;
  --basic-white: #ffffff;
  /* 追加のスタイル */
}

Lit

Litで利用する場合は、my-colors.cssやmy-typography.cssといったCSSファイルを直接Webコンポーネントに読み込むだけでもOKです。

ヒント

ただし、Litの環境設定や依存関係の構築手順は 公式ドキュメントを参照してください。

例

colorPalette.js

import { css } from "lit";

export const colorPalette = css`
  :host {
    /* basic theme */
    --basic-black: #000000;
    --basic-silver: #c0c0c0;
    --basic-gray: #808080;
    --basic-white: #ffffff;
    // 追加のスタイル
  }`

my-web-component.js

import { LitElement, html, css } from 'lit';
import { colorPalette } from './path/to/my-colors.css';
import { typography } from './path/to/my-typography.css';

export class MyWebComponent extends LitElement {
  static styles = [
    colorPalette,
    typography,
    css`
      --color-black: var(--basic-black);
      --color-silver: var(--basic-silver);
      --color-gray:  var(--basic-gray);
      --color-white: var(--basic-white);
    `,
  ];

  render() {
    return html`
      <div class="my-class">
        <slot></slot>
      </div>
    `;
  }
}
customElements.define('my-web-component', MyWebComponent);

危険

バージョンやファイル名は随時変わる可能性があります。リポジトリの最新情報を必ず確認してください。

3. 今後の展開

• コンポーネントの利用方法を順次追加予定 カラー＆タイポグラフィの基盤設定に留まらず、コンポーネントの使い方やサンプルコードを今後追記していきます。経験が蓄積され次第、より詳細なドキュメントを提供予定です。

• 公式ドキュメントも定期チェック LitやTailwindは継続的にアップデートされています。各公式ドキュメントを随時参照し、最新の情報を反映しましょう。

ヒント

基盤をしっかり整えた上で、コンポーネント開発やレイアウト実装に集中しやすくなるのが本デザインシステムの狙いです。

1. GitHubリポジトリからファイルを取得
2. TailwindやLitの環境を整え（公式ドキュメント参照）
3. 配置したファイルをtailwind.config.jsやCSSモジュールで読み込む
4. 必要に応じてカスタマイズし、プロジェクトで活用

---