- メディアクエリの使用: メディアクエリは、特定の画面サイズやデバイスにスタイルを適用するためのCSSの機能です。例えば、スマートフォン用のスタイルシートを適用するために、以下のようなメディアクエリを使用することができます。
@media screen and (max-width: 480px) { / スマートフォン用のスタイル / }
- フレキシブルイメージの使用: 画像は、画面サイズに応じて自動的に調整されるように設計する必要があります。これにより、画像が大きすぎて画面からはみ出したり、小さすぎて見えなくなったりするのを防ぐことができます。以下は、フレキシブルイメージの例です。
img { max-width: 100%; height: auto; }
- レスポンシブメニューの作成: レスポンシブメニューは、モバイルデバイスでのナビゲーションを改善するために使用されます。通常、ハンバーガーアイコンをクリックすると、メニューが表示されます。以下は、シンプルなレスポンシブメニューの例です。
HTML:
CSS: .menu-icon { display: block; cursor: pointer; }
.responsive-menu { display: none; }
@media screen and (max-width: 768px) { .responsive-menu { display: block; } }
これらはレスポンシブウェブデザインの一部の例ですが、実際にはさまざまな方法があります。他にも、レスポンシブレイアウトの構築やモバイルフレンドリーデザインの重要性についても触れていきます。レスポンシブウェブデザインを実装する際のベストプラクティスやパフォーマンスの最適化についても言及します。