CSS Nite LP51「Reboot Dreamweaver」

公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。

Twitter

ツイートは下記にまとめました。

動画について

ダウンロード期限があるものもありますのでご注意ください。

  • OS X Yosemite+Google Chromeの組み合わせでダウンロードができないことがあるようです。お困りの場合には、異なるブラウザーでお試しください。
  • 利便性のため、パスワードを設けず、プライベートリンク（リンク先を知っている人だけが見られる）になっています。URLをツイートなどされないようにお願いします。

たにぐちさんから

セッション 1, 2, 3のアシスタントを務めさせていただいた、たにぐち まこと です。

今回、お申し込みのアンケートで「Dreamweaverを使うのをやめたバージョン」という設問がありました。それによると、CCになったタイミングまでで使うのを辞めてしまった方が多く見受けられました。

私自身も、一時期までアクティブに使っていましたが、いつの間にか Sublime Textや PhpStormといった新しい開発環境を試すうちに、Dreamweaverから離れてしまった経緯があります。

今回、20周年という節目に改めて「今」の Dreamweaverを感じる場に参加させていただき、「半歩遅れて」はいるものの、着実に、現在の Web制作トレンドを押さえてくれていることを改めて知りました。

私も、これを機会に使っていこうと思います。今もアクティブに使っているよと言う方は、是非 Bootstrapや Sassを使ってみていただき、またひさしぶりに起動する方はデザインビューやリアルタイムプレビューなど、Dreamweaverの便利機能を使いながら Bracketsの威力を試していただければ幸いです。

温故知新：DreamweaverとWeb制作シーンの20年を振り返る
鷹野 雅弘（スイッチ）

Dreamweaver CS3 10周年記念イベントから10年、20周年のお祝いのイベントをCSS Niteでホストできて嬉しいです。

冒頭にて触れました、私の著者人生のなかでDreamweaverは大きな存在感を占めています。Dreamweaverが少し盛り上がってきて、嬉しいです。

リンクや補足など

読み方、呼び方

歴史

新機能など

「Expandがよくわからなかった」というコメントをいただきました。

Dreamweaver CC 2015以降、Emmetに標準対応しています。Emmetは、過去にはZen Codingと呼ばれているものです。2009年くらいからコーディングの際に不可欠なものとして定着しています。

例を挙げて解説します。

コードビューで「#main」と入力してtabキーを押せば「<div id="main"></div>」のように展開されます。これをExpandといいます。

正式には、Expand Abbreviation（「省略語を展開する」という意味です）。

同様に

ul>li*3>a[href=#]

は、次のように展開されます。

<ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

CSSでは、次のように展開されます。

m0

　↓　↓　↓

margin: 0;

m:a

　↓　↓　↓

margin: auto;

ff

　↓　↓　↓

font-family: ;

bgc

　↓　↓　↓

background-color: #fff;

b+

　↓　↓　↓

background: #fff url() 0 0 no-repeat;

覚えてしまうと、これなしには…となるでしょう。

「先に原稿ありき」の場合には、「Wrap with Abbreviation」を使います。

かに
えび
たこ

のように入力したテキストを選択し、「Wrap with Abbreviation」を呼び出して、

ul>li*>a[href=#]

と入力すると

次のように展開されます。

<ul>
    <li><a href="#">かに</a></li>
    <li><a href="#">えび</a></li>
    <li><a href="#">たこ</a></li>
</ul>

「Wrap with Abbreviation」は、Dreamweaverの搭載されていないEmmetでは非対応です。しかし、Emmetの拡張機能を入れることで可能になります。

その他、Emmetの拡張機能を入れることでEmmetの全機能が使えるようになります。

Emmetフル版のインストール

公式サイトから拡張機能をダウンロードして、Dreamweaverにインストールします。

CC 2015以降、拡張機能をインストールするためのアプリケーション Extension Manager がサポート終了となってしまったため、DMXzone Extension Manager、または、オープンソースのZXPInstallerを利用します。

EmmetをDreamweaverにインストールしたときの全機能

Dreamweaverのキーボードショートカット設定にて割り当て可能です。

コマンド 意味
Numbers Increment Number by 1 1増やす
Decrement Number by 1 1減らす
Increment Number by 0.1 0.1増やす
Decrement Number by 0.1 0.1減らす
Increment Number by 10 10増やす
Decrement Number by 10 10減らす
Evaluate Math Expression 四則演算
CSS Reflect CSS Value ベンダープリフィックスの値を一致させる
HTML Match Pair Tag (outward) 親要素を選択（Dreamweaverの
親要素を選択と同様）
Match Pair Tag (inward) 子要素を選択
Go To Matching Pair 開始タグと終了タグを行き来する
Remove Tag タグを削除
Split/Join Tag Declaration 閉じタグを省略する
Expand Abbreviation 省略語を展開する
Wrap with Abbreviation 選択したテキストに省略語でマークアップする
Toggle Comment カーソルの位置の要素をコメントアウト
（HTML/CSS）
Previous Edit Point 前の編集ポイントへ移動
Next Edit Point 次の編集ポイントへ移動
Select Next Item 次のDOMに移動
Select Previous Item 直前のDOMの項目に移動
Merge Lines 改行を削除する
Emmet Preferences 環境設定（無効）

スペシャルコードヒント

数値入力の際、px、%、emなどの単位を表示してくれます。Dreamweaver CC 2015まで対応（Dreamweaver CC 2017には非対応）。

ご参考

ダウンロード

Dreamweaverで高速・楽々マークアップ
生明 義秀（AZMDesign）

2つ目のセッション『Dreamweaverで高速・楽々マークアップ』を担当しました、生明義秀（AZMDesign）です。 ご参加いただきました皆さまに、改めて感謝申し上げます。

セッションの冒頭で「デザインビューを今でも使っている方」に挙手をいただきましたが、私の想像を優に超えるほどの少ない人数でした。 しかしながら、ご聴講いただいた皆さまのアンケートを見ると、「吃驚した」「すぐに試してみる」というお言葉が多数あり、頑張ってよかったと心から喜んでいる次第です。

内容も盛り沢山でした。 ゆえに、解説の進行が速く、皆さまにご負担をかけました。

また、会場が広く、お座りの位置によってはスクリーンが見づらかったと思います。 このフォローアップでお渡しするデモファイルや動画などをご参照いただけたら、幸いです。

さらには、基調講演で「ドリームウィーバー」と説明されたそばから「ウェーバー」と発音し、穴があったら入りたいほどです。 こちらも合わせてまして、お詫び申し上げます（この発音は、私の滑舌に由来するものでしょうか）。

皆さまと、またお会いできますことを。

アンケート等でいただいた質問への回答

Q. デザインビューの表示がめちゃくちゃで選択ができないときはどうすれば…？

A. CSSのボックスモデルレイアウトを施す以前の状態でめちゃくちゃであるならば、HTML要素の構造化が複雑になっているのかもしれません。

整理する余地があるのであれば、ぜひ、コードビューで確認・修正を試みてください。 CSSのデザイン設定がある程度進んでいる状況であるならば、ライブビューやリアルタイムプレビューでプレビューしながら、コードビューで編集するという方法に移行してください。

Q. このセッションの方法を学べるサイトや書籍を教えて

A. まずは、当イベントでMCを担当してくれた山本和泉さんが「Adobe Creative Station」にて執筆している「Dreamweaver入門」をご覧ください。 「Dreamweaver入門 第3回 HTMLマークアップを効率的にできるデザインビュー」が、デザインビューの使うマークアップ方法を紹介しています。

また、古い書籍ですが、当イベントの主宰者 鷹野 雅弘さんが執筆した『できるクリエイター Dreamweaver 独習ナビ CS3/8対応』が、「Lesson」と称してDreamweaverを駆使したwebデザインの理想的な手順を紹介されています。 対応バージョンが古いので近年のDreamweaverでは勝手が違うかもしれませんが、もしも入手可能でしたら一読を薦めます。 webデザインに対するDreamweaverの在り方と理想的な使い方を、よく理解できます。

とはいえ、すでにちょうど10年前の書籍ですから、そろそろ筆者に改訂版の執筆・出版をリクエストされたらよいでしょう。

Q. デザインビューでは、文字を行ごと選択しなくても、カーソルを入れるだけでマークアップできるのですか？

A. 選択している箇所の要素を他の要素の「切り替える」操作の場合は、カーソルを入れるだけで大丈夫です（段落要素を見出し要素に切り替えるなど）。

特定の要素群や文字などを新しい要素で内包させる場合は、該当するところをすべて選択してから適用操作をしてください（リンク要素の新規設定など）。

Q. ショートカットの操作方法が少しわからなかった（リストの部分）

A. ul要素，ol要素，dl要素などのリンク要素は、あらかじめ設定しておいたオリジナルのショートカット（command + 7〜9）を使ってマークアップしました。

ul要素をnav要素で内包させる場合は、li要素を選んでから、親タグを選択「command + [」を押してul要素のタグまでしっかりと選択してから、挿入パネルの「HTML」の「ナビゲーション（なぜかここだけカタカナ）」を押します。

リスト系の要素を、挿入パネルを使って親要素を挿入し内包する場合、このようにul，ol，dl自身のタグをちゃんと「親タグを選択」で含めてから挿入してください。 他の要素にはその必要はありません。

Q. タグセレクターは使わないのですか？

A. 使います。 ただし、親要素を選択するだけならば、親タグを選択「command + [」を押した方が速いでしょう。 タグセレクターの魅力は、先祖要素と子孫要素が一覧で並んでいる点です。 また、比較的新しい機能ですが、DOMウィンドウもぜひ、使ってみてください。

Q. ダブルクリック、トリプルクリックはデザインビューで有効？

A. はい。とても有効ですし、ぜひ、使ってください。 これはDreamweaverのデザインビューに限った話ではありませんが、テキストの編集時に単語単位の選択はダブルクリック、行や段落単位の選択はトリプルクリックでできるアプリケーションは多くあります。

各種モダンエディターは元より、macOSに標準搭載されているテキストエディットですら利用できます（テキストエディットは、トリプルクリックで行を選択）。 ご多分にもれず、Dreamweaverのデザインビューもそのような選択が可能です。 日常的に他のアプリケーションでも試してみてください。

また、デザインビューでカーソルの移動を方向キーを使って移動する場合、commandキーを押しながら操作すると、←と→は単語単位で移動し、↑と↓は段落の先頭とそれぞれ移動できます。 こちらも、日常的に利用すると効率化につながります。

Q. 追加した下のウインドウはなんですか？

A. ［プロパティ］パネルです。 以前には「プロパティ・インスペクター」と呼ばれていた時代もありました。 最新のCC 2017では、デフォルトのワークスペース「標準」で表示されなくなってしまいました。 command + F3で呼び出すか、メニューバーの「ウィンドウ」から開きます。

Q. ul，olは、プロパティパネルのボタンでもOK？

A. OKです。 また、リストの階層編集も、その右側周辺にあるボタンで操作可能です。

Q. 案件によって、Dreamweaver以外も利用されていますか？ Dreamweaverが、最も力を発揮できると感じられていますか？

A. 案件というよりも、web制作作業の内容や状況によって、複数のツールを使い分けるのがよろしいでしょう。

例えば、わずか数カ所の文字列を修正するためだけに、なにもDreamweaverを起動することはありません。起動が速い他のモダンエディターで十分です。

また、FTPのアップロードも、大量のファイルを操作する場合は、他のFTPソフトの方が圧倒的に速いです（Dreamweaverは、ファイルをちゃんとチェックしているため遅い）。

このように、臨機応変に各種ツールを使い分ければよろしいでしょう。 エディターに関して言えば、私もmacOSテキストエディットを含めると4つ以上使っています。

また、Dreamweaverは統合web制作環境ツールです。ならば、包括的かつ基盤的なポジションで使うものなのかとも思います。 いずれにせよ、使い方を見極めて合理的に使えば、Dreamweaverは強力なツールになります。

Q. ちまちまとハンドコーディングするのが大好きなのですが…。

A. はい。 私もたまに、心が折れそうになったとき、ゆっくり一文字ずつ、コードヒントを楽しみながらコーディングすることがあります。 でも、急ぐべきときの道具や腕は、持っておいた方がいいです。

ダウンロード

Dreamweaverのコードエディター機能を進化させたBrackets
酒井 優（WEBCRE8）

セッション3「Dreamweaverのコードエディター機能を進化させたBrackets」を担当しました酒井優です。

Dreamweaverのエディター機能は基本的にはモダンエディターに追いついたと言っていいと思います。しかし、まだ動作の不安定な機能もあります。以前よりは追加のアップデートが期待できそうなので、今の時点で今ひとつだなと思われる部分については動向を見守っておくと良いかもしれません。イベント内で私が気になると言ったところはすでにいくつか対応が検討されているようでした。

今回イベントの参加者の方々にリアクションを聞いていると、やはりWeb制作に携わる人達の層の広さを感じました。Dreamweaverの機能をフルに活かせそうな職場環境の人、やはり単純なエディター機能だけを求めたい人、さらにこの間に案件によってまちまち、という人たちがいるわけです。Bracketsはそういった中間の人たち、純粋なエディター機能を求める人達の受け皿になるのではと考えています。

Bracketsは今のところ、リアルタイムプレビューなどを含む高機能なエディター機能を利用できる最も手軽なエディターです。また、一人でWeb制作全般の作業をこなす場合、Webデザインのアプリケーションとも相性がいいという点で他のモダンエディターとは一線を画す存在です。現在、私は特に初心者のWeb制作者にこのエディターを勧めています。他に手に馴染んだエディターがなければ是非Bracketsの利用を検討してみてください。

以下は私の記事と、公式の参考リンクです。

ダウンロード

忘れがち、実は使えていない Dreamweaverの便利機能
森 和恵（r360studio）

4番目のセッションでお話しした、森和恵です。
ご参加くださったみなさま、長丁場のイベント本当におつかれさまでした。

セミナー後、「おもしろかったです」とお声をかけてくださったこと、嬉しかったです。
大好きなDreamweaverの話をする機会をいただきありがとうございました。

みなさまからのアンケートでわかりにくかった部分、セッションでやり残した部分についてフォローアップ動画を作りました。

時間的な制約がないので、かなりじっくりとお話していますので、合わせてぜひご覧ください。

では、また、どこかでお会いできますことを楽しみに。

@r360studio Twitterの相互フォローもお待ちしております。

【 Dreamweaver関連の最近のブログ記事 】

【フォローアップ動画】

※限定公開のURLです。90日間は、他言無用でお願いします。

【ご質問への回答】

Q： WordPressのデモで使った、テストサイトの設定について

フォローアップ動画（ https://www.youtube.com/watch?v=wORX-QkQsUY ）で、じっくり紹介しました。
テストサイトが使えると、PHPなどの動的生成を行うファイルがDreamweaver内で動作できて、開発がスムーズになるのでぜひ使ってみてください。

Q ：実務で、DOMパネル→CSSデザイナーパネルのコーディングをすることってありますか？

ビジュアルで確認しつつ作業ができますので、入力するコードがまだ頭に描けていない場合（考えながら、調整しながら、ページを模索しつつ作る時）は、便利だと思っています。

そのほか、第三者の作ったデータを確認しつつ作業するときも、DOMパネルでタグを調べ、CSSデザイナーパネルでCSSを調べるのって、案外便利です。

Q： ライブビュー、デザインビュー。どっちを使えばいいのか？

操作の内容や好みの問題もあるかと思います。

が、CSS3などで組まれたページを正確に表示できるのは、ライブビューです。今後は、ライブビューがDreamweaverとしてのメイン機能になるのでは？と個人的には考えています。今後のライブビューのバージョンアップに期待しています（デザインビューとライブビューが統合すべきだと思います）。

Q ：「コードの整形」ツールは、圧縮したCSSを元に戻すこともできますか？

「コードの整形」ツールとは、今回ご紹介した「ソースフォーマットの適用」機能のことでしょうか？そして、圧縮したCSSとは、minifyされているCSSコードということですよね？

でしたら、可能です。試しにGoogleのトップページで使われているCSSコード（<style>内部にある）をDreamweaverにコピペして、試してみましたが、きれいに整形されてきました。

Q：「justify-content」の発音が…

多くの方からご指摘いただきました。「ジャスティファイ」と頭でわかってはいるものの…
そして、何度も練習したのですが、口が回らずでした。精進します。ご指摘ありがとうございます。

Q ：テンプレート・ライブラリを用いたときに専用のコードが残るのが面倒です…

Dreamweaver内で、共通コードを管理するために専用のコードが存在するのは、テンプレートやライブラリの機能を使うためにはいた仕方のないことです。

（この専用コードは、単なるHTMLコメントですので、ブラウザへの表示に影響したりはしません…が、コードに見えてしまうのが気になるというお話ですよね）

第三者に納品する前に、必要があればテンプレートやライブラリを外してしまうことも可能です。

フォローアップ動画（https://www.youtube.com/watch?v=UAdOvOz5cNc）の各項目の最後に、「適用したテンプレートやライブラリを無効にする」方法を加えましたのでご覧になってみてください。

Q ：テンプレートで、データを自動的に流し込んでページを量産する方法はありますか？

残念ながら、動的に自動生成する機能はありません。あくまでも、手作業での作成になります。

Q ：テンプレート機能をチームで使うことはありますか？

はい。テンプレートのファイル一式をウェブサーバーにアップしておき、チームでファイルを同期することで、常に最新の状態を保ちつつ、サイト構築を行ったことがあります。

注意しなければならないのは、テンプレートデータを含むサイト内のすべてのデータをチーム全員で最新のものを参照することです。

Q ：ライブラリ・テンプレートの利点・欠点について

一番の利点は、一度仕込んでしまえば、追加・更新などのデータ操作が簡単なことです。
Dreamweaverの操作を少し学べば、誰もが操作できると思います。
CMSソフトを使わずに、みんなで管理をする環境としては、提案しやすい環境だと考えています。

欠点としては、操作にあたる全員がDreamweaverを使わないとならないところです。
例えば、違うエディターで共通部分を編集してしまったら、せっかくの一元管理が崩れてしまいますよね（もし、そうなったら、テンプレートやライブラリを更新すれば、編集する前の状況に戻せますが…編集した部分は消えてしまいます）。

全員のルール決めをきちんとしておくことが大切です。

ダウンロード

いまどきのPhotoshopとDreamweaverとの連携
北村 崇（TIMING DESIGN）、浅野 桜（タガス）

コメント（北村さん）

皆さまお疲れ様でした。 私自身、Webデザインをまだ全く知らない時に、初めて触ったのがDreamweaverでした。その時は私も「ドリームウェーバー」だと思い込んでいた内の一人です（笑）

今回はデータの作り方と考え方、そしてDreamweaverとの連携方法を短い時間の中でお話ししましたが、デザイナーとコーダーの連携はアプリケーション間だけではなく、コミュニケーション上でも大事だと思っています。

これを機に、「データの受け渡し方法」や「データ作りのルール」などを社内やチームで見直して、より円滑なワークフローを探して頂ければと思います。

 

 

コメント（浅野さん）

Dreamweaverは初心者からベテラン、デザイナーからエンジニアまでさまざまなユーザーの業務に適応できるアプリだと改めて実感しました。

一方で、轟さんのセッションの"ヤシドリ作戦"で私のExtractへの要望をお見せしましたが、まだまだ改善点があるのも事実。今後もユーザー全員で盛り上げていければいいですね。

アンケート等の質問について

Q.ビール本の正式名称

A.『Webデザイン必携。 プロにまなぶ現場の制作ルール84』

Q.レイヤー名の順序が違う（フッター→メイン→ヘッダー）場合もあるがそれはいいのか？

A.ルールが明確で、コーダーとの意思疎通に問題なければ、いいと思います。

Q.レイヤー名、手打ちですか？

A.手打ちですが、一括でレイヤー名を変更するスクリプト等もありますので、使ってみても良いと思います。 Group Layer Renaming

Q.手順がよくわからなかった。

A.最後のBootstrapを使うデモはアドビで紹介されているワークフローを元に、簡潔な形へ変更してご紹介しました。手順の概要は以下の通りです。

  1. DreamweaverでBootstrapを使ってサイトを作成しておく
  2. 「スニペット」パネルの「Bootstrap snippets」→「responsiveimages」を参照して、img タグにresponsiveimageのclassをあてる。
  3. ライブビューのビジュアルメディアクエリバーをクリックし、ライブビューでimgの画像右クリックすると「エレメントを隠す」という項目」が現れるので選択すると、classが自動で追加されて表示非表示を切り替えられる。

Q.「レスポンシブイメージ」という単語が出たが、HTML5実装のレスポンシブイメージではない？

A.今回ご紹介したサイズを変えながらの画像指定は、HTML5でのpicture要素などではなくBootstrapでのCSS実装になります。 この点は新しい機能としてHTMLも是非追加して欲しいですね。

デモデータ

ダウンロード

チームで使える！ ワークフローに効くDreamweaver+Bootstrap
松田 直樹 （まぼろし）

Bootstrapセッションを担当しました、株式会社まぼろしの松田です。
ご参加いただきました皆さま、長丁場、大変お疲れ様でした。

Bootstrapを利用してのワイヤーフレーム作成の提案、および、DremaweaverのBootstrap機能のデモを行いました。
Bootstrap自体はやはりコードのみの「CSSフレームワーク」ですので、コーダー・エンジニアを本業としてない方には馴染みが薄いかもしれません。
ただ、DreamweaverのBootstrap機能は本当に感覚的操作ができますから、デモでもご紹介したようにコードを書くことなくレスポンシブな複雑レイアウトを素早く実現することができます。ぜひ、ライブビューと挿入パネルから触れてみてください。
現時点では本実装には向かない機能ながらも、ここまで簡単にグリッドレイアウトを行えるのは魅力です。

ディレクター・デザイナーの方はぜひこのワイヤーフレームづくりを試してみてください。コーダー・エンジニアの方は周囲にこの手法を提案してみてください。
ワイヤーフレームの設計時点で「Bootstrapをどう使えばこのレイアウトが実現できるか」が考慮されていることは、デザインや実装への引き渡しをスムースにしてくれることでしょう。

DreamweaverもBootstrapもツールであり、手段です。すべての機能を把握しておく必要はありませんから、触って便利な部分、自分の業務に合う機能だけでも使ってみてはいかがでしょうか。

以上、ありがとうございました！

セッション内で紹介したリンク

アンケート等でいただいた質問への回答

Q. 他のエディターで作ったBootstrapベースのHTML（フリーのBootsrapテンプレートなど）を、Dreamweaverで編集しても大丈夫ですか？

A. BootstrapのCSS（bootsrap.css）自体をカスタマイズしていない（class名を変更していたり）しない限り大丈夫です。Dreamweaverが勝手にスタイル等を書き換えることもないので問題ないはずです。

Q. コードのカスタマイズがしにくいのは、DWのせい？Bootstrapのせい？

A. 現状、Sass版のBootstrapを気軽に取り込む方法がないので、Dreamweaverのせいですね。今後のアップデートに期待しましょう。

Q. Museでいいのでは？

A. Museでワイヤーフレームを作る、という同様のことを行えますが、仕上がるHTMLがMuse独特のものであり、コーダー・エンジニアにとって読みやすい・理解しやすいものではありません。Bootstrapを使う利点はそこを解決できるということにあります。

Q. 出力やPDFにできるのか？

A. HTMLを作っているだけなので、できあがったワイヤーフレームをブラウザで表示すれば、印刷やPDFとして出力するのは自由に可能です。

Q. 今、ワイヤーフレームを作るとしたら、何が一番おすすめですか？

A. 個人的にはですが、大枠のページのワイヤーフレームには「Adobe Experience Design(XD)」を使用するのがオススメです。リピートグリッド機能がグリッドレイアウトの見た目を作るのにとても便利です。
レスポンシブでの挙動を確かめる部分にDreamweaverとBootstrapを利用しています。コードを直接書かれるのであれば、「Foundation」というフレームワークを使ってもよいでしょう。

ダウンロード

DreamweaverでSassを使うための勘所
久保 知己（まぼろし）

Sassセッションを担当しました、株式会社まぼろしの久保です。
長丁場にもかかわらず、ありがとうございました。

Sassをはじめて知った方には、難しい内容だったかもしれませんが、最初にSassはどういうものか、お話させていただきました。
CSSメタ言語は、CSSのセレクタを入れ子にしたり、変数を使って色を管理したり、プログラムのようなことがCSSでも可能になります。
そしてCSSプリプロセッサーは、CSSメタ言語からCSSにコンパイル（変換・出力）が行うためのプログラムであり、この役割をDreamweaver CC 2017でも行えるようになりました。

CSSプリプロセッサーの環境を構築するには、マウスを使わずに文字だけで操作するCLI（コマンドラインインターフェース）を使って構築するのが主流で、WindowsやMacのOSによって構築方法が異なります。
しかしDreamweaver CC 2017では、Dreamweaverをインストールするだけで、OSによって特殊な操作をすることなく、CSSプリプロセッサーの環境が構築されます。
そのため、これから触ってみる方や以前に環境構築で諦めた方も、簡単に導入できると思います。

ただ、現在のDreamweaverとCSSメタ言語の連携がうまくいっていない箇所も見られると思います。 特に不満に思う部分や欲しい機能などは、Dreamweaverのユーザーボイスへ投稿するといいでしょう。 ユーザーボイスで「Sass」を検索すると、すでにいくつも要望が上がっています。投稿するのは「ちょっと...」と思う方は、Voteボタンを押すだけでも要望に反映されます。 Dreamweaverをもっと良くしていきましょう。

ありがとうございました。

セッション内で紹介したリンク

アンケート等でいただいた質問への回答

Q. Sassがどういうものか知っていましたが、ハードルは高そうですね。
Q. 書き方を新たに覚えられるか少し不安

スライドのコードは、プログラムのように書かれていますが、普通のCSSを書いても問題ありません。
一部、セレクタを入れ子にしたり、変数を使ってみることから始めるといいと思います。

Q. 階層を管理している環境は反映できますか？

はい。フォルダーが階層になっていても反映されます。

Q. 結局はDwではSassって使わないほうがいいのですかね。

Dreamweaverは、CSSと連携する機能を使わない方であれば、Sassを利用しても問題ないと思います。
Sassライブラリを使いたい場合も、公式からダウンロードできますし、Sassそのものの機能は、すべて動作するの問題ありません。

Q. 実のところDwでSassを使った作業をしていますか？

私の場合、Sassの他にPostCSSなども連携して使っています。
そのためSassだけで作業が完結しないので、現在CSS周りは別のものを使っています。

Q. 最近何かお気に入りのSassライブラリはありますか？

使っているわけではないのですが、Bourbon v5ベータ版が気に入っています。
私は欲しいMixinsや関数などを自分で作ってしまうのですが、Bourbon v5はMixinsの作り方やどういったMixinsがあれば便利になりそうか、参考にさせてもらています。

Q. 便利ですが、今後も重要になってくるのでしょうか？

Sassが誕生して、今年で10周年です。移り変わりの激しいWebの技術で、10年以上も使われている技術は多くありません。
現在は、Sassの他にPostCSSが新たに登場しています。完全にPostCSSに乗り換える方もいっらしゃいます。
しかしPostCSSをSassなどに置き換えるには、機能と文法、また開発者の思想によって、なり変わることは難しいと感じています。

私もSassとPostCSSを併用して使っていますが、現状Sassを切り捨てるのは考えられません。
CSSのあり方が大きく変わらない限り、この先もSassは重要であると思っています。

Q. ベンダープレフィックスは、現状どうするのが効率よいですか？

ベンダープレフィックスは、PostCSSのプラグインの1つであるAutoprefixerを利用するのが一番いいでしょう。 Autoprefixerは、ベンダープレフィックスを記述せずに、そのままCSS3を書くだけで、指定したブラウザの対応バージョンに合わせて、ベンダープレフィックスを付与してくれるツールです。 CompassやBourbon v4のようにベンダープレフィックスのためにMixinsを呼び出す必要がありません。

ただしDreamweaver CC 2017では、Autoprefixerに対応していないのすが、私の次のセッションだったAdobe 轟さんの「Dreamweaverに追加予定の機能と開発チームへの機能要望の出し方」で、Autoprefixer入ることが検討されているようなので、今後の機能追加に期待ですね。

Q. CSSの速い書き方を使ったことがなかったので勉強しようと思いました。

CSSの速い書き方は「Emmet」ですね。
EmmetのCSSの書き方は、コードヒントで入力するよりも2倍のスピードで入力することができます。なぜならコードヒントは、プロパティと値を別々に入力するのに対し、Emmetはプロパティと値を同時に展開するからです。

Emmetについては、私が過去にAdobeの公式ブログで連載していた記事があるので、こちらをご覧ください。

Q. Sassファイルと書き出されたCSSファイルは分けた方がいいでしょうか？

Sassファイルが多くないのであれば、CSSファイルを分ける必要はありません。
もしCSSのパーツごとにSassファイルを区切っているのであれば、別ファイルの方が管理しやすいと思います。

Q. マイナーバージョンアップでもSassのバージョンは上がるのでしょうか？
またDw上でバージョンを確認するには？

私がDreamweaverのプレリリースから確認している限り、Sassの「ライブラリ」はバージョンが上がっています。
ただSassそのもののバージョンは、Sassの最新が適用されていないのでバージョンは上がっていませんが、将来的に上がる可能性もあると思います。

またDreamweaver上でのライブラリのバージョン確認は、 [サイト設定]->[CSS プリプロセッサー]->[ライブラリ名]のインクルードパスに、ライブラリのディレクトリが書かれているので、ライブラリの本体ファイルから確認します。

Sassそのもののバージョンの正しい方法は、私にもわかりません。 私がやっているのは、Sassのバグからバージョンを推測しています。

Q. すでにBoostrap以外のクラスがたくさん入ったCSSを編集できるか？

SassはCSSを出力するための元ファイルであり、Bootstrap Sassを使ったとしても、すでにたくさんのクラスがCSSに入っていれば編集できません。

ダウンロード

Dreamweaverに追加予定の機能と開発チームへの機能要望の出し方
轟 啓介（アドビ システムズ）

最後のセッションでDreamweaverの今後と機能要望についてお話したアドビの轟です。

Dreamweaverは昨年10月の2017年版リリースで多くの機能追加やUIのモダン化を行い、新たなステージに向かおうとしています。

セッションでご紹介した現在開発中の新機能「Gitサポート」は、BootstrapやSass/LESS対応に続き、モダンワークフローをDeamweaverで実現させるために不可欠だと思います。

その他にも「この機能があったら！」という声がたくさんあることを開発チームも理解しています。昨年設置した「UserVoice」というオープンフォーラムはどなたでも自由に機能要望やバグ報告、そしてそれら投稿に対する投票（Vote）ができるようになっています。

ぜひ、UserVoiceとSNSを使った「ヤシドリ作戦」も駆使して、みなさんの声を届けてみて下さい！

セッション内で紹介したリンク

ダウンロード

関連情報

バナー

ブログやサイトにバナーを掲載いただければ幸いです。ソースコードのままご利用ください。

CSS Nite LP51「Reboot Dreamweaver」（幅200ピクセル×高さ200ピクセル）

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

 

このページの上部に戻る