Chapter 11 モバイル対応サイトの構築
Expression Web 4を使ってみよう
最終更新日時:
2023/02/05 19:18:40
スマートフォンやタブレット等にも対応したサイトの構築方法について説明していきます。
テンプレート用意しました
レスポンシブWebデザインに対応したWebサイトを手っ取り早く作りたい方のために、テンプレートを用意いたしました。『レスポンシブWebデザイン対応テンプレート使用上の注意事項』をお読みの上ご活用ください。
サンプルWebページはこちら
初心者向けガイドは、姉妹サイト Expression Web 4 Beginner's Guide をご利用ください。
Contents
Section 1 モバイル対応にするために
- スマートフォン用サイトを別作成するには
- スマートフォン用サイト別作成とレスポンシブWebデザインのメリットとデメリット
- HTML 4.01とXHTML 1.0とHTML 5、どれを選択すべき?
- レスポンシブWebデザインの作成の流れ
- レスポンシブWebデザイン対応テンプレート使用上の注意事項
- タップしやすいリンクメニューリストを作成するには
- タップしやすいナビゲーションボタンをCSSで実装するには
Section 2 HTML5への移行
- XHTML 1.0 TransitionalからHTML 5に変換するには
- 新規ドキュメント作成時のドキュメントの型宣言をHTML 5にするには
- 画像を囲んでいるdivタグからfigureへ変更するには
- figureタグ内のキャプション要素のdivをfigcaptionに変更するには
Section 3 HTML 4.01 Transitionalへの変換
- XHTML 1.0 TransitionalからHTML 4.01 Transitionalに変換するには
- 新規ドキュメント作成時のドキュメントの型宣言をHTML 4.01 Transitionalにするには
Section 4 トップページと基本スタイルの作成
- スマートフォンで縮小表示されないようにするには
- それぞれのセクション用のDIVを挿入するには
- CSSファイルを新規作成して作業中のサイトに保存するには
- CSSファイルをWebページにリンクするには
- セクション用のDIVのスタイルを作成するには
- セクション用のDIVのスタイルを適用するには
- ページ全体の背景と余白を指定するには
- それぞれのセクションスタイルを変更するには
- 見出しのスタイルを変更するには
- リンク文字列のスタイルを変更するには
Section 5 レスポンシブWebデザインの適用
- レスポンシブWebデザインのレイアウトパターンを決定しよう
- 画像サイズ幅を最大100%にして縦横比固定するには
- XGAサイズのレイアウトを決定するには
- WXGA以上のサイズのレイアウトを決定するには
- レスポンシブWebデザインに対応していないブラウザーに対応させるには
INDEX
問題は解決しましたか?
操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!