CSS Nite公式サイト

2017年9月30日（土）ベルサール神田 イベントホールで開催したCSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」のフォローアップとして、角田 綾佳さん（spicagraph）、矢野 りんさん（バイドゥ）の『コンテスト、「バナーデザインくるくる会」拡大版』セッションのスライドなどを公開します。

• 音声
• 動画

フォローアップメッセージは、イベント開催直後（2017年10月）の時点のものです。

メッセージ

矢野さんから

セッション6「バナーデザインくるくる会」拡大版 の合いの手担当、矢野です。

最後までご参加下さりありがとうございました！
メディア制作においてデザイナーは、常にユーザー視点と発注者視点の板挟み。どちらも納得、満足させなければなりませんよね。
原則的には発注側とデザイナー、ディレクター皆が｢ユーザー満足」をともに目標とすることで結果が出せるはず。
どんな時もデザイナーはユーザーを主語にしてコミュニケーションすれば良くて、ディレクターも発注側もデザイナーの力量を信じ、任せれば問題は起こりにくいはずだと各セッションを通じて思いを新たにしました。

最後に、最近めっちゃ面白かった私のデザインタスクの要件定義メモ（うちのPMが作り、ぺっ！とメール送ってきました）。
??????????????????????????????
画像A（若い人が好きそうなアーティストのライブ風景）
画像B（若い人に限らず誰でも好きそうなアーティストのライブ風景）
目標 CVR8%増
??????????????????????????????
なんだよそれwwww
ふざ（以下略）

いや、準備します。してこます。あげてやろうじゃねえか！！！そのCVRを！！！

ではまた！

アンケートでの質問への回答

コンテストの周知が足りなかったことから企画について唐突に感じたかたがいらっしゃったようです????申し訳ありませんでした。最後のセッションでしっかり時間を頂戴したのに反省です。また、リニュアル用バナーの募集という前提なら「現在」のバナーをまずちゃんと紹介すべきでは？というご意見ももっともです?????♀?

知っていたら参加したのになあ！とおっしゃってくださったかたもいらっしゃるので、運用状況をもっと改善したうえで、コンテスト形式に挑戦してみたいです（ね！角田さん！）

お知らせ

• 12月恒例のShift11今年も参加します！皆様も是非ご参加下さい
• マーケ寄りのPM職を随時募集しております...自社サービス運用に興味のあるかた是非こちらをご覧ください！！！！

角田さんから

「バナーくるくる会」出張版でお話しさせていただきました角田綾佳です。
CSS Niteの中でも珍しい取り組みの、参加型コンテストでしたが、たくさんの方に応募いただき全て紹介し切れなかったのが本当に残念です。応募作品についてはこちらにまとめました。

• CSS Nite LP53 コンテストページ

講評ではビジュアル的な話だけでなく、矢野りんさんの現場のノウハウを伺えて、大変勉強になりました。同じお題にこれだけ複数のデザイナーが取り組む、というのはなかなか機会のないことです。「なるほど、そういう解決法が」と言う発見がひとつふたつあったのではないでしょうか。ぜひこれからの制作に生かしていただきたいです。

アンケートでは、「知っていたら参加したかった」「時間があれば」と言う声もいただき、周知の甘さ・時間配分については大変反省しております。しかし、「たくさんのデザインを見られて参考になった」と言う声も多数いただきました。

今回のことを教訓に、また次回たくさんの方に参加いただけるコンテストにしたいと思います。

アンケートでの質問への回答

素材を選んでいるサイトについて

応募いただいたデザイナーさんそれぞれ、ご自身のお気に入りのストックフォトがあるかと思いますが、角田の話をさせていただきますと「Adobe Stock」を契約しています。
日々の業務だけでなく、こういったプライベートワークや、ブログのアイキャッチなど幅広く利用しています。
様々なサービスがありますが、好みの写真がありそうかけんさくしてみて、合ったものを選ばれるといいと思います。

リンク集

バナーデザインくるくる会は、どなたでも開催いただけます。会の狙いなどについてはこちらにまとめています。
もし開催いただけましたら、こちらに出題された課題などフィードバックいただけますととても嬉しいです。

• バナーデザインくるくる会GitHub

神森さんから

コンテストについて

既存のランディングページのリニューアルというお題を設け、目的と現状の課題、打ち出したい要素を提示させていただきました。また、構成に関しては、ランディングページの基本構成で構築されることを目標とし、そこで展開される項目などは既存のものを使ってかまわないという形にしました。

実際の案件においても、ランディングページのようなものであれば、この要件で制作をお願いすることが多くあります。

今回応募いただいたワイヤーフレームでは、既存のものから大幅に情報をそぎ落とし、スッキリさせていただいたり、キャッチコピーも含めてご提案いただいたりと、短い時間の中でサイトから情報を引き出し、ワイヤーフレームに落とし込んでいただきました。

またこのような機会がいただけることがありましたら、応募期間をしっかり設けた上で、開催できればと思います。

長い時間のご参加、本当におつかれさまでした。

2017年11月4日（土）ベルサール半蔵門 イベントホールで開催したCSS Nite LP54「Coder's High 2017」のフォローアップを公開します。

• （1）前川 昌幸さん（イー・ネットワークス）
• （2）伊原 力也さん（freee）+太田 良典さん（ビジネス・アーキテクツ）
• （3）中村 勇希さん（トゥーアール）
• （4）久保 知己さん（まぼろし）+伊藤 由暁さん（まぼろし）
• （5）鹿野 壮さん（ICS）
• （6）阿部 正幸さん（KDDIウェブコミュニケーションズ）
• （7）大串 肇さん（mgn）
• （8）高津戸 壮さん（ピクセルグリッド）

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

• CSS Nite LP54「Coder's High 2017」 - Togetterまとめ

2017年、CSS Niteでは35回の関連イベントを通して130セッションが行われました。その中からベスト・セッション＋αを選びました。

• CSS Niteベスト・セッション2017

2017年9月30日（土）ベルサール神田 イベントホールで開催したCSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」のフォローアップを公開します。

• （1）田島 ちはるさん
• （2）田口 真行さん、金子 夕紀さん
• （3）林 大輔さん
• （4）益子 貴寛さん、松田 直樹さん
• （5）角田 綾佳さん
• （6）角田 綾佳さん、矢野 りんさん

2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップを公開します。

• （1）温故知新：DreamweaverとWeb制作シーンの20年を振り返る
• （2）Dreamweaverのコードエディター機能を進化させたBrackets
• （3）Dreamweaverで高速・楽々マークアップ
• （4）忘れがち、実は使えていない Dreamweaverの便利機能
• （5）いまどきのPhotoshopとDreamweaverとの連携
• （6）チームで使える！ ワークフローに効くDreamweaver+Bootstrap
• （7）DreamweaverでSassを使うための勘所
• （8）Dreamweaverに追加予定の機能と開発チームへの機能要望の出し方

関連リンク

• CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」 - Togetterまとめ

2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、森 和恵さん（r360studio）の『忘れがち、実は使えていない Dreamweaverの便利機能』セッションのスライドなどを公開します。

• スライド（PDF）
• サンプルファイル
• 音声
• 動画

メッセージとフォローアップ

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

「知らなかった機能がたくさんありました！ドリ使ってみます」と感想をいただけて、嬉しかったです。
大好きなDreamweaverの話をする機会をいただきありがとうございました。

フォローアップ動画を下記リンクよりご覧いただけます。時間的な制約がないので、かなりじっくりとお話していますので、合わせてぜひご覧ください。

★大阪版でのフォローアップ動画（新しい検索／置換・メディアクエリーバー・コードテーマのカスタマイズ）は、現在準備中です。
公開したらリンクを追記しますが、いち早く知らせて欲しい方は、当方Twitterにて。@r360studio へのフォローをお待ちしております。

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

【お知らせ／告知】

• メールマガジン『もりかずのウェブデジを語ろう！』の事前登録を受け付けています。
  ５月24日にプレマガジンを発行予定です。おまけ動画やプレゼント企画を考えています。

【ご質問への回答】

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

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

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

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

Q：特殊文字の検索／置換はどのようにしてますか？

特殊文字とは、© のような「HTML特殊文字」のことでしょうか？
でしたら、HTMLのソースコードとして入力する文字列で検索すれば、ヒットします。たとえば、「©」なら「©」で検索してみてください。
こちら、後日公開するフォローアップ動画に入れておきますね。
ちなみに、特殊文字をDreamweaverで挿入するには、［挿入］－［HTML］－［文字］－…のメニューから行います。

Q ：テンプレートから作ったファイルのコードはどうなっているのでしょう？HTMLにコメントがあったと思いますが……

Dreamweaver内で、共通コードを管理するために専用のコードが存在するのは、テンプレートやライブラリの機能を使うためにはいたしかたのないことです。（この専用コードは、単なるHTMLコメントですので、ブラウザへの表示に影響したりはしません…が、コードに見えてしまうのが気になるというお話ですよね）

第三者に納品する前に、必要があればテンプレートやライブラリを外してしまうことも可能です。フォローアップ動画（https://www.youtube.com/watch?v=UAdOvOz5cNc）の各項目の最後に、「適用したテンプレートやライブラリを無効にする」方法を加えましたのでご覧になってみてください。

Q ：テンプレートは、開いていないファイルも更新されますか？

はい。デモの時は、言葉足らずでしたね。失礼しました。開いてる／開いてないにかかわらず、サイト内にあるテンプレートが適用されているファイルはすべて更新されます。私の経験では、2000ファイルぐらいあっても、きちんと動いていました（CS6バージョン時）。

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

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

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

Q ：コードのカラーの変更ができなくなっているんだけど…

現在のバージョンでは、コードテーマのカラーを変更するのにlessファイルを編集するようになっています。［編集］－［環境設定］－［インターフェース］の「コードテーマ」で設定を行います。わたしのデモでは、この方法でオリジナルにカスタマイズしたコードカラーで操作をしていました。
後日公開するフォローアップ動画でご紹介しますね。

2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、轟 啓介さん（アドビ システムズ）の『Dreamweaverに追加予定の機能と開発チームへの機能要望の出し方』セッションのスライドなどを公開します。

• スライド（PDF）
• 音声
• 動画

メッセージとフォローアップ

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

Dreamweaverは昨年10月の2017年版リリースで多くの機能追加やUIのモダン化を行い、新たなステージに向かおうとしています。セッションでご紹介した現在開発中の新機能「Gitサポート」は、BootstrapやSass/LESS対応に続き、モダンワークフローをDeamweaverで実現させるために不可欠だと思います。その他にも「この機能があったら！」という声がたくさんあることを開発チームも理解しています。

昨年設置した「UserVoice」というオープンフォーラムはどなたでも自由に機能要望やバグ報告、そしてそれら投稿に対する投票（Vote）ができるようになっています。ぜひ、UserVoiceとSNSを使った「ヤシドリ作戦」も駆使して、みなさんの声を届けてみて下さい！

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

• Dreamweaver 20周年記念キャンペーン
• Google Trend - Subversion と Gitの比較
• サルでもわかるGit入門
• "郵便局メソッド" / デザイナーがGitを大好きになった5つの理由
• Dreamweaver UserVoice
  • ヤシドリ作戦「Extractをオフラインで使いたい」

2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、さんの『DreamweaverでSassを使うための勘所』セッションのスライドなどを公開します。

• スライド（PDF）
• 音声
• 動画

メッセージとフォローアップ

『DreamweaverでSassを使うための勘所』を担当したたにぐちです。

私からは、Dreamweaverが新しくサポートした Sassのコンパイル、Bourbonについてを紹介しました。

Sassや Bourbonのことを知らないと、なかなかその便利さは理解できないかも知れず、ピンと来なかった方もいるかも知れませんが、是非これを機会に学習を初めてみていただけると幸いです。CSSコーディングがグッと楽になるかも知れません。

Sassを学習するなら、少し古めの書籍ですが、こちらなどがお勧めです。

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 https://www.amazon.co.jp/dp/B00FMLD7UC/

環境設定などの章などは、Dreamweaverが準備してくれているので、すぐに Sass自体の学習を始めることができるでしょう。

質問への回答

いただいたご質問に回答します。

・リニューアル案件でもSCSSは使えますか？

使えます。SCSSは、通常の CSSと完全に互換性を保っていて、今ある「.css」の拡張子のファイルを「.scss」に変えるだけで使い始めることができます。そこから、追加するプロパティだけを SCSS書式にする事もできるので、是非活用してみてください。

・Emmetと Sassは共存できますか？

できます。SCSSは、プロパティの書式などが CSSと同じなので、Emmetを使った略語で展開していただくことができます。

・Bourbonと Bootstrapは使い分けるもの？

そうですね、両方を組み合わせて使うというケースはなさそうで、例えば新規でサイトを作りたいと言うときは Bootstrap、既存のサイトをレスポンシブWebデザインにしたいという場合は Bourbonと言った使い分けや、好みでクラス名を自由につけたいという方は Bourbonを採用するなど、選択すると良いでしょう。

もちろん、どちらも利用しないと言うケースもあります。便利さを知って、その便利さが発揮できそうなものに使っていただくと良いでしょう。

2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、松田 直樹さん（まぼろし）の『チームで使える！ ワークフローに効くDreamweaver+Bootstrap』セッションのスライドなどを公開します。

• スライド（PDF）
• サンプルファイル1
• サンプルファイル2
• 音声
• 動画

メッセージとフォローアップ

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

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

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

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

今回のセッションでデモを行ったファイル一式、また、実際にワイヤーフレームとして作ったHTMLも用意いたしましたの参考にしてみてください。

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

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

• 企業のWeb担当者に聞いてみた17の質問・サマリーレポート ? レスポンシブ採用企業は全体の8割 [2014 下半期] | Adobe Creative Station
• Official Google Webmaster Central Blog: Mobile-first Indexing
• DreamweaverとBootstrapで作るレスポンシブページ 第1回 「Jumbotronを使ったヒーローエリアのレイアウト」 | Adobe Creative Station
• ruedap/emma.css: Emma.css { emmet-like utility classes }
• funcssion - The atomic CSS library

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

Bootstrapの「jumbotron」などのclassがどのようなクラスなのか、など説明している資料はありますか？

Bootstrapのコンポーネントを調べるには、やはり公式ドキュメントを読むことが一番です。英語サイトではありますが、サンプルコードを追っていくだけでも十分理解できるかと思います。

http://getbootstrap.com/css/

DWでは、Bootstrap Sassは使えないのでしょうか？

Sassセッションでもお伝えしましたが、自前でファイルを設置すれば問題なく使用できますし、Sass版を取り入れてもライブビューでのBootstrapの機能はそのまま使用できます。BootstrapのSassファイルを自前で設置する方法は以下サイトにて詳しく解説されていますので参考にしてみてください。

https://blogs.adobe.com/creativestation/web-dreamweaver-workflow-sass-and-liveview

2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、北村 崇さん（TIMING DESIGN）、浅野 桜さん（タガス）の『いまどきのデザインアプリとDreamweaverとの連携』セッションのスライドなどを公開します。

• スライド（PDF、45ページ、14.2MB）
• デモデータ（PSD+html）
• 北村ライブラリ（SNS）
• 浅野ライブラリ（オレンジ住建）
• 音声
• 動画

メッセージとフォローアップ（浅野さん）

東京版から大阪版の2ヶ月の間にもアップデートがあるなど、Dreamweaverは日々進化しています。

終演後のやりとりやアンケートで、フルカンプを作成する必要があるのか？Photoshopで作成する必要があるのか？という話も出ましたが、コーディングや更新で困らないデータを目指すのは、どのようなワークフローやアプリでも共通の考え方だと思います。

そういった「心がけ」を実現する手段として、日々進化するアプリの新機能を知っておくというのは大事なことだなと思いました。大阪、また来たいです！

メッセージとフォローアップ（北村さん）

コメント北村

懇親会でもご質問をいただきましたが、何もDreamweaverで全てやる必要もないですし、実際に私も他のエディターと併用していますので、Dreamweaverが得意なことを知って、他のエディターとうまく使い分けることができれば、それがみんなの幸せにつながっていくのではないかと思います。

今回はデザイナー目線でできることをベースにお話をさせていただきましたが、「チームやクライアント、ユーザーなど周りのことを考える」と言うのは制作する上では誰にとっても大事なことだと思います。もしもこれまでデザイナーとコーダーとが話す機会がなかったのであれば、ぜひコミュニケーションをとって、さらに良いデザインを目指してください！かく言う私もまだまだですので頑張ります。ご参加ありがとうございました！

質問と回答

Q.CCライブラリは異なるCCIDでも使用できますか？

A.あらかじめ「共有」しておけば使用可能です。異なるIDが作成した（共有している）ライブラリには変更を加えられない点に注意してください。

Q.大きいデータがExtractパネルで表示されない・表示されにくいのですが......。（※終演後にもらいました）

A.残念ながら、アートボードやスマートオブジェクトを多用しているデータはそのような傾向があります。この点はアップデートを待ちたいところです。オフラインで使えればそのようなことも減るのかもしれません。“ヤシドリ作戦”に1票よろしくおねがいします！

Q.最後の手順について詳細を知りたい

A.最後のデモは、アドビで紹介されているワークフローを元に、簡潔なカタチへ変更してご紹介しました。手順の詳細はURLを参照してください。- レスポンシブWeb制作を効率化（Webデザイン編）

2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、生明 義秀さん（AZMDesign）、たにぐちまことさんの『Dreamweaverで高速・楽々マークアップ』セッションのスライドなどを公開します。

• スライド（PDF）
• サンプルファイル
• 音声
• 動画

メッセージとフォローアップ

セッション『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」キー、一発で大丈夫です。

2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、鷹野 雅弘（スイッチ）の『Dreamweaverのコードエディター機能を進化させたBrackets』セッションのスライドなどを公開します。

• スライド（PDF）
• Emmetチートシート（PDF、59ページ、.5MB）
• Emmetチートシート（PDF、39ページ、.5MB）
• Zen Coding（CSS）チートシート（PDF、2ページ、.5MB）
• 音声
• 動画

メッセージとフォローアップ

アンケートにいただいた質問やコメントへの返答

Emmetでできることを全部知りたいです。特殊文字の変換の仕方があれば教えてください。

• Emmet Documentation

「p*4>lorem」でLorem Ipsumが入ったりしますが、特殊文字（©とか？）はないと思います。

BracketsはAtomでも使えますか？

おそらく「EmmetはAtomでも使えますか？」ですね。こちらからプラグインをダウンロードできます。

その他のエディタのプラグインも、こちらにまとまっています。

• Download

「Generic…」の続きがメモれなかった。

？

Dreamweaverもパッケージをインストールしてカスタマイズするやり方になっていることに驚きました。

10年以上前からDMXzoneはありますよ。つまり、拡張機能でカスタマイズするという文化は存在していました。以前は、アドビのサイト内でも拡張機能が紹介されていました。

Emmetフル版のインストール

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

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

• emmetio/dreamweaver: Emmet for Dreamweaver
• Extension Manager サポート終了のお知らせ
• DMXzone Extension Manager for Dreamweaver - Extensions - DMXzone.COM
• ZXPInstaller

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

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

ご参考

• Dreamweaver CC 2017でEmmetを使い倒す | Thinking Salad
• Dreamweaver CC 2017でBracketsの拡張機能を動かす | Thinking Salad
• 作業効率を高めるDreamweaverの小技
• HTML制作が3倍速くなるDreamweaverの裏技 ─ ＠IT
• 日々の作業で困っていることアレコレ ─ ＠IT
• フォローアップ（Aquent Gymnasium #2） 動画が参考になるかもしれません。

2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、鷹野 雅弘（スイッチ）、たにぐち まことさん（H2O Space）の『温故知新：DreamweaverとWeb制作シーンの20年を振り返る』セッションのスライドなどを公開します。

• スライド（PDF）
• 音声
• 動画

メッセージとフォローアップ（鷹野から）

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

• 【レポート】Dreamweaver CS3 10周年記念イベント?夢を紡ぐ者たちへ? - ProjectDD
• Dreamweaver 10周年記念イベント - Google 検索

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

リンクや補足など

読み方、呼び方

• Dreamweaver の正式な読みは何ですか？
• ゲイリー・ライト - Wikipedia
• The People vs. Larry Flynt (1996) - Soundtracks - IMDb
• GARY WRIGHT lyrics - Dream Weaver

歴史

• MACWORLD Expo/Tokyo会場会場での注目ソフトウェア

新機能など

• Dreamweaver CC 2017 リリースの新機能の概要
• Dreamweaver CCの新機能 | スピーディに作成してコーディング
• Dreamweaverバージョン比較・履歴 | Adobe Dreamweaver CC

2017年7月15日（土）ベルサール神田 イベントホールでCSS Nite LP52「ウェブサイト制作、手を動かす前に考えておくこと」を開催し、300名弱の方にご参加いただきました。

次の6セッションで構成しました。

• なぜ、あなたのウェブには戦略がないのか／権 成俊（ゴンウェブコンサルティング）
• コンテンツマーケティングで導く目的別の勝ちパターン／山中 もとお（マジメ）
• ヒアリング LIVE ／田口 真行（デスクトップワークス）
• クライアントワークをうまく進める5つの視点／益子 貴寛（まぼろし）
• 築城10年、落城3日。 こだわりあるWebデザイン、やるからには本気で良いものを!／中川 直樹（アンティー・ファクトリー）
• マーケティングオートメーションで実現する、Web戦略の実行 〜マーケティングオートメーションは、ウェブ制作者を戦略パートナーにするか？／志水 哲也（タービン・インタラクティブ）

当日の様子は、Facebookにまとめています。

• CSS Nite - LP52

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

• CSS Nite LP52「ウェブサイト制作、手を動かす前に考えておくこと」 - Togetterまとめ

次のブログで取り上げていただきました。ありがとうございます。

• 参加の記録：CSS Nite LP52「ウェブサイト制作、手を動かす前に考えておくこと」 ? Kentan＠しろくまハンター
• CSS Nite LP52「ウェブサイト制作、手を動かす前に考えておくこと」に参加しました(1) | Study | ウェビンブログ
• CSS Nite LP52「ウェブサイト制作、手を動かす前に考えておくこと」に参加してきました ? グリニッジ株式会社
• Humore design web » CSS Nite LP52 「ウェブサイト制作、手を動かす前に考えておくこと」レポート（前編）
• Humore design web » CSS Nite LP52 「ウェブサイト制作、手を動かす前に考えておくこと」レポート（後編）
• カメレオンは夢をみる: CSS Nite lp52『ウェブサイト制作、手を動かす前に考えておくこと』に参加しました
• 「CSS Nite LP52」に参加しました | 山梨県甲府市のWeb制作、Webデザイナー BISCOM inc. （ビスコム）
• CSS Nite LP52に行ってきた | chika-sk.net

スライドや動画は、90日後くらいに公開予定です。早めに見たい方は、ビデオ参加をご利用ください。

2017年3月11日（土）にベルサール神田で開催したCSS Nite LP51「Reboot Dreamweaver」のフォローアップを公開します。

• （1）基調講演
• （2）マークアップ
• （3）Brackets
• （4）便利機能
• （5）デザインツールとの連携
• （6）Bootstrap
• （7）Sass
• （8）今後のDreamweaver

関連リンク

• CSS Nite LP51「Reboot Dreamweaver」 - Togetterまとめ
• CSS Nite LP51「Reboot Dreamweaver」が終了しました | CSS Nite公式サイト

2017年3月11日（土）にベルサール神田で開催したCSS Nite LP51「Reboot Dreamweaver」のフォローアップとして、轟 啓介さん（アドビ システムズ）の『Dreamweaverに追加予定の機能と開発チームへの機能要望の出し方』セッションのスライドなどを公開します。

メッセージと補足

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

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

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

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

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

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

• Dreamweaver 20周年記念キャンペーン
• Google Trend - Subversion と Gitの比較
• サルでもわかるGit入門
• "郵便局メソッド" / デザイナーがGitを大好きになった5つの理由
• Dreamweaver UserVoice

2017年3月11日（土）にベルサール神田で開催したCSS Nite LP51「Reboot Dreamweaver」のフォローアップとして、久保 知己さん（まぼろし）の『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をもっと良くしていきましょう。

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

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

• Compass: GitHub
• Bourbon v5.0.0.alpha.0: GitHub
• Bourbon Neat v2.0.0
• MediaqueryのMixins

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

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入ることが検討されているようなので、今後の機能追加に期待ですね。

• Autoprefixer
• AutoprefixerをWeb上で試せます

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

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

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

• HTML/CSSを爆速コーディング Emmet入門 第3回 エディタのコードヒントよりも早い！EmmetのCSSの記法とは？ | Adobe Creative Station

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に入っていれば編集できません。

2017年3月11日（土）にベルサール神田で開催したCSS Nite LP51「Reboot Dreamweaver」のフォローアップとして、松田 直樹さん（まぼろし）の『チームで使える！ ワークフローに効くDreamweaver+Bootstrap』セッションのスライドなどを公開します。

メッセージと補足

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

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

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

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

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

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

• 企業のWeb担当者に聞いてみた17の質問・サマリーレポート ? レスポンシブ採用企業は全体の8割 [2014 下半期] | Adobe Creative Station
• Official Google Webmaster Central Blog: Mobile-first Indexing
• DreamweaverとBootstrapで作るレスポンシブページ 第1回 「Jumbotronを使ったヒーローエリアのレイアウト」 | Adobe Creative Station
• ruedap/emma.css: Emma.css { emmet-like utility classes }
• funcssion - The atomic CSS library

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

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」というフレームワークを使ってもよいでしょう。

• Adobe Experience Design CC | Adobe UXプロトタイプ制作ツールのダウンロード
• Foundation | The most advanced responsive front-end framework in the world.

2017年3月11日（土）にベルサール神田で開催したCSS Nite LP51「Reboot Dreamweaver」のフォローアップとして、北村 崇さん（TIMING DESIGN）、浅野 桜さん（タガス）の『いまどきのPhotoshopとDreamweaverとの連携』セッションのスライドなどを公開します。

メッセージと補足

コメント（北村さん）

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

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

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

コメント（浅野さん）

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

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

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

Q.ビール本の正式名称

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

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

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

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

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

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

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

• レスポンシブWeb制作を効率化（Webデザイン編）

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

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

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

デモデータ

• デモデータ（PSD+html）
• 北村ライブラリ（SNS）
• 浅野ライブラリ（オレンジ住建）

2016年、CSS Niteでは38回の関連イベントを通して102セッションが行われました。 この中から、2016年のベストセッションを選出しました。