特集
» 2015年06月18日 05時00分 UPDATE

写真素材サービスAdobe Stockも:Bootstrap、Emmet、レスポンシブWebデザイン対応を強化したDreamweaver CC 2015を使ってみた (1/2)

2015年6月16日、Adobe Creative Cloudが2015年版のメジャーアップデートを果たした。本稿ではDreamweaver CC 2015と周辺のサービスをレビューした結果を紹介する。

[岡本紳吾,hatte Inc.]

 2015年6月16日、Adobe Creative Cloud(以下、Creative Cloud)が公約通り年1回のメジャーアップデートを果たした。今回さまざまな機能追加や改善、新しいサービスなどが登場している。アップデートの概要についてはニュースなどで取り上げられているので参考にしていただきたい。

 本稿では、このアップデートの中から、Web制作系アプリケーションの一つである「Dreamweaver CC 2015」と周辺サービスをレビューした結果を紹介しよう。

dwcc2015_review1.jpg Dreamweaver CC 2015の公式イメージ

レスポンシブWebデザインの機能がより強化された

 Web制作業界の最近のトピックとして必ずと言っていいほど挙げられるのが、グーグルの「モバイルフレンドリーアップデート」だ。これは、「モバイルに最適化されていないWebサイトは、PageRankが低くなりますよ」といったものだ。

dwcc2015_review9.jpg グーグル提供のモバイル フレンドリー テストを@ITで実行した結果

 このため今後のWeb制作には、ますますモバイル環境への対応が求められることになるだろう。モバイルフレンドリーなサイトを作る上で欠かせないといえるのが「レスポンシブWebデザイン」だ。

 Dreamweaverには以前のバージョンからレスポンシブWebデザインの機能が搭載されている。そして、Dreamweaverのプレビュー画面でもGoogle Chromeと互換性を持たせることで、実機検証の手間をできるだけ削減する努力を重ねてきた。

 Dreamweaver CC 2015では、Dreamweaver自体のウインドー幅にかかわらずプレビュー画面の大きさをドラッグで調整できる「スクラブ」が搭載された。これでプレビューウインドー内でウインドーの幅が変わったときの状態を自由に確認することが容易になった。

dwcc2015_review2.jpg

 また、「メディアクエリーバー」が搭載された。これは、以前はEdge Reflowなどで搭載されていたメディアクエリをビジュアライズしたものだが、コンバージョンはさらにその数値がInner Widthなのか、Outer Widthなのか分かりやすいように色分けがされるようになった。

dwcc2015_review3.jpg

 これとスクラブを組み合わせることで、「現在どのスタイルが適用されているのか」が分かりやすくなっている。

       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。