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

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

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

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

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

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

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


06/15/2017
Daniel Walter Scott
このページは役に立ちましたか。