HTML5とBootstrapを使ったレスポンシブなデザインのサンプル集

概要

HTML5とBootstrapを組み合わせることで、レスポンシブなデザインを実現することができます。本記事では、Bootstrapを使ったデザインのサンプル集を紹介します。これらのサンプルは、モバイルデバイスからデスクトップまで、さまざまな画面サイズに対応しています。

コンテンツ

1. グリッドレイアウト

Bootstrapのグリッドシステムを使うことで、簡単にレスポンシブなグリッドレイアウトを作成することができます。例えば、下記のようなコードを使うことで、3つのカラムを作成することができます。


&lt;div class=&quot;container&quot;&gt;

  &lt;div class=&quot;row&quot;&gt;

    &lt;div class=&quot;col-sm-4&quot;&gt;カラム1&lt;/div&gt;

    &lt;div class=&quot;col-sm-4&quot;&gt;カラム2&lt;/div&gt;

    &lt;div class=&quot;col-sm-4&quot;&gt;カラム3&lt;/div&gt;

  &lt;/div&gt;

&lt;/div&gt;

このようにして作成されたグリッドレイアウトは、画面サイズに応じて自動的にレイアウトが変化します。

2. ナビゲーションバー

Bootstrapのナビゲーションバーは、レスポンシブなデザインに適したコンポーネントです。下記のようなコードを使うことで、簡単にナビゲーションバーを作成することができます。


&lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;

  &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;ロゴ&lt;/a&gt;

  &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;

    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;

  &lt;/button&gt;

  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;

    &lt;ul class=&quot;navbar-nav&quot;&gt;

      &lt;li class=&quot;nav-item active&quot;&gt;

        &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;ホーム&lt;/a&gt;

      &lt;/li&gt;

      &lt;li class=&quot;nav-item&quot;&gt;

        &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;機能1&lt;/a&gt;

      &lt;/li&gt;

      &lt;li class=&quot;nav-item&quot;&gt;

        &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;機能2&lt;/a&gt;

      &lt;/li&gt;

      &lt;li class=&quot;nav-item&quot;&gt;

        &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;機能3&lt;/a&gt;

      &lt;/li&gt;

    &lt;/ul&gt;

  &lt;/div&gt;

&lt;/nav&gt;

このコードを使うことで、ハンバーガーメニューに自動的に変化するナビゲーションバーが作成されます。

3. ボタン

Bootstrapのボタンは、レスポンシブなデザインに適したコンポーネントです。下記のようなコードを使うことで、ボタンを作成することができます。


&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;プライマリーボタン&lt;/button&gt;

&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;セカンダリーボタン&lt;/button&gt;

このようにして作成されたボタンは、画面サイズに応じて自動的にサイズやスタイルが調整されます。

4. フォーム

Bootstrapのフォームは、レスポンシブなデザインに適したコンポーネントです。下記のようなコードを使うことで、フォームを作成することができます。


&lt;form&gt;

  &lt;div class=&quot;form-group&quot;&gt;

    &lt;label for=&quot;exampleInputEmail1&quot;&gt;メールアドレス&lt;/label&gt;

    &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;exampleInputEmail1&quot; aria-describedby=&quot;emailHelp&quot; placeholder=&quot;Enter email&quot;&gt;

    &lt;small id=&quot;emailHelp&quot; class=&quot;form-text text-muted&quot;&gt;メールアドレスを入力してください。&lt;/small&gt;

  &lt;/div&gt;

  &lt;div class=&quot;form-group&quot;&gt;

    &lt;label for=&quot;exampleInputPassword1&quot;&gt;パスワード&lt;/label&gt;

    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;exampleInputPassword1&quot; placeholder=&quot;Password&quot;&gt;

  &lt;/div&gt;

  &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;送信&lt;/button&gt;

&lt;/form&gt;

このようにして作成されたフォームは、画面サイズに応じて自動的にスタイルが調整されます。