こんにちは。
ウェブ開発をしていると、様々なデバイス(スマホ、タブレット)に対応するレスポンシブデザインが重要ですよね。
私も最近、既存のプロジェクトでBootstrap 5.0.2を使ってレスポンシブ対応を行ったので、
HTML5とCSS3、そしてBootstrap 5.0.2を使ったレスポンシブデザインの方法を紹介します。
概要
レスポンシブデザインは、画面サイズやデバイスに応じて見た目が変わるように設計する手法です。
これから紹介する方法は、私が実際に使っているものです。
レスポンシブデザインの基本
１．フレキシブルグリッド：
Bootstrapのグリッドシステムを使ってレイアウトを柔軟にします。
Bootstrapのクラスを利用することで、簡単にレスポンシブなレイアウトを作ることができます。
例えば、以下のように使います：
入会申込
ログイン
<div class="container">
<div class="row">
<div class="col-md-6">左側のコンテンツ</div>
<div class="col-md-6">右側のコンテンツ</div>
</div>
</div>
２．メディアクエリ：
画面サイズに応じて異なるスタイルを適用するために、Bootstrapのブレークポイントを活用します。
独自のスタイルを追加する場合は、以下のような感じです：
@media (max-width: 768px) {
.custom-class {
font-size: 14px;
}
}
３．フレキシブルイメージ：
Bootstrapのクラスを使って、画像をレスポンシブに設定します。
例えば、`img-fluid`クラスを使うと、画像が親コンテナの幅に合わせてスケーリングされます。
４．レスポンシブユニット：
Bootstrapのユーティリティクラスを活用して、要素のサイズを相対的に設定します。
これにより、画面サイズに応じて要素が柔軟に調整されます。
実際の活用例
これらの方法を組み合わせることで、どんなデバイスでも一貫したユーザー体験を提供できます。
私の場合、PCのブラウザのみ対応のアプリを今回の対応でスマホとタブレットでも表示できるように実装しました。
今回は表示のみの説明になりましたが、画面上の操作によってはマウスとタッチ操作でイベントの検知を分ける必要がある場合があります。
各イベントに関してはまた記事を作成したいと思います。
