インストール

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

クイックスタート

AsagaoUIを使い始めるために、以下の2つの重要な設定を必ず行ってください。

viewportメタタグを追加してください。
ルートクラスauiを追加してください。

クイックスタート用のテンプレートHTMLは次の通りです。

<!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="aui">
<h1>AsagaoUI</h1>
<script src="https://cdn.jsdelivr.net/npm/asagaoui/dist/js/asagaoui.min.js"></script>
</body>
</html>

ダウンロード

すべての入手方法はリソースページをご覧ください。

スタイルの使用


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

JSの使用

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


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

コード要件

HTML

AsagaoUIはHTML Living Standardに準拠したHTMLマークアップを前提として設計されています。

CSSリセット

AsagaoUIは一貫したスタイリングを実現するため、The New CSS Reset を使用してすべてのデフォルトCSSをリセットしています。

フォント

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

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

デフォルトの設定

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