デザイナーのためのデザイニング・イン・ザ・ブラウザ

CSSフレームワークとDreamweaver Extract/Photoshop「アセット抽出」による最新ワークフローの習得

さまざまなデバイスで「見やすい、読みやすい」ウェブページをインブラウザ編集で作成しよう

Course Content Outline

Creative Edge School Booksの2015年最初の学習コンテンツは、Adobe Dreamweaver(ドリームウィーバー)とPhotoshop(フォトショップ)を連携活用した新しい作業方法を学ぶためのテキストブックです。Dreamwever編(基礎編・実践編)とPhotoshop編の3冊に分かれています。

達成目標は、スマートフォンやタブレット、PCなどの多種多様なデバイスで「見やすく」「読みやすい」ウェブページを作成できること。

Dreamwever編は、CSSフレームワークのBootstrapをベースにして、「デザイニング・イン・ザ・ブラウザ」と呼ばれる可変ウィンドウを意識しながらデザインしていく手法をDreamweaverのライブビューを使って、学んでいきます。

Photoshop編では、非破壊編集を習得した上で、可変ウィンドウを意識したレイアウトデザインを学びます。アセット抽出とDreamweaver Extractによる最新の作業方法で、ビジュアルデザインを活かしたシングルロングページを作成します。

Creative Edge School Books - Web+Creative Brand

Information

デザイナーのためのデザイニング・イン・ザ・ブラウザ Photoshop 実践編

Vol.03 Photoshop 実践編 ~非破壊編集を学ぶ

Adobe Photoshop(フォトショップ)のアセット抽出や非破壊編集など、デザイナーがウェブページのカンプを作成するときに、意識しなければいけないFluid Designを完全習得するためのカリキュラムになっています。「Dreamweaver 基礎編~フレームワークを学ぶ」の続編です。

最初に「明瞭性を重視したデザイン」を学びます

Dreamweaver 基礎編では、Bootstrapをベースにしてインブラウザ編集の基礎を学びました。Photoshop 実践編では、Bootstrapも採用している「過剰な装飾要素を排除し、明瞭性を重視したデザイン」について学習します。
Appleの「フラットデザイン:Flat Design」、Googleの「マテリアルデザイン:Material Design」、Microsoftの「モダンデザイン:Modern Design」などを例にして、Photoshopを使ったデザインワークに応用していきます。

最初はフラットデザインの学習

あらゆる作業に役立つ非破壊編集について徹底的に学びます

Photoshopには、スマートオブジェクトやリンク配置、レイヤーカンプなどの画質劣化を気にせず、さまざまなバリエーションを効率よく作成するための強力な機能があります。複数のバリエーションに配置されている共通の要素(ロゴなど)を一回の操作で、自動的に修正できるなど、ウェブページのカンプ作成に限らず、役立つ機能です。この非破壊編集を完全習得します。

非破壊編集を完全習得

ウェブページ化しやすいPSDファイルの作り方を習得します

Photoshopには、選択したレイヤーおよびレイヤーグループをウェブページ用の画像ファイルとして、簡単に抽出できる「アセット抽出」の機能が搭載されています。本書では、(HTMLの構造に沿った)レイヤー構成の考え方やレイヤー名の付け方などを学び、ウェブページに展開しやすいPSDファイルの作成方法を習得します。

レイヤー構成の考え方やレイヤー名の付け方を学習する

Dreamweaver Extractについても学びます

Dreamweaver Extract(エクストラクト)によって、PSDファイルから画像やテキスト、CSSなどを抽出して、簡単に渡せるようになりました。Photoshopでカンプを作成しているデザイナーの方々は、Dreamweaverを使うことがないと思いますが、この機能を使うことで、ウェブページのプロトタイプまで作業することが可能です。また、このプロセスを習得することで、ウェブページ化しやすいPSDファイルの作り方をより理解しやすくなります。

DreamweaverでPSDファイルから必要な情報を抽出する方法も学ぶ

Photoshopでも「常に変化する流動的なデザイン」を意識します

Dreamweaver 基礎編で学習した、さまざまな閲覧環境に適応する柔軟なデザインの考え方をPhotoshopで展開していきます。実習課題では、Bootstrapをベースにして、レスポンシブ・ウェブデザインのシングルロングページを作成していますが、カンプのデザインでPhotoshopを活用します。ここで、アセット抽出と非破壊編集(外部PSDファイルの作り方、リンク配置)の基礎を習得します。

本書の主な対象者

本書は、主にビジュアルデザインの仕事でウェブデザインに携わるデザイナーを対象としていますが、Photoshopを勉強中の方々すべてに役立つ内容になっています。非破壊編集やアセット抽出などに絞って解説していますので、短時間で習得することが可能です。
今回は、Photoshopを学ぶ学生さんでも理解できるように、初心者向けの内容になっています。

カリキュラムは「フォトショップ・チャレンジ」に掲載しています。

販売情報

「購入ボタン」はリリース日に表示されます。キャンペーン期間に1冊目の「Dreamweaver基礎編」を購入された方には無料で提供いたします。

  • リリース日:2015年3月16~20日(※最新情報は随時更新します)
  • 価格:1,000円(税込)
  • 電子書籍のフォーマット:EPUB 3(DRMフリー)とKindle(Mobi)
  • 付属データ:学習のための課題ファイル等

無料提供キャンペーンについて

「Dreamweaver 基礎編」を購入された方、これから購入される方には、キャンペーン期間、無料で提供します。
PayPalの特別価格で購入された方は、ダウンロードしたページ(購入者向けページ)に掲載されます(ダウンロードページのURLを失念された方はメールでお知らせください)。通常価格で購入された方は、メールでお知らせください。詳細については「Photoshop実践編」リリース時に情報を掲載します。
キャンペーン期間は、2月23日から、「Photoshop実践編」リリース後、3日間を予定しています。

3冊目の「Dreamweaver実践編」については、準備でき次第、こちらのページに情報を掲載します(ニュースレターでお知らせしますので、ご利用ください)。



デザイナーのためのデザイニング・イン・ザ・ブラウザ Dreamweaver 基礎編

Vol.01 Dreamweaver 基礎編 ~フレームワークを学ぶ

Adobe Dreamweaver(ドリームウィーバー)は、ウェブデザインのための制作ツールです。コードビュー、デザインビュー、ライブビューの3つの編集モードがあり、コーディングから直感的なビジュアル編集まで、作業内容にあわせて編集モードを使い分けることができます。

ライブビューで作業します

本書では、可変ウィンドウを意識しながらデザインしていく「デザイニング・イン・ザ・ブラウザ」を実践するため、ライブビューを使います。ライブビューは、Google Chromeと同じレンダリングエンジンでページを表示しますので、(プレビューというプロセスが無くなり)ウェブブラウザー上でデザインをするように作業を進めることが可能です。

ライブビューで作業を進める

最初にウェブの理念を学びます

DreamweaverとCSSフレームワークの学習を始める前に、ウェブの理念について理解していただきます。アクセシビリティを意識し、特定の環境に依存せず、パソコンだけではなく、スマートフォンやタブレット、ゲーム機、テレビ、キオスクなど、ブラウザーを搭載しているさまざまな機器で情報提供を可能にしようという考え方です。これは、ウェブページを作成するときの基本であり、特別な対応ではありません。
参考:「やさしいウェブ

Bootstrapをベースにします

Dreamweaver基礎編では、静的かつ固定サイズのページデザインではなく、大きさも比率も異なるさまざまなスクリーンを意識しながらデザインできるように学習していきます。HTMLやCSSを一から記述するのではなく、CSSフレームワークを活用することで、インブラウザー編集に集中します。

CSSフレームワークのルールに沿ってデザインする

CSSフレームワークは、カスタマイズ可能な定義済みスタイルの集合体で、クラス名を追加しながら基本デザインを作成していきます。ここでは、世界中の多くのサイトが採用しているBootstrap(ブートストラップ)を使います。

Bootstrapの公式サイト

本書の主な対象者

本書は、主にビジュアルデザインの仕事でウェブデザインに携わるデザイナーを対象としていますが、Dreamweaverを勉強中のウェブデザイナーの方々にも役立つ内容になっています。コーディングせずに作業を進めますので、HTMLやCSSについては概念的なことしか触れていませんが、CSSフレームワーク(Bootstrap)の使い方は詳細に解説しています。

基礎編から実践編へ続きます

尚、2冊目の「Photoshop実践編」と3冊目の「Dreamweaver実践編」は、基礎編で学習した知識・スキルを実践課題をやりながら確認していく流れになっています(※当初、2冊目は「Dreamweaver実践編」でしたが変更になりました)。 本書で解説している新しいワークフローは、2014年10月にアップデートしたバージョンで初めて可能になったことです。DreamweaverとPhotoshopは、最新バージョンが対象となります。

「Dreamweaver基礎編」「Dreamweaver実践編」「Photoshop実践編」の3冊で学習が完了する

販売情報

クリエイティブエッジ・ストアとPayPal(直販)でリリースしました。PayPal(直販)は特別価格の800円で販売中。ストアの方は通常価格になりますが、クレジットカード、銀行振込、コンビニ決済など選択できます。

  • リリース日:2015年2月23日
  • 価格:1,000円(税込)
  • 電子書籍のフォーマット:EPUB 3(DRMフリー)とKindle(Mobi)
  • 電子書籍の方式:リフロー方式(ページを画像にした固定レイアウト方式ではありません)
  • ページ数の目安:355ページ(iPad/iBooksの標準文字サイズ)
  • 付属データ:学習のための課題ファイル等

通常価格:1,000円(税込)
購入方法は、PayPal、クレジットカード、銀行振込、コンビニ決済、楽天ID決済、電子マネー(Suica・楽天Edy)から選択できます。
決済完了後、ダウンロードURLをお知らせするメールが送信されます。

特別価格:800円(税込)
購入方法は、PayPal のみですが、特別価格800円です。ぜひご利用ください。
当サイトで購入者の個人情報を取得しませんので、こちらからメールは送信されません。ダウンロードURLのリンクは、PayPalの決済完了ページに表示されます。

3冊目の「Dreamweaver実践編」については、準備でき次第、こちらのページに情報を掲載します(ニュースレターでお知らせしますので、ご利用ください)。


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ファイルをコピーしてください。

Kindle Apps

Androidの場合は「Kindle for Android」を利用してください。Windowsには「Kindle for PC」、Mac OSには「Kindle for Mac」がありますが、パソコンの場合は、EPUB 3ファイルを「Readium」で読む方法をお奨めします。

Contents

イントロダクション

  1. あらゆる人に等しく情報を伝えるために
  2. インブラウザー編集と新しいワークフロー
  3. Dreamweaverの概要と最初に覚えること
  4. Photoshopによるカンプの作り方が変わった
  5. CSSフレームワークについて理解する
  6. Bootstrapのグリッドレイアウト
  7. Dreamweaverでグリッドシステムを使う方法
  8. ブレイクポイントの指定方法
  9. Dreamweaverライブビューの作業の流れ

BootstrapをDreamweaverで使うための準備

  1. Bootstrap用ワークスペースの作成
  2. Bootstrapのダウンロードとサイト定義
  3. HTMLの文書構造について理解する
  4. ページに見出しを追加する
  5. div要素を追加してスタイルを指定する
  6. ページのレイアウトを指定する

インブラウザ編集でウェブページを作成する

  1. 実習課題の確認と課題を始める準備
  2. ヘッダー領域の骨格を作成する
  3. ヘッダー領域に背景画像を指定する
  4. ヘッダー領域のテキストに新しいスタイルを設定する
  5. ウィンドウの幅にあわせて文字サイズを変更する設定
  6. リンクボタンを設定する
  7. 常に変化する流動的なデザインに対応する

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のクラス名を追加していくことができます。記述するコード量が少ない場合は、コーディングの方が速いのですが、レイアウトが複雑になってくると威力を発揮してきます。

リリース準備中

Dreamweaver基礎編の続きは「Photoshop実践編~非破壊編集/アセット抽出」

Creative Edge School Books

クリエイティブエッジ・スクール・ブックスについて

Creative Edge School Books(クリエイティブエッジ・スクール・ブックス)は、オンライン学習と電子書籍、ワークショップを連動した、新しいデジタルパブリッシングを推進している一人出版社です。コンテンツの企画、制作からストアの運用まで、一人で作業しており、リリースしたコンテンツは6ヵ月で販売終了、2ヵ月の準備期間を経て、無料公開していく「オープンエデュケーション」の場づくりを実践しています。

昨年(2014年)は「6時間で学ぶ Adobe Muse CC 完全習得[基礎編]」や「4時間で学ぶ Adobe Edge Animate CC[基礎編]」、「3時間で学ぶ Adobe Muse CC[実践編]ランディングページ制作」、「3時間で学ぶ Kindleストアで販売する電子書籍の作り方」、「4時間で学ぶ 個人・小規模な出版社向け直販ストアの作り方[実践編]」などをリリースし、販売終了したものから一般公開しています。

スタートして、まだ一年弱ですが、パブリッシングシステムの基盤が完成するまで、一人出版社のまま継続し、企画力を磨いていきたいと思います。その後、著者や編集者とチーム体制で新たなプロジェクトに挑戦していきます。
Creative Edge School Booksの上位目標は、誰でも自由に学べる「オープンエデュケーション」です。マーケットを自前でつくっていくのは大変なことですが、ウェブの技術を活用しながら、少しずつカタチにしていきたいと思います。

2015年2月13日 境祐司

お問い合わせは[ebookcast@gmail.com]境まで。専用フォームもありますのでご利用ください。
情報発信は、PodcastWeekly eBook Strategy(iTunes)」ニュースレター、Twitter@commonstyleがメイン、その他、ブログ「eBook Strategy Magazine」やYouTubeチャンネル、Facebook「電子書籍メディア論」などがあります。最新情報は、ニュースレターで配信しています。

Creative Edge School

Open Education Platform - Creative Edge School