チュートリアル記事

初級

30 分

【レスポンシブ対応】HTML&CSSでナビゲーションメニューを作成する方法

モバイル、タブレット、デスクトップ — どんなデバイスでもサイトのナビゲーションが簡単にできるように、メニューのスタイル設定をおこないます。

1

メニューの構造を作成する

なぜWebデザインにモバイルファーストのアプローチが有効なのかをご覧ください。ファイルとアセットを管理するサイトを定義してから、ロゴつきナビゲーションの基本構造を、ヘッダーセクションにHTMLで作成します。

2

モバイル用にメニューのスタイルを設定する

紫色のテキストで箇条書きになっているメインメニューを、モバイル画面用にCSSでスタイル設定し、レイアウトを調整します。

3

タブレットとデスクトップ用にメニューのスタイルを設定する

モバイル、タブレット、デスクトップの画面によってメニューのレイアウトは異なります。CSSメディアクエリーを使って、それぞれのデバイス用にレイアウトを変更する方法を紹介します。さらに、実際のデバイスでリアルタイムにプレビューしながらデザインする方法もご覧ください。


2022年11月8日

Dreamweaver でこれらのチュートリアルをお試しください

モダンでレスポンシブな web ページをデザイン