2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、生明 義秀さん（AZMDesign）、たにぐちまことさんの『Dreamweaverで高速・楽々マークアップ』セッションのスライドなどを公開します。
メッセージとフォローアップ
セッション『Dreamweaverで高速・楽々マークアップ』を担当しました、生明義秀（AZMDesign）です。ご参加いただきました皆さまに、改めて感謝申し上げます。
実は、大阪でこのようなセミナーイベントに参加するのは、今回が初めての経験でした。不慣れな私に気さくに接していただき、大阪ならではの暖かさに感激している次第です。
セッションの冒頭で「デザインビューを今でも使っている方」に挙手をいただきましたが、東京と同様、とても少ない人数でした。しかしながら皆さまのアンケートを拝見すると、「目からウロコ」「呆気にとられた」「デザインビューでコーディングしたくなった」というお言葉が多数あり、頑張った甲斐があったと喜んでおります（5段階の○をふるところに「花丸」で3つとも5番にふってくださった方や、「めっちゃ」と追記してくださった方もいて、とても嬉しかったです）。
内容も盛り沢山で、東京版ではお話しできなかったことも加味したこともあり、解説が早く、皆さまにご負担をかけました。どうか、このフォローアップでお渡しするデモファイルや動画などで再確認をいただけましたら、幸いです。
そして、東京版に続いてまたしても、「ドリームウェーバー」と発音してしまい、これには私の滑舌と訛りの問題であろうかと絶望を感じており、業界・講師仲間も呆れているかと思います。もしや東京訛りではなかろうか、などと苦しい詭弁も申し上げる余地はございません。改めまして、「ドリームウィーバー」でございます。この場で訂正とお詫び申し上げます。
アンケートに、「また大阪へ来て」という嬉しいお言葉ありました。ぜひ、参じたいと思います。皆さまと、またお会いできますことを。
アンケート等でいただいた質問への回答
Q. テーブルタグをコーディングするときはEmmetでせこせこ書いていたのですが、考えてみればものすごく非効率だなと思いました…。Dreamweaverに移行しようか、試験に悩みます。→ 移行します!!
A. テーブル要素の編集において、現在でもDreamweaverのデザインビューの採用が最強かと思います。移行、大賛成です。
Q. デザインビューへのインポートで、コピー元のアプリを変えると上手くいく → 具体例が欲しい。
A. 例えば、このような事例を一つ紹介します(デモファイルの「Demo 4 データインポート」へサンプルファイルを格納しました)。私が今回のデモで利用したスプレッドシートのファイルは、Excelの.xlsでしが、それをMac版のExcelとNumbersでそれぞれ開き、Dreamweaverのデザインビューにペースト・インポートすると、結果が異なります。Excelからのコピーではcol要素が入ってしまうもののtd要素などは綺麗に取り込めたり（excel1.html）、Numbersからではtbody要素がきちんと入っていますが各td要素にvalign属性やalign属性が入ってしまっていたりします（numbers1.html）。また、ペーストスペシャルで「構造と完全な書式（ボールド、イタリック、スタイル）付きテキスト」を選択してペーストすると、Excelではhead要素内のstyle要素にCSSがまとまって記載されていますが（excel2.html）、Numbersでは各td要素内のstyle属性にCSSが記載されてしまうといった具合です（numbers2.html）。
また、アプリケーションの問題の他に、ファイルそのものの「作り」の問題も大きいことがあります。コピーをする前に、余分な設定などを削除したり、複雑な構成をシンプルにしたりなどの下ごしらえをするのもいいでしょう。
事例は無数にあり、あげたらきりがありませんが、インポート・HTML化という作業が必要になった際に、その都度、いろいろと試していただければよろしいでしょう。何はともあれ、コピーペーストしてみる → ペーストスペシャルでペーストし直してみる →異なるソフトウェアからコピーしてみる → さらにペーストスペシャルでペーストし直してみる → 元ファイルを違うフォーマットにしてみる → 様々なソフトウェアで開いてコピーしてみる… という感じで、粘って試してみてください。
Q. Windowsのショートカットも言って欲しい。
A. 大変失礼しました。ショートカットキーにおいて、macOSの「command」キーは、Windowsの「Ctrl」キーに該当します。
Q. フォームやリストの部分を、もう一度して欲しい。
A. 早くて伝わりづらかったかと思います。失礼しました。フォーム要素はすべて、「挿入パネル」を使って設置するのが楽です。「挿入パネル」では、フォーム要素に関してのみ、「コードビュー」と「デザインビュー」では結果が異なります。具体的には、「デザインビュー」へ「挿入パネル」からフォーム要素を設置すると、name属性やid属性、さらにはlabel要素やfor属性などが「おまけ」で用意されるのです。ついては、「デザインビュー」で贅沢にフォーム要素を用意して、それを「コードビュー」で過不足を編集・複製してフォームのページを制作する、というのが私もよく行うお勧めの作業方法です。
リスト要素の階層化は、デザインビューの編集画面内で階層を変えたい要素の中にカーソルを入れ、そのまま「tab」キーを押せば階層が深まります。もちろん、並列する複数のリスト要素を選択して、同時に階層化をすることも可能です。逆に戻すのは、shiftキーを押しながら「tab」キーを押せばよいのですが、li要素の終了タグの前に、余分な改行が発生してしまうので、それをコードビューで修正する必要が生じます。
Q. Atom以外のMarkdown（マークダウン）の仕方はあるのでしょうか。
A. Atomはウィキペディアにも“本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたもの”とあるように、どのようなテキストエディタでも記述することができます。私がMarkdownを記述する際にAtomを採用する理由は、デフォルトでMarkdownのプレビュー機能が搭載されているためです。「markdown atom」で検索いただくと、AtomでMarkdownを記述する際の方法や便利な機能を紹介しているwebサイトを多数見つけることができるでしょう。
Q. ごみタグの処理など、便利な方法はありますか？
A. はい。すぐに思いつくのは、メニューバーの「ツール」の中にある「HTMLのクリーンアップ」や「Word HTMLのクリーンアップ（MS Wordからのインポート処理用）」などです。事前のバックアップをしつつ、設定項目などを確認して上手に使ってください。
また、HTMLやCSSの記述を整理するための「ソースフォーマットの適用」も活用してみてください。「標準」ワークスペースの左側にある「コーディングツールバー」の上から4つ目のアイコンが、それに該当します。
Q. テキスト原稿の成形にかかる時間を知りたい
A. これは、その元原稿の内容やあり方によるので一概には言えませんが、原稿の内容が長ければ長いほど、複雑であれば複雑なほど、たとえ時間がかかってもちゃんと原稿を成形してDreamweaverのデザインビューで編集した方が早くて確実な結果がもたらされることを、私は自己の経験で知っています。
Q. セルの「Ctrl + M」!!
A. 申し訳ありません。私の説明が不明瞭でした。実は、半角の入力モードで「M」のボタンを押すだけで、テーブル要素のセルのマージ（結合）が可能です。「Merge」の「M」と憶えてください。メニューバーの項目では、「command + option + M（Ctrl + Alt + M）」となっていますが、隠しショートカットと言うべきでしょうか、「M」キー、一発で大丈夫です。
このセッションは「CSS Niteベストセッション2017」にてベスト・セッション20に選ばれました。
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
