関連サイト
本書の関連ページが用意されています。
内容紹介
レスポンシブWebデザインで制作されたWebサイトは、「PC用」も「スマホ用」も同じHTML & CSSが配信されます。にもかかわらず、端末の種類に応じて異なるレイアウトでWebを表示することが可能です。
このような仕組みを実現しているのが、CSS3で新たに採用されたメディアクエリという機能です。メディアクエリは“条件付きのCSS”であり、画面サイズに応じて各要素の書式を変化させることが可能な記述方法です。このような話を聞くと、『なんか難しそうだな……』と思うかもしれません。しかし、実際に作業を始めてみると、それほど難しくないことを実感できると思います。HTMLとCSSの基本さえ知っていれば、Webのプロでない中級者の方でも十分に対応できる内容です。レスポンシブWebデザインを実現するにあたって、JavaScriptは必須要件ではありません。「知っていたほうが便利」という程度の存在で、レスポンシブWebデザインの中核をなすのは、あくまでHTMLとCSSです。PHPやPerlなども必要ありません。よって、Webの制作経験がある、幅広い方々が利用できる手法だと考えられます。
Webサイトのマルチデバイス対応は、いまや避けて通れない問題です。本書との出会いをきっかけに、スマートフォンやタブレットにも対応するWebサイトの制作方法を身に付けていただければ幸いです。
書誌情報
- 著者: 相澤 裕介
- 発行日: 2015-06-10 (紙書籍版発行日: 2015-06-10)
- 最終更新日: 2015-06-10
- バージョン: 1.0.0
- ページ数: 232ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: カットシステム
対象読者
著者について
相澤 裕介
目次
第1章 メディアクエリとviewportの設定
- 1.1 レスポンシブWebデザインの基礎知識
- 1.2 メディアクエリを使った書式指定
- 1.3 viewportの指定とモバイル端末のWeb表示
- 1.4 モバイル端末の画面解像度とブレイクポイント
- 1.5 ブラウザの画面サイズを手軽に変更するツール
- 1.6 モバイルファーストに従ったCSSの記述
- 1.7 Internet Explorer 8対策に利用できるJavaScript
第2章 レスポンシブWebデザインの実例
- 2.1 サンプルとして紹介するWebページの概要
- 2.2 ページレイアウトを変化させるCSSの指定
- 2.3 ヘッダーを構成する要素の書式指定
- 2.4 ナビゲーションメニューの書式指定
- 2.5 サイドバーを構成する要素の書式指定
- 2.6 フッターを構成する要素の書式指定
- 2.7 メイン領域を構成する要素の書式指定
- 2.8 グリッドシステムを使ったコンテンツの配置
- 2.9 CSSを使ったグリッドシステムの自作
第3章 レスポンシブWebデザインのテクニック
- 3.1 用意しておくと便利に活用できるクラス
- 3.2 文字サイズの指定とリンクの表示方法
- 3.3 画像ファイルの振り分け（レスポンシブイメージ）
- 3.4 高解像度液晶への対応と画像ファイルのサイズ
- 3.5 開閉式のナビゲーションメニュー
- 3.6 モバイル端末でPC用のレイアウトを表示
- 3.7 既存のWebサイトをレスポンシブ化するには？