チュートリアル記事

上級

30 分

レスポンシブ対応グリッドレイアウトの作成方法

Webページのコンテンツを各種デバイスに対応させられるレスポンシブなグリッドレイアウトを作成します。

1

ヘッダー画像とテキストのスタイルを定義する

HTMLとCSSを使ってコンテンツを行と列のグリッドにレイアウトし、印象的なヘッダー画像とキャッチーなテキストをファーストビューに配置します。

2

テキストと画像コンテンツのスタイルを定義する

どのWebページにも、メッセージを伝えるためのテキストと画像が必要です。グリッドの構造ができたら、今度はWebページのテキスト、画像、カラー、フッターなど、残りのコンテンツを追加して配置します。

3

レスポンシブデザインを完成させる

Webデザインの表示がモバイルデバイスで完成したら、今度はCSSメディアクエリーを使用して、タブレットやデスクトップの画面で表示したときにレイアウトが自動的に調整されるようにします。これが終了すれば、DreamweaverでのレスポンシブWebページの作成は見事完成です。



コントリビューター

Daniel Walter Scott

2022年5月23日

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

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