mdi-xとは？初心者にもわかる使い方と意味を徹底解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

mdi-xとは？

mdi-xは、Material Design Icons（MDI）に含まれるアイコン名のひとつです。mdi-という接頭辞はアイコンを識別するための命名規則で、mdi-xは主に「X」形を表すアイコンとして使われます。ウェブサイトやアプリのUIで「閉じる」「取消」「削除」といった動作を示すときに直感的に伝わる表示として広く利用されています。

mdi-xの由来と役割

MDIのアイコン名は、その形状をそのまま示すことを目的としています。mdi-xは十字形のデザインで、ユーザーに「この操作を閉じる・取り消す」という意味を視覚的に伝えます。テキストだけのボタンよりも直感的に理解しやすく、UIをすっきりと保つのに役立ちます。

基本的な使い方

基本的な使い方は、まずアイコンライブラリをページに読み込み、のように要素にクラスを付けるだけです。表示にはアイコン用のフォントやCSSが必要になるため、公式サイトの案内に従ってライブラリを正しく読み込むことが前提になります。一般的な手順は以下のとおりです。

1) ライブラリの公式サイトからCDNリンクを取得してHTMLの内に追加（例: https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css のようなリンク）

2) HTMLの任意の場所に class='mdi mdi-x'> を配置する

3) 必要に応じて色や大きさをCSSで調整する

このとき「mdi-x」はアイコン名であり、人物名ではありません。UIのボタンやアイコンとして機能します。

コード例

以下は最も基本的な使い方です。見た目の横にXアイコンが表示されます。

はXアイコンです。次の例は色と大きさを変更しています。

例:

比較表

アイコン名	表示	用途
mdi-x	X(十字)アイコン	閉じる・取消・削除の作用を示す
mdi-close	近い意味の「閉じる」	ウィンドウやモーダルを閉じるボタンに使われる
mdi-close-circle	丸い囲いのX	重要度を高めて閉じる操作を示すときに適用

よくある疑問と回答

Q: mdi-xは無料で使えますか？ A: はい、MDIは多くの場合オープンなライセンスの範囲で提供されていますが、商用利用前には公式のライセンス条件を確認しましょう。

Q: 他のアイコン名とどう違いますか？ A: mdi-xはX形のアイコンであり、mdi-closeやmdi-close-circleなどは似た意味の別デザインです。デザインの統一感や用途に合わせて使い分けると良いです。

アクセシビリティとデザインのコツ

アイコンだけを使う場合でも、視覚以外の手段で意味を伝えることが大切です。スクリーンリーダーを使うユーザーにはaria-labelやaria-labelledbyなどを付けてアイコンの意味を伝えましょう。アイコンは視覚情報を補完する役割なので、ボタンにはラベルテキストを用意するのが望ましいです。また、色だけで意味を伝えるデザインは避け、アイコンの形状そのものの意味を活かす設計を心がけましょう。

まとめ

mdi-xはウェブデザインでよく使われる「閉じる・取消」を示すアイコン名の一つです。正しく読み込み・設定すれば、UIの案内を視覚的に分かりやすくすることができます。アイコンを使えば、長いテキストを減らし、画面をスッキリさせつつ、操作の意図をすばやく伝えられます。初心者でも、MDIの基本を押さえれば簡単に導入できるため、まずはmdi-xを有効活用してみましょう。

mdi-xの同意語

閉じるアイコン: ダイアログやウィンドウを閉じる操作を示す、十字の×マークを用いるアイコンを指す名称の同義語。
クローズアイコン: 英語の close に由来する表現で、閉じる動作を表すアイコンの別名。
キャンセルアイコン: 現在の操作を取り消す、あるいは実行中の処理を停止することを示すアイコン。
取消アイコン: 操作の取り消しを示すアイコンの総称。文脈により使用される。
×ボタン: 十字の×マークが描かれたボタンで、閉じる・取消のアクションを実行する要素。
クリアアイコン: 入力欄の内容をクリア（消去）するために使われるアイコン。
閉じるマーク: ダイアログやメニューを閉じることを示す、閉じる機能のマーク全般を指す表現。
閉じるボタン: 閉じる機能を持つボタンを指す名称。

mdi-xの対義語・反対語

開く: X（閉じる・削除）の対義語。窓やメニューを開く、内容を画面に表示する動作を意味します。
表示する: 非表示・隠すの対義語。内容を画面に表示する動作を意味します。
追加する: 削除・取り除くの対義語。新しい要素を加える動作を意味します。
復元する: 削除・破棄の対義語。元の状態に戻す、失われたものを回復する動作を意味します。
承認する: 拒否・キャンセルの対義語。許可・同意を与える動作を意味します。
確定する: 取消・取り消しの対義語。処理を確定・実行状態にする動作を意味します。
再開する: 停止の対義語。作業やサービスを再び開始させる動作を指します。
保持する: 削除の対義語。要素を削除せず保持する動作を意味します。
公開する: 非公開・隠すの対義語。情報を一般に公開する動作を意味します。

mdi-xの共起語

Material Design Icons: GoogleのMaterial Designに準拠したアイコンセットで、ウェブやアプリでアイコンを表現するための総称。mdiプレフィックスをクラス名に用いて表示します。
MDI: Material Design Iconsの略称。mdi-というプレフィックスでアイコンを呼び出すアイコンセットの名称です。
mdi: Material Design Iconsをウェブ上で表示する際のCSSクラスプレフィックス。例:
mdi-close: 閉じる／×のアイコンを指す具体的なアイコン名。mdi-xと同義で使われることがあります。
mdi-x: X（クロス）を表すアイコン名。環境によってmdi-closeの代わりに使用されることがあります。
Close icon: 閉じるボタンとしてのアイコン。UIの閉じる操作を表現します。
Cancel icon: キャンセルを示すアイコン。Xはキャンセルを意味することが多いです。
Delete icon: 削除を示すアイコン。状況によってXマークが使われることがあります。
Icon font: アイコンをフォントとして使う形式。MDIはフォントとSVGの両方を提供します。
SVG icons: ベクター形式のアイコンで拡大しても品質が劣らない。MDIはSVG版を提供します。
Icon usage with CSS classes: mdiプレフィックスを使ってHTMLにアイコンを挿入する方法のこと。
Web font usage: ウェブサイトでフォントとしてアイコンを読み込み表示する方法の総称。
CDN link for mdi: CDN経由でMDIのアイコンセットを読み込む方法のこと。
UI/UX design: ユーザー体験設計の中で、閉じる・取消を表すアイコンとして採用されます。
Cross symbol: 十字・クロスの記号。Xアイコンの基本的な意味を示します。
Accessibility (a11y): 視覚的アイコンにも代替情報を提供すること。aria-label等を活用します。
aria-label: アクセシビリティのための属性。アイコンの説明文を代替テキストとして伝えます。
React: Reactなどのフレームワークでアイコンをコンポーネントとして使う場面が多いです。
Vue: Vueでもmdiアイコンを使うコンポーネントがよく利用されます。
Angular: Angularプロジェクトでもmdiを使ったアイコン設計が可能です。
Icon component: アイコンを再利用可能なコンポーネントとして扱う考え方。
UI libraries: Material Design起源のUIライブラリでアイコンとしてmdiを組み込むケースが多いです。

mdi-xの関連用語

MDI (Material Design Icons): Material Designの指針に沿って作られたアイコンセットで、SVGとアイコンフォントの両方を提供します。ウェブやアプリ開発で使われる幅広いアイコン群です。
mdi-x: MDIに含まれるアイコン名の一つで、十字形の閉じる・取消しアイコンを表すことが多いアイコン名です。
mdi-プレフィックス: mdi-はMDIのアイコン名の共通接頭辞で、全アイコンの識別に使われます。
SVGアイコン: SVG形式のアイコン。拡大縮小しても劣化せず、色やサイズをCSSで自由に調整できます。
アイコンフォント: フォントとして提供されるアイコン群。テキストと同様に扱えるためサイズ調整が簡単ですが、パフォーマンスやアクセシビリティに留意が必要です。
クローズアイコン: UIの閉じるまたは取消しを示す代表的なアイコンカテゴリ。mdi-xはこの用途を表すことが多いです。
アイコンの導入方法（SVG）: HTMLに直接SVGを組み込む、もしくはSVGファイルをimg要素やinline SVGとして表示します。
アイコンの導入方法（フォント）: アイコンフォントとして読み込み、CSSで色・サイズを調整します。読み込み最適化とアクセシビリティに注意が必要です。
CDN経由の利用: 外部CDNからMDIを読み込む方法。セットアップが簡単ですがネットワーク依存になります。
ビルドツールとの統合: WebpackやRollupなどのビルドツールを使って、アイコンを自分のプロジェクトに組み込みやすくします。
ARIAと代替テキスト: スクリーンリーダーにアイコンの意味を伝えるため、aria-labelやroleを設定してアクセシビリティを向上させます。
カラー・サイズのカスタマイズ: CSSで色やサイズを変更でき、currentColorを活用するとデザイン統一感を出せます。
SVGリスポンシブデザイン: SVGは高解像度ディスプレイにも美しく対応でき、アイコンの視認性を保ちます。