material-web は無料で使えますか？ライセンスは？

material-web は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

material-web は今もメンテナンスされていますか？

活発にメンテナンス中。material-web の最終コミットは 2026年10月22日です。

material-web は何に使えますか？

静的なHTMLページにMaterialスタイルのボタン、テキストフィールド、フォームコントロールを追加する特定のフレームワークに依存せず、Material 3でWebアプリのUIを構築する CDNから読み込んでMaterialのインターフェースを手早く試作する

material-web のインストール方法は？

README の buildless HTML の例を HTML ファイルにコピーします HTML ファイルをブラウザーで開くと、CDN から読み込まれたコンポーネントを確認できます

material-web はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/material-components/material-web

material-components/material-web

Q: material-web は今もメンテナンスされていますか？

活発にメンテナンス中。material-web の最終コミットは 2026年10月22日 です。

LitベースのMaterial Design 3 Web Components。CDNまたはnpmで導入でき、アクセシブルなWebアプリを構築できます。

GitHub で見る公式サイト

スター: 11,369
フォーク: 1,158
未解決の Issue: 189
最終コミット: 3 日前

これは何？

Material Web（@material/web）は、GoogleのMaterial 3デザインシステムを実装したWeb Componentsのライブラリです。ボタン、チェックボックス、ラジオボタン、テキストフィールド、タイポグラフィスタイルなどのコンポーネントは、標準のカスタム要素として提供されているため、通常のHTMLのほか、React、Vue、Angularなどのフレームワーク内でも使用できます。

import mapを使えばビルド工程なしでCDNから直接読み込めます。また、本番ビルド向けにnpmからインストールすることもできます。Typescaleのスタイルシートには、任意の要素に適用できるMaterialのタイポグラフィスタイルが用意されています。

新たなメンテナーを探しているため、プロジェクトはメンテナンスモードにあります。導入を検討するチームは、この点を踏まえて計画してください。

主な機能

01Material 3のコンポーネントを標準のWeb Componentsとして提供
02通常のHTMLやReact、Vue、Angularと組み合わせて使用可能
03CDNとimport mapsを使ったビルド不要の導入
04Materialのタイポグラフィスタイルを使えるTypescaleスタイルシート
05本番ビルド向けにnpmからインストール可能

ユースケース

静的なHTMLページにMaterialスタイルのボタン、テキストフィールド、フォームコントロールを追加する
特定のフレームワークに依存せず、Material 3でWebアプリのUIを構築する
CDNから読み込んでMaterialのインターフェースを手早く試作する

クイックスタート

1
README の buildless HTML の例を HTML ファイルにコピーします
2
HTML ファイルをブラウザーで開くと、CDN から読み込まれたコンポーネントを確認できます

使う前に知っておきたいこと

新しいメンテナーを探している間、プロジェクトはメンテナンスモードです

収録されている特集

フロントエンドのフレームワークとUIコンポーネント

トピック

#web-components #material-design #design-system #lit #ui-components #css #component #lit-element #lit-html #material

よくある質問

material-web とは？: LitベースのMaterial Design 3 Web Components。CDNまたはnpmで導入でき、アクセシブルなWebアプリを構築できます。 Material Web（@material/web）は、GoogleのMaterial 3デザインシステムを実装したWeb Componentsのライブラリです。ボタン、チェックボックス、ラジオボタン、テキストフィールド、タイポグラフィスタイルなどのコンポーネントは、標準のカスタム要素として提供されているため、通常のHTMLのほか、React、Vue、Angularなどのフレームワーク内でも使用できます。
material-web は無料で使えますか？ライセンスは？: material-web は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
material-web は今もメンテナンスされていますか？: 活発にメンテナンス中。material-web の最終コミットは 2026年10月22日です。
material-web は何に使えますか？: 静的なHTMLページにMaterialスタイルのボタン、テキストフィールド、フォームコントロールを追加する特定のフレームワークに依存せず、Material 3でWebアプリのUIを構築する CDNから読み込んでMaterialのインターフェースを手早く試作する
material-web のインストール方法は？: README の buildless HTML の例を HTML ファイルにコピーします HTML ファイルをブラウザーで開くと、CDN から読み込まれたコンポーネントを確認できます
material-web はどこで入手できますか？: ソースコードとインストール手順は GitHub にあります：https://github.com/material-components/material-web

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。