イントロダクション

mduiのCDNと最もシンプルなページテンプレートを使用して、mduiを使い始めましょう。

クイックスタート

mduiを使用する最も簡単な方法は、CDNから直接CSSとJSファイルを導入することです。

パッケージマネージャーを使用したり、ソースファイルをダウンロードしたりする場合は、ダウンロードページへ進んでください。

CSS ファイル

以下の <link> タグを <head> タグ内に追加し、他のすべてのスタイルファイルよりも前に配置してください。

<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css">

JS ファイル

以下の <script> タグをページの末尾、</body> タグの前に追加してください。

<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>

mduiはサードパーティのライブラリに依存しておらず、上記の2つのファイルを導入するだけで正常に使用できます。

最もシンプルなページテンプレート

ページが最新のデザインおよび開発標準に従っていること、つまり HTML5 doctype を使用し、レスポンシブ対応のための viewport meta タグが含まれていることを確認してください。したがって、ページは以下のようになります：

<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <meta name="renderer" content="webkit">

    <!-- mdui CSS -->
    <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- mdui JavaScript -->
    <script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
  </body>
</html>

以上が完全なページに必要なすべての内容です。これをベースに、さらに多くのコンポーネントやコンテンツを追加して、ウェブサイトを構築できます。

ダウンロード