2017年3月11日（土）にベルサール神田で開催したCSS Nite LP51「Reboot Dreamweaver」のフォローアップとして、生明 義秀さん（AZMDesign）、たにぐち まことさん（H2O space）の『Dreamweaverで高速・楽々マークアップ』セッションのスライドなどを公開します。
メッセージと補足
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. はい。私もたまに、心が折れそうになったとき、ゆっくり一文字ずつ、コードヒントを楽しみながらコーディングすることがあります。でも、急ぐべきときの道具や腕は、持っておいた方がいいです。
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
