要素一覧
目次
検索
メニュー
コンポーネント
ダミーテキストはどのような場合に使用されますか。 これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章
このコンポーネントはAsagaoUIオリジナルのコンポーネントです。デジタル庁デザインシステムにはこのコンポーネントは定義されていません。 タ
AsagaoUI A B C A B C A B C コード <table class="table"> <caption> AsagaoUI </caption> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> </thead> <tbody> <tr> <th>A</th> <td>B</td> <td>C</td> </tr> <tr> <th>A</th> <td>B</td> <td>C</td> </tr> </tbody> </table>
11 12/20 13 コード <nav> <ul class="pagination"> <li class="pagination-item"> <a class="pagination-link first" href=""></a> </li> <li class="pagination-item"> <a class="pagination-link prev" href=""></a> </li> <li class="pagination-item"> <span class="pagination-dots"></span> </li> <li class="pagination-item"> <a class="pagination-link" href="">11</a> </li> <li class="pagination-item"> <span class="pagination-now">12/20</span> </li> <li class="pagination-item"> <a class="pagination-link" href="#">13</a> </li> <li class="pagination-item"> <span class="pagination-dots"></span> </li> <li class="pagination-item"> <a class="pagination-link next" href="#"></a> </li> <li class="pagination-item"> <a class="pagination-link last" href="#"></a> </li> </ul> </nav>
次のボタンで、モーダルダイアログを開くことができます。 モーダルダイアログを開く ダイアログタイトル ダイアログ補助のテキストが入ります。 ダイアロ
カルーセルです。 画像を横にスライドさせて複数表示することができます。 最初に表示するcarousel-itemにactiveクラスを設定する必
<button type="button" class="scrolltopbtn"></button>
ドロワーは、モバイルメニューなどの外部から展開するコンテンツを作成できます。 モーダルダイアログとは異なります。 基本的なコード <!-- ドロワーと方向
重要度の高い情報を通知するバナーです。 バナーのタイプ デフォルト バナータイトル バナーデスクリプション コード <div class="banner"> <p class="bann
ホーム ページ見出し1 ページ見出し2 コード <nav> <ol class="breadcrumb"> <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">ホーム</a></li>
デジタル庁デザインシステムで定義されているヘッダーはフルヘッダーとスリムヘッダーの２種類があります。ヘッダーコンポーネントはこの２種類を効率
標準のボタン なんの変哲もないボタン <button type="button" class="btn">なんの変哲もないボタン</button> ボタ
要素一覧 目次 検索 メニュー コード <nav class="bottomdock"> <button class="bottomdock-item"> <div class="bottomdock-icon"> <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"> <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm280-80h280v-560H480v560Z"/> </svg> </div> <div class="bottomdock-label&#
メガメニューは主にグロバールメニューで使用されるドロップダウンメニューです。自由なコンテンツ設計が可能な構造にしました。 コード CSS .mega-menu-area {} .mega-menu {} .mega-menu-header {}
モバイルメニューは主にドロワーとともに使用されます。 コード <ul class="mobilemenu"> <li class="mobilemenu-item"><a class="mobilemenu-link" href=""></a></li> <li class="mobilemenu-item"><a class="mobilemenu-link" href=""></a></li> </ul>
Language 日本語 English Русский Español コード <div class="langsel"> <button class="langsel-btn"> Language </button> <ul class="langsel-menu"> <li><a class="langsel-item active" href="" data-lang="ja">日本語</a&
緊急時用のバナーです。 緊急時バナーのタイトル 2024年2月27日 05:00更新 最重要で知らせるべきコメントをここに記載します。 コード <div class="emergency-banner"> <div class="emergency-banner-header">
目次