Bootstrap5でアイコンだけ表示・テキストだけ表示を切り替えるUIパターン完全ガイド【レスポンシブ対応】

アイコンだけ表示・テキストだけ表示を切り替えるUIパターン

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでボタンを作るときに、スマホではアイコンだけ、パソコンではテキストも表示したいです。」

先生

「それはレスポンシブユーティリティを使えば簡単にできますよ。」

生徒

「レスポンシブって何ですか？」

先生

「画面の大きさに合わせて表示を切り替える仕組みのことです。Bootstrap5には便利な表示制御クラスがあります。」

1. Bootstrapの表示ユーティリティとは

Bootstrap5には表示や非表示を切り替えるためのクラスが用意されています。これを表示ユーティリティと呼びます。ユーティリティとは便利な小さな機能という意味です。難しく考える必要はありません。決められたクラス名を付けるだけで、表示や非表示を切り替えることができます。

たとえばd-noneは表示しないという意味です。d-blockは表示するという意味です。これらを組み合わせることで、画面サイズごとにアイコンだけ表示したり、テキストだけ表示したりできます。Bootstrap表示制御はレスポンシブデザインの基本になります。

2. アイコンだけ表示する基本パターン

まずは一番シンプルな例です。ボタンの中にBootstrapアイコンを入れるだけで、アイコンボタンを作ることができます。アイコンとは小さな絵のことです。家の絵や検索の虫眼鏡などが代表例です。


<button class="btn btn-primary">
    <i class="bi bi-house"></i>
</button>

ブラウザ表示

このコードではbi bi-houseというクラスを使っています。これはBootstrap Iconsの家マークです。スマホアプリの下に並んでいるようなシンプルなアイコンボタンを作るときによく使われます。

3. テキストだけ表示する基本パターン

次にテキストだけのボタンです。テキストとは文字のことです。検索やお問い合わせなどの言葉を表示します。


<button class="btn btn-success">
    お問い合わせ
</button>

ブラウザ表示

このように文字だけでも分かりやすいボタンを作ることができます。パソコン画面ではテキストがあった方が意味が伝わりやすい場合があります。

4. スマホではアイコンだけ表示する方法

ここからが本題です。Bootstrap5レスポンシブユーティリティを使うと、画面サイズによって表示を切り替えられます。たとえばd-none d-md-inlineというクラスがあります。これは中くらい以上の画面で表示するという意味です。


<button class="btn btn-primary">
    <i class="bi bi-search"></i>
    <span class="d-none d-md-inline">検索</span>
</button>

ブラウザ表示

このコードではspanタグにd-none d-md-inlineを付けています。スマホサイズではテキストが非表示になります。パソコンサイズになると検索という文字が表示されます。これがBootstrapレスポンシブ表示切り替えの基本パターンです。

5. パソコンではテキストだけ表示する方法

逆にスマホではテキストを表示し、パソコンでは別の表示にしたい場合もあります。その場合はブレークポイントを変えて制御します。ブレークポイントとは画面サイズの区切りのことです。


<button class="btn btn-warning">
    <span class="d-inline d-lg-none">メニュー</span>
    <i class="bi bi-list d-none d-lg-inline"></i>
</button>

ブラウザ表示

この例では大きな画面ではアイコンだけ表示されます。画面幅に応じてUIパターンを切り替えることで、使いやすいナビゲーションを作ることができます。

6. ナビゲーションバーでの実践例

実際のWebサイト制作ではナビゲーションバーでよく使われます。ナビゲーションとは案内メニューのことです。スマホではスペースが狭いため、アイコンだけにすることで見やすくなります。


<nav class="navbar navbar-light bg-light p-3">
    <a class="navbar-brand" href="#">
        <i class="bi bi-shop"></i>
        <span class="d-none d-md-inline">オンラインショップ</span>
    </a>
</nav>

ブラウザ表示

このようにBootstrapナビゲーションバーと組み合わせることで、スマホ対応デザインが簡単に実装できます。Webデザイン初心者でもクラスを付けるだけで実現できます。

7. アクセシビリティも意識しよう

アイコンだけ表示する場合は意味が伝わらないことがあります。アクセシビリティとは誰でも使いやすい設計のことです。画面読み上げソフトを使う人のためにaria-labelを追加することが大切です。


<button class="btn btn-danger" aria-label="削除">
    <i class="bi bi-trash"></i>
</button>

ブラウザ表示

aria-labelは目に見えませんが、読み上げソフトが内容を伝えてくれます。Bootstrapアイコンボタンを作るときは必ず意識しましょう。

8. Bootstrap表示切り替えUIパターンの活用ポイント

Bootstrap5表示ユーティリティを使えば、スマホ対応、レスポンシブデザイン、アイコンボタン切り替えが簡単にできます。重要なのはd-noneやd-md-inlineなどのクラスの意味を理解することです。難しいプログラミングは不要です。クラスを組み合わせるだけで完成します。

アイコンだけ表示テキストだけ表示を切り替えるUIパターンは、Web制作、ホームページ作成、Bootstrap入門学習で必ず役立ちます。初心者でも実践できるので、まずは小さなボタンから試してみると理解が深まります。

まとめ

今回はBootstrap5でアイコンだけ表示テキストだけ表示を切り替えるUIパターンについて学びました。Bootstrap表示ユーティリティを活用することでレスポンシブデザインに対応したボタンやナビゲーションを簡単に実装できることが理解できたと思います。d-noneやd-md-inlineやd-lg-noneといったクラスを正しく組み合わせることでスマホではアイコンだけ表示しパソコンではテキストも表示するなど画面幅に応じた柔軟な表示制御が可能になります。これはBootstrapレスポンシブ対応の基本でありWeb制作やホームページ作成において非常に重要なテクニックです。

Bootstrap5は初心者でも扱いやすいCSSフレームワークとして広く利用されています。特に表示ユーティリティはプログラミング未経験者でも直感的に使うことができクラス名を覚えるだけで高度なレスポンシブUIパターンを実現できます。アイコンボタンやテキストボタンを状況に応じて切り替えることでユーザー体験を向上させることができます。スマホ対応デザインでは画面の横幅が限られているため情報をコンパクトにまとめる必要があります。その際アイコンだけ表示することで視認性を高め操作しやすいインターフェースを作ることができます。

一方パソコン画面ではテキストを表示することで意味が明確になりアクセシビリティの向上にもつながります。aria属性を適切に設定することで画面読み上げにも対応でき誰にとっても使いやすいWebサイト設計が可能になります。Bootstrapアイコンと表示制御クラスを組み合わせるだけで実装できるため難しいJavaScriptは不要です。HTMLとクラス指定だけで完結する点がBootstrapの大きな魅力です。

レスポンシブデザインは現代のWeb開発において必須スキルです。Bootstrap5レスポンシブユーティリティを理解することはフロントエンド開発の基礎力向上につながります。特にナビゲーションバーやボタンUIはどのWebサイトにも存在する重要な要素です。表示切り替えパターンを習得すれば実務レベルのデザインにも応用できます。アイコンだけ表示テキストだけ表示を自在に切り替えることができればスマホ最適化とパソコン最適化の両立が可能になります。

さらに応用としてボタンサイズや余白クラスやテキスト装飾クラスを組み合わせることでより洗練されたデザインを作ることができます。Bootstrapボタンやナビゲーションバーと組み合わせることで統一感のあるUIを構築できます。まずは基本のd-noneとd-md-inlineの意味を理解し実際にコードを書いて確認することが理解への近道です。繰り返し練習することでBootstrap表示切り替えの仕組みが自然と身につきます。


<button class="btn btn-primary">
    <i class="bi bi-search"></i>
    <span class="d-none d-md-inline">検索</span>
</button>

<button class="btn btn-danger" aria-label="削除">
    <i class="bi bi-trash"></i>
</button>

ブラウザ表示

先生と生徒の振り返り会話

生徒

Bootstrap表示ユーティリティを使えばスマホではアイコンだけ表示してパソコンではテキストも表示できることが分かりました。d-noneやd-md-inlineの意味を理解することが大切ですね。

先生

その通りです。Bootstrap5レスポンシブ対応では画面サイズごとのクラス指定が重要です。クラスを正しく組み合わせるだけで高度なUIパターンが実装できます。

生徒

難しいJavaScriptを書かなくてもHTMLだけで切り替えられるのが便利だと思いました。ナビゲーションバーにも応用できそうです。

先生

はい。Web制作やホームページ作成ではこのテクニックが頻繁に使われます。アクセシビリティも意識しながら実装することでより使いやすいサイトになります。

生徒

Bootstrapアイコンと表示制御クラスを組み合わせることでスマホ最適化とパソコン最適化を両立できることが理解できました。これから実際にコードを書いて練習します。