Reading System
iBooks
iPad（iOS）およびMac OS Xで電子書籍を読む場合は、Appleの「iBooks」（iOS版／OS X Yosemite版）をお奨めします。OS X YosemiteではないMacは「Readium」（Google Chromeの拡張機能）を使ってください。
Readium
Windowsで読む場合は、Google Chromeの拡張機能として無償提供されている「Readium」をお奨めします。今回の電子書籍は図版がかなり多いため、Adobe Digital Editionsは動作が重たくなります。
Kindle Fire HD
Kindle Fire HDおよびHDXを使いたいという要望が大変多かったので、EPUB 3ファイルとKindle（Mobi）ファイルをセットにしました。USBでパソコンに接続して「Documents」フォルダにMobiファイルをコピーしてください。
Contents
イントロダクション
- あらゆる人に等しく情報を伝えるために
- インブラウザー編集と新しいワークフロー
- Dreamweaverの概要と最初に覚えること
- Photoshopによるカンプの作り方が変わった
- CSSフレームワークについて理解する
- Bootstrapのグリッドレイアウト
- Dreamweaverでグリッドシステムを使う方法
- ブレイクポイントの指定方法
- Dreamweaverライブビューの作業の流れ
BootstrapをDreamweaverで使うための準備
- Bootstrap用ワークスペースの作成
- Bootstrapのダウンロードとサイト定義
- HTMLの文書構造について理解する
- ページに見出しを追加する
- div要素を追加してスタイルを指定する
- ページのレイアウトを指定する
インブラウザ編集でウェブページを作成する
- 実習課題の確認と課題を始める準備
- ヘッダー領域の骨格を作成する
- ヘッダー領域に背景画像を指定する
- ヘッダー領域のテキストに新しいスタイルを設定する
- ウィンドウの幅にあわせて文字サイズを変更する設定
- リンクボタンを設定する
- 常に変化する流動的なデザインに対応する
Article
本書の「イントロダクション」の第2節「インブラウザー編集と新しいワークフロー」を掲載しています。
デバイスごとに最適化した専用サイトを作成していた時代
パソコンがないとインターネットに接続できなかった時代は、当然ですがウェブページもパソコンで閲覧することを前提に作成していました。パソコンのディスプレイは、4:3の比率（800×600ピクセルや1024×768ピクセルなど）でしたが、2006年頃からワイドスクリーンが増え、16:9や16:10などが主流になっています。つまり、横長のスクリーンを意識してページをデザインします。
ところが、2007年以降、スマートフォンがじわじわと普及し始め、スマートフォンで「見やすい、使いやすい」専用サイトを作成するようになります。携帯電話やスマートフォンなどの小さな画面では、パソコン用のページは縮小コピーのように表示され、部分的に拡大しながら閲覧しなければいけませんので、小さな画面に最適化した専用のページをデザインするようになったのです。
ただ、このやり方の問題点は、次々と登場する多種多様なスマートフォンやタブレットに対応できないこと。個別に最適化していくのは不可能だということです。特定のデバイスにあわせてデザインすると、異なるサイズ、異なる比率のデバイスで不具合が出てきます。専用システムを開発して、力技で多様なデバイスに最適化させていた例もありますが、大半は広く普及しているメジャーなデバイスを対象にしていました。
レスポンシブ・ウェブデザインという開発アプローチ
転機が訪れたのは、2010年。同年5月25日、ボストンのウェブデザイナーで開発者のイーサン・マルコッテ（Ethan Marcotte）氏が、ウェブマガジン「A List Apart」で「Responsive Web Design」という記事を公開しました。
Responsive Web Design（レスポンシブ・ウェブデザイン）は、1つのHTMLで、さまざまなデバイスに「適応」させる開発アプローチで、デバイスごとに「最適化」していた世界中のウェブデザイナーがこの考え方に注目しました。
ただ、それまでのウェブデザインとは違う、特異なワークフローだったので、すぐには広まりませんでした。現在でも、簡単な作業ではありませんが、当時は「作業の難易度」と「コスト高」が壁となり、仕事では実践できなかったデザイナーが多かったと思います。
レスポンシブ・ウェブデザインは、突然出てきたものではなく、2009年3月3日に「On Fluid Grids」、同年4月17日には「Fluid Images」という記事をマルコッテ氏が自身のブログ「Unstoppable Robot Ninja」で公開しています。
Fluid Gridsでは、（CSS3のMedia Queriesを使って）可変するウィンドウに対してフレキシブルに適応するグリッドレイアウトについて解説、Fluid Imagesでは画像やビデオなどのメディア要素を可変ウィンドウに適応させる方法について紹介しています。簡潔にいうと、Media Queriesを使用して、ウィンドウの幅やスクリーンの解像度など、デバイスの閲覧環境を検出して、あらかじめ指定しておいた複数のデザインを切り替えていく方法です。
前述したとおり、レスポンシブ・ウェブデザインの設計は、ウェブデザイナーであっても難易度の高い作業です。すでに、5年近く経った現在でも、手軽に作成できるものではありません。Adobe Edge Reflowなど、レスポンシブ・ウェブデザインのページを作成するための専用ツールが出ていますが「誰でも簡単に」とはいきません。
デザイニング・イン・ザ・ブラウザが現実的な方法になってきた
パソコンのスクリーンを前提にページをデザインしていた時代、パソコンや携帯電話、スマートフォンなどデバイスごとに最適化した専用ページを作成していた時代、そして、1つのHTMLで多種多様なデバイスに適応させるためにページを設計する時代へと移り変わってきました。
現在でも、パソコンのスクリーンのみ対象としたサイト、特定のデバイス向けの専用サイトなどは作られており、（レスポンシブ・ウェブデザインは選択肢の一つでしかなく）プロジェクトの内容によって選択すればよいのですが、全体的な流れとして、多種多様なデバイスに「適応」させるためのページ作りが主流になりつつあります。
1つのHTMLをさまざまな閲覧環境に適応させるということは、紙のデザインのように固定されたフォーマット上で考えても、なかなかイメージできません。机に向かいデスクトップパソコン（キーボード、マウスを使用）で閲覧する場合と、移動中にスマートフォンを片手で操作しながら小さな画面で閲覧する場合では、ユーザーの利用状況がまったく異なるからです。
初期段階のラフスケッチは重要ですが、デザインカンプを作り込む必要があるかどうかは意見が分かれています。静的なデザインから、動的なデザインに変換する手間を考えると、デザインカンプも実際の利用状況を考慮しながら進めたほうが効率的です。つまり、ウェブブラウザー上でデザインしていく方法です。
最近の欧米のウェブサイトは、画像要素が減っています。ウェブページに配置される画像は、情報として切捨てられない「意味画像」と見栄えのための「装飾画像」に大別できますが、主に装飾画像については、CSSやウェブフォントで表現され、ラスター画像（GIF、JPEG、PNGなど）はかなり抑えられています。
ウェブブラウザーに実装されているCSSによって装飾のデザインも表現しているわけですから、これをPNGやJPEGなどの画像で再現する必要はないわけです。
また、デザインカンプをラスター画像で作り込んでしまうと、可変ウィンドウで変化するページの全体像がつかめないため、デザイナーとフロントエンドエンジニアのやり取りが増えてしまい、どうしても時間がかかってしまうのです。
わかりやすい例としては、視差効果（パララックス）を採用したイマーシブ系の長文記事など。ページをスクロールさせないとウィンドウ内のビジュアルの変化を確認できないため、静的なデザインカンプでイメージするのはほぼ不可能です。
- 2012年4月にピュリツアー賞（特集記事部門）を獲得したニューヨーク・タイムズの長文記事（シングルロングページ）「Snow Fall」
視差効果などは極端な例ですが、インタラクションが発生しないページであっても、デスクトップ（大きなワイドスクリーン）、タブレットのポートレイトモード／ランドスケープモード（縦向きと横向きの中型のスクリーン）、スマートフォン（縦向きの小さなスクリーン）など、それぞれにデザインカンプを用意していくのは大変な作業になります。
ただし、ページ全体がビジュアル要素で占められているランディングページなどは、ほぼ画像で構成されているため、静的なカンプが有効です。
これからは全て「デザイニング・イン・ザ・ブラウザでやろう」ということではありませんので、注意してほしいと思います。
本書のメインテーマである「デザイニング・イン・ザ・ブラウザ（Designing in the browser）」という考え方は、レスポンシブ・ウェブデザインが実践されるようになった2011年頃から議論されており、過去さまざまなフレームワークやツールが登場し、試行錯誤が続いています。
※「インブラウザ編集」「インブラウザ・デザイン」と呼ぶ場合もあります。
Dreamweaver CC 2014以降の強化された「ライブビュー」は、コードビューとデザインビュー、そしてウェブブラウザーでプレビューしながら作業するときの、何度も行き来するストレスを大幅に軽減してくれます。
ライブビューには、Google Chromeと同じ描画エンジン（Chromium Embedded Framework）が採用されていますので、ブラウザーでページを表示した状態で、テキストや画像の編集、HTML文書構造の変更などが可能になっています。
紙媒体のデザイナー向けのウェブページ作成ツール「Adobe Muse」もインブラウザ編集を可能にしていますが、構成要素の編集に限定されており、どちらかといえば、クライアントとの最終チェックのやり取りなどで役立つものです。
Dreamweaverの場合は、デザイニング・イン・ザ・ブラウザを実践するための機能強化を図っており、既存の作業の一部を代替できるところまできています。
では、デザイニング・イン・ザ・ブラウザの実践で、Adobe Photoshopによるデザインカンプは使えないのかというと、そうではありません。Photoshopも大きな進化を遂げていて、静的カンプ／スライスといった過去の方法から、Generatorアプリケーションによるアセットの抽出や非破壊編集などの新しい方法に移行し始めています。Dreamweaverは、Creative Cloud Extractとの統合によって、新しいPhotoshopのPSDファイルから必要な情報を抽出できるようになっています。
前述したAdobe Edge Reflow CCについても、PhotoshopのGeneratorアプリケーションによって、PSDファイルの読み込みなど、連携機能が強化されています。Photoshopで作成したデザインカンプ（PSD）からHTMLを生成し、テキストや画像を抽出、レスポンシブ・ウェブデザインのページに変換してくれます。まだ荒削りなところがありますが、今後のアップデートに期待できそうです。
※Edge Reflowは、プレビュー版です。
本書の「イントロダクション」の第6節「Bootstrapのグリッドレイアウト」を掲載しています。
Bootstrapのグリッドレイアウト
現在主流のCSSフレームワークは、スマートフォンやタブレット、PCなど、さまざまなデバイスに適応したデザインを提供できる仕組みになっており、レスポンシブ・ウェブデザインを採用したページが標準の仕様です。
Bootstrapは、可変ウィンドウに対応したグリッドシステムになっていますので、ページのレイアウトデザイン作業では、このシステムを理解しておく必要があります。
Bootstrapのグリッドシステムは、水平方向に12カラム並んでおり、このグリッドに沿って要素を配置していきます。
1カラムの左右には、15ピクセルの余白が設定されますので、カラム間は、30ピクセルになっています。
例えば、均等幅の3段組みなら「4カラム＋4カラム＋4カラム」となり、全段（段組み無し）であれば「12カラム」と指定します。Bootstrapを使ったレイアウトの基本なので、まず最初に覚えておいてください。
次に重要なのは、固定幅（fixed-width）と伸縮幅（full-width）について理解すること。Bootstrapは、コンテナを可変ウィンドウにどう適応させるか2つの方法を用意しています。
※コンテナとは、12カラム分すべてを含む大きなカラムのことです。
1つは固定幅（fixed-width）です。これは文字どおり「幅を固定」した方法で、ウィンドウの幅にあわせて、複数の固定幅を切り替えていきます。具体的には、ウィンドウの幅が、768ピクセル以上992ピクセル未満なら「750ピクセル」、992ピクセル以上1200ピクセル未満なら「970ピクセル」のように、決められた範囲で、幅を固定します。
この切り替えのポイントを「ブレイクポイント」と呼びます。ウィンドウの幅を広げたり、狭めて、レイアウトが壊れてしまう箇所をブレイクポイントにして、デザインを切り替えるという考え方です。
Appleのサイトを見てみましょう。Bootstrapを使っているわけではありませんが、固定幅のレイアウトです。パソコン上では、2つのレイアウトを切り替えています（スマートフォンでは専用のレイアウトを表示します）。
もう1つの伸縮幅（full-width）は、ウィンドウの幅にあわせて、コンテナも伸縮します。この場合「可変コンテナ」と呼びます。固定幅とは異なり、常にレイアウトが変化します。
伸縮幅の例として、Microsoftのサイトを見てみます（こちらもBootstrapを使っているわけではありません）。ご覧のように、ウィンドウ幅にあわせて、レイアウトが常に伸縮しています。
固定幅（fixed-width）と伸縮幅（full-width）どちらを選ぶかは、ページの表現や特性、対象とするユーザーについて検討した上で決めることになります。Appleのサイトのように、大まかに「ワイドスクリーンのデスクトップ」「主要なタブレットのスクリーン」「スマートフォンなどの小さなスクリーン」の3つくらいに分けて考えてもよいでしょう。特定のデバイスを対象にしたデザインは避けなくてはいけませんが、可変ウィンドウの適応度は自由に決められます。
指定方法は以下のようになります。固定幅にする場合は、クラス名「container」、伸縮幅は「container-fluid」を追加します。
※グリッドシステムを使ってレイアウトするときは、必ずクラス名「row」を追加しておく必要があります。
固定幅の場合：
<div class="container">
<div class="row">
ここにコンテンツを置きます
</div>
</div>
伸縮幅の場合：
<div class="container-fluid">
<div class="row">
ここにコンテンツを置きます
</div>
</div>
では、この指定をDreamweaverのライブビューで実行する場合は、どのように操作するのか解説します。
この後の実習で詳しく学びますので、ここでは大まかに理解しておきましょう。
本書の「イントロダクション」の第7節「Dreamweaverでグリッドシステムを使う方法」を掲載しています。
グリッドシステムを使うときの指定方法
Dreamweaver（ライブビュー）のドキュメントウィンドウに、テキストを配置しておきます。テキストを選択した状態で、［挿入］パネルの［Div］をクリックします。
エレメントディスプレイに4つのアイコンが表示されますので、［折り返し］（選択したタグの周囲で折り返し）をクリックします。
これで、div要素が記述されましたので、クラス名「row」を追加します。エレメントディスプレイのタブに表示されている［＋］（クラス/IDを追加）をクリックします。入力欄が表示されますので「row」と入力。コードヒントメニューが表示されますので、「.row」を選びます。
続けて、［挿入］パネルの［Div］をクリックします。同様にエレメントディスプレイが表示されますので、［折り返し］をクリックします。
エレメントディスプレイのタブに表示されている［＋］（クラス/IDを追加）をクリックし、「container」と入力。コードヒントメニューが表示され、候補として「.container」と「.container-fluid」の2つが表示されますので「.container」を選択してください。
ドキュメントツールバーの［分割］をクリックして、下半分の領域にコードビューを表示させて、自動的に記述されたHTMLのコードを確認します。前述したとおりのコードになっていると思います。
いかがでしょう。このように、コードを直接書かずに、Bootstrapのクラス名を追加していくことができます。記述するコード量が少ない場合は、コーディングの方が速いのですが、レイアウトが複雑になってくると威力を発揮してきます。
