インストール

AsagaoUIはデジタル庁デザインシステムに基づいて構築されたUIコンポーネントを持つ CSSフレームワークであり、美しく効率的なウェブ開発を実現します。

クイックスタート

簡単にAsagaoUIを使用できます。レスポンシブデザインに対応するためにviewportを追加する必要があります。そしてbodyタグにクラスbodyを追加するのを 忘れないでください。<body class="body"></body>

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AsagaoUI demo</title>
    <link href="https://cdn.jsdelivr.net/npm/asagaoui/dist/css/asagaoui.min.css" rel="stylesheet">
</head>
<body class="body">
<h1>AsagaoUI</h1>
<script src="https://cdn.jsdelivr.net/npm/asagaoui/dist/js/asagaoui.min.js"></script>
</body>
</html>

CDN

AsagaoUIはjsDelivrから入手できます。

npm

AsagaoUIはnpmから入手できます。

npm i asagaoui

スタイルの使用

AsagaoUIのレポジトリからソースファイルをダウンロードしてください。/dist/css/asagaoui.css がコンパイル済みのCSSです。

<link rel="stylesheet" href="dist/css/asagaoui.css">

JSの使用

/dist/js/asagaoui.jsがコンパイル済みのJSです。

<script src="dist/js/asagaoui.js"></script>

CSSリセット

AsagaoUIはすべてのデフォルトCSSをリセットするためにThe New CSS Reset を使用しています。

フォント

AsagaoUIで使用するフォントは「Noto Sans Japanese」が設定されています。使用されるフォントウェイトは、通常のテキスト用の400、少し太いテキスト用の500、強調表示や見出し用の700です。

フォントをウェブサイトに適用するには、Google Fontsなどから読み込むか、フォントファイルをセルフホストしてください。

デフォルトの設定

.body {
    font-family: "Noto Sans JP", sans-serif;
}

目次