今回は、ナビゲーションのUIを構築するコンポーネントの使い方について紹介します(^^)
ナビゲーション
基本的な使い方
ul 要素または nav 要素に nav クラスを追加してナビゲーションをつくります。
どちらの要素を使うかによって使用するクラスも異なります。
ul 要素を使用する場合
まず、ul 要素に nav クラスを追加してナビゲーションを作ります。
そして、li 要素に nav-item クラスを追加してナビゲーション項目を作り、その子要素に a 要素を配置して nav-link クラスを追加します。
また、disabled クラスを追加するとリンクを無効化できます。
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">項目3</a>
</li>
</ul>
nav 要素を使用する場合
まず、nav 要素に nav クラスを追加してナビゲーションを作ります。
そして、子要素の a 要素に nav-link クラスを追加してナビゲーションリンクを作ります。
また、disabled クラスを追加するとリンクを無効化できます。
<nav class="nav">
<a href="#" class="nav-link">項目1</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link disabled">項目3</a>
</nav>ナビゲーションのスタイル
ナビゲーションの水平方向の整列
justify-content-{ 位置 } クラスを nav クラスが設定された要素に追加することで、水平方向の整列をすることができます。
”位置”には、center（中央揃え）end（右揃え）が入ります。
<nav class="nav">
<a href="#" class="nav-link">項目1</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link disabled">項目3</a>
</nav>
<nav class="nav justify-content-center">
<a href="#" class="nav-link">項目1</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link disabled">項目3</a>
</nav>
<nav class="nav justify-content-end">
<a href="#" class="nav-link">項目1</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link disabled">項目3</a>
</nav>
ナビゲーションを縦に並べる
nav クラスが設定された要素に flex-column クラスを追加することで、ナビゲーション項目を縦に並べることができます。
<nav class="nav flex-column">
<a href="#" class="nav-link">項目1</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link disabled">項目3</a>
</nav>
タブ型ナビゲーション
nav クラスが設定された要素に nav-tabs クラスを追加することで、タブ型ナビゲーションをつくることができます。
最初に表示したいタブに active クラスを追加することでアクティブ状態になります。
<nav class="nav nav-tabs">
<a href="#" class="nav-link active">項目1</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link">項目3</a>
</nav>
ピル型ナビゲーション
nav クラスが設定された要素に nav-pills クラスを追加することで、ピル型ナビゲーションをつくることができます。
最初にハイライト表示したいリンクに active クラスを追加することでアクティブ状態になります。
<nav class="nav nav-pills">
<a href="#" class="nav-link active">項目1</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link">項目3</a>
</nav>
項目の幅の調整
nav クラスが設定された要素に nav-fill クラスを追加することで、ナビゲーション全幅にわたってナビゲーション項目を広げることができます。
項目ごとの領域はそれぞれの内容に合わせて調節され、すべて同じ幅になるとは限りません。
<p>通常</p>
<nav class="nav nav-pills">
<a href="#" class="nav-link active">項目1：アクティブ</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link">項目3</a>
</nav>
<p>nav-fill クラス追加</p>
<nav class="nav nav-pills nav-fill">
<a href="#" class="nav-link active">項目1：アクティブ</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link">項目3</a>
</nav>
すべての項目を等幅にするには、nav クラスが設定された要素に nav-justified クラスを追加します。
<p>nav-fill クラス追加</p>
<nav class="nav nav-pills nav-fill">
<a href="#" class="nav-link active">項目1：アクティブ</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link">項目3</a>
</nav>
<p>nav-justified クラス追加</p>
<nav class="nav nav-pills nav-justified">
<a href="#" class="nav-link active">項目1：アクティブ</a>
<a href="#" class="nav-link">項目2</a>
<a href="#" class="nav-link">項目3</a>
</nav>
レスポンシブ対応
nav クラスが設定された要素に fles-column クラスと flex-sm-row クラスを追加することで、画面幅が sm 未満では項目が縦並び、sm 以上では横並びになるというレスポンシブ対応が可能になります。
また、a 要素に flex-sm-fill クラス、text-sm-center クラスを追加することで、画面幅が sm 以上（項目が横並び）のときは項目を等幅で横幅いっぱいに伸ばし、テキストを中央揃えにすることができます。
<nav class="nav nav-pills flex-column flex-sm-row">
<a href="#" class="flex-sm-fill text-sm-center nav-link active">項目1</a>
<a href="#" class="flex-sm-fill text-sm-center nav-link">項目2</a>
<a href="#" class="flex-sm-fill text-sm-center nav-link">項目3</a>
</nav>
ドロップダウン
li 要素に dropdown クラスを追加することでドロップダウンを設定することができます。
ドロップダウンには以下のようなクラスを用います。
| クラス名 | 機能 |
|---|---|
| dropdown | ドロップダウンの外枠を作成 |
| dropdown-toggle | ドロップダウンを示すマークを追加 |
| dropdown-menu | ドロップダウンメニューの外枠を作成 |
| dropdown-item | ドロップダウンメニューの項目を作成 |
| dropdown-divider | ドロップダウンメニュー項目の区切り線を作成 |
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">項目1</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">項目2</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">項目2-1</a></li>
<li class="dropdown-item"><a href="#">項目2-2</a></li>
<li class="dropdown-item"><a href="#">項目2-3</a></li>
<div class="dropdown-divider"></div>
<li class="dropdown-item"><a href="#">その他</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
データ属性でJavaScriptを利用
たとえばタブの切り替えパネルを作るには、data-toggle=”tab”（タブ型）や data-toggle=”pill”（ピル型）を追加するだけで実装できます。
パネル部分は、パネル全体を囲む要素に tab-content クラスを追加し、各パネルとなる要素に tab-pane クラスを追加します。
最初に表示させるパネルには active クラスと show クラスを追加し、パネルをフェードイン表示させるには各パネルに fade クラスを追加します。
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#nav1" class="nav-link active" data-toggle="tab" role="tab">項目1</a>
</li>
<li class="nav-item">
<a href="#nav2" class="nav-link" data-toggle="tab" role="tab">項目2</a>
</li>
<li class="nav-item">
<a href="#nav3" class="nav-link" data-toggle="tab" role="tab">項目3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav1" role="tabpanel">
項目1のコンテンツが入ります。
</div>
<div class="tab-pane fade" id="nav2" role="tabpanel">
項目2のコンテンツが入ります。
</div>
<div class="tab-pane fade" id="nav3" role="tabpanel">
項目3のコンテンツが入ります。
</div>
</div>
ナビゲーションバー
外枠の作成
ナビゲーションの外枠を作るには、nav 要素または div 要素に navbar クラスを追加します。
そして、その中に様々なサブコンポーネントを加えていきます。
サブコンポーネント
ナビゲーションバーの枠内はさまざまなサブコンポーネントで構成され、ブランド、ナビゲーション、検索フォームなど含めることができます。
ブランド
ブランドは、ナビゲーションバーにブランド名やロゴ画像を表示させるサブコンポーネントです。
ブランドとして表示させたい要素に navbar-brand クラスを追加することで実装できます。
<h5>navbar-brand クラス追加</h5>
<nav class="navbar navbar-dark bg-dark">
<a href="#" class="navbar-brand">ブランド</a>
</nav>
<br>
<h5>navbar-brand クラスなし</h5>
<nav class="navbar navbar-dark bg-dark">
<a href="#" class="font-white">ブランド</a>
</nav>
ナビゲーション
ナビゲーションバー内にナビゲーションを配置する場合は、ul 要素や div 要素に navbar-nav クラスを追加します。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="#" class="navbar-brand">ブランド</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
</nav>
フォーム
ナビゲーションバー内にフォームをつくるには、まず form 要素に form-inline クラスを追加します。
そして、input 要素に form-control クラスを追加して入力フォームを作成することができます。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="#" class="navbar-brand">ブランド</a>
<form class="form-inline">
<input type="search" class="form-control mr-2">
<button type="submit" class="btn btn-primary">検索</button>
</form>
</nav>
テキスト
ナビゲーションバー内のテキスト要素に navbar-text クラスを追加することで、テキストのパディングや縦方向の配置を調節します。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="#" class="navbar-brand">ブランド</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
<span class="navbar-text">navbar-text</span>
</nav>
ナビゲーションバーの配色
ナビゲーションバーの背景色を設定するには、CSSでスタイルを決めるか、bg-{ 色の種類 } クラスを追加します。
そして、背景色を暗めの色を設定した場合は navbar-dark クラスを追加することで文字色が明るくなり、
背景色を明るめの色を設定した場合は navbar-light クラスを追加することで文字色が暗くなり読みやすくなります。
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a href="#" class="navbar-brand">ブランド</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
<a href="#" class="navbar-brand">ブランド</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
</nav>
ナビゲーションバーの幅指定
ナビゲーションバーは初期設定では画面いっぱいに広がります。
水平方向の中央に配置したい場合は、container クラスを設定した要素でナビゲーションバーを囲みます。
ちなみにナビゲーション項目を右寄せしたい場合は、navbar クラスが設定された要素に ml-auto クラスを追加することで実装できます。
<h4>初期設定</h4>
<nav class="navbar navbar-expand navbar-dark bg-primary">
<a href="#" class="navbar-brand">ブランド</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
</nav>
<h4>ナビゲーションバー全体を<div class="container">で囲んだ場合</h4>
<div class="container">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<a href="#" class="navbar-brand">ブランド</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
</nav>
</div>
<h4>サブコンポーネントをを<div class="container">で囲んだ場合</h4>
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="container">
<a href="#" class="navbar-brand">ブランド</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
</div>
</nav>
ナビゲーションバーの配置
navbar クラスが設定された要素に fixed-top クラス、fixed-bottom クラス、sticky-top クラスを追加することで、ページの上部や下部に固定配置することができます。
ナビゲーションバーのレスポンシブ対応
常に展開表示する場合
navbar クラスが設定された要素に navbar-expand クラスを追加することで、どのような画面幅でも表示が折りたたまれず常に展開された状態のナビゲーションバーを作ることができます。
<nav class="navbar navbar-expand navbar-dark bg-primary">
<a href="#" class="navbar-brand">ブランド</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
</nav>
コンテンツの表示・非表示
ナビゲーションバー内のコンテンツを折りたたんで非表示にしたい場合、collapse クラスと navbar-collapse クラスが設定された要素でそのコンテンツを囲みます。
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a href="#" class="navbar-brand">ブランド</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
</div>
</nav>
ハンバーガーメニュー
ハンバーガーメニューをつくるには、まず navbar-brand クラスが設定された要素の後に navbar-toggler クラスを設定した要素を配置します。
その要素に、data-toggle=”collapse” と data-target=”表示させたい要素の id 属性値” を追加します。
そして、同要素の子要素に navbar-toggler-icon クラスを設定した span 要素を配置することでハンバーガーメニューのアイコンを作ることができます。
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
<a href="#" class="navbar-brand">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a href="#" class="nav-link">項目1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">項目3</a>
</li>
</ul>
</div>
</nav>
パンくずリスト
パンくずリストとは、現在見ているWebページの位置を階層的に示したコンポーネントです。
基本的な使い方
nav 要素内の ol 要素に breadcrumb クラスを、li 要素に breadcrumb-item クラスを追加することでパンくずリストを作ることができます。
<nav role="navigation" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">ホーム</a></li>
<li class="breadcrumb-item"><a href="#">項目1</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">項目1-2</a></li>
</ol>
</nav>
リストグループ
リストグループは、リスト項目をひとまとまりのコンテンツとしたコンポーネントです。
基本的な使い方
ul 要素に list-group クラス、li 要素に list-group-item クラスを追加することでリストグループを作ることができます。
リスト項目をアクティブ状態にするには active クラスを、リスト項目を無効状態にするには disabled クラスを追加します。
<ul class="list-group">
<li class="list-group-item active">項目1</li>
<li class="list-group-item">項目2</li>
<li class="list-group-item disabled">項目3</li>
</ul>
リンク付きリストグループ
a 要素や button 要素に list-group-item-action クラスを追加することで、ホバーやアクティブなどのアクションが可能になります。
a 要素の場合
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">項目1</a>
<a href="#" class="list-group-item list-group-item-action">項目2</a>
<a href="#" class="list-group-item list-group-item-action disabled">項目3</a>
</div>
button 要素の場合
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">項目1</button>
<button type="button" class="list-group-item list-group-item-action">項目2</button>
<button type="button" class="list-group-item list-group-item-action disabled">項目3</button>
</div>
リストの背景色を変更
list-group-item クラスが設定された要素に list-group-item-{ 色の種類 } クラスを追加することで、リストの背景色を設定することができます。
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action list-group-item-primary">primary</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">secondary</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-success">success</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-danger">danger</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-warning">warning</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-info">info</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-light">light</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-dark">dark</button>
</div>
バッジ付きリストグループ
リストにバッジをつけることで、未読数などを表示することができます。
list-group-item クラスが設定された要素に、d-flex クラス、justify-content-between クラス、align-items-center クラスを追加し、
その子要素に、badge クラス、badge-primary クラス、badge-pill クラスを設定した span 要素を追加することで実装できます。
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
項目1
<span class="badge badge-primary badge-pill">5</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
項目2
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
項目3
<span class="badge badge-primary badge-pill">4</span>
</li>
</ul>
枠無しリストグループ
list-group クラスが設定された要素に list-group-flush クラスを追加することで、リストグループの外枠を削除することができます。
<ul class="list-group list-group-flush">
<li class="list-group-item">項目1</li>
<li class="list-group-item">項目2</li>
<li class="list-group-item">項目3</li>
</ul>
ページネーション
ページネーションは、コンテンツが複数のページにわたるときにページ送りの機能をはたすコンポーネントです。
基本的な使い方
nav 要素内の ul 要素に pagination クラス、li 要素に page-item クラスを追加することで実装できます。
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
ページネーションにアイコン・記号を使用
ページネーションのリンク名に「前」「次」といったテキストの代わりにアイコンや記号を使う場合、aria 属性や sr-only クラスを用いてアクセシビリティに配慮する必要があります。
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="前">
<span aria-hidden="true">«</span>
<span class="sr-only">前</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="次">
<span aria-hidden="true">»</span>
<span class="sr-only">次</span>
</a>
</li>
</ul>
</nav>aria-label 属性を使ってその意味を伝え、
aria-hidden=”true” を追加して記号が読み上げられないようにし、
sr-only クラスを追加して、スクリーンリーダー用のテキストを追加しています。
リンクの現在位置や無効状態を示す
リンクを無効状態にするには、page-item クラスが設定された要素に disabled クラスを追加し、その子要素である page-link クラスが設定された a 要素に tabindex=”-1″ を追加します。
（tabindex=”-1″ とすることで、リンク機能を残したままフォーカスがあたらなくなります）
リンクが現在位置であることを示すには、page-item クラスが設定された要素に active クラスを追加し、
その子要素である page-link クラスが設定された a 要素の子要素に、sr-only クラスを設定した span 要素を配置し、スクリーンリーダーに現在位置であることを示すテキストを書いておきます。
<nav>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item active"><a class="page-link" href="#">1<span class="sr-only">（現在位置）</span></a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
ページネーションのサイズ変更
pagination クラスが設定された要素に pagination-{ サイズ } クラス（”サイズ”には lg または sm が入ります）を追加することで、ページネーションのサイズを変更することができます。
<h4>pagination-lg</h4>
<nav>
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
<h4>pagination-sm</h4>
<nav>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
ページネーションの配置
pagination クラスが設定された要素に justify-content-{ 整列 } クラス（”整列”には center や end などが入ります）を追加することで、ページネーションの位置を調節することができます。
<h4>justify-content-center</h4>
<nav>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
<h4>justify-content-end</h4>
<nav>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="#">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
今回は以上になります。
ご覧いただきありがとうございました(^^)
続きはこちら↓
コメント