Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

サンプルで学ぶDreamweaver CS6!「レスポンシブWebデザイン」に挑戦してみよう

マルチデバイス対応のサイト制作者必見!Dreamweaver CS6概説

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/05/16 14:00

 バージョン5以降より、HTML5、CSS3、スマートフォンをはじめとする最近のサイト制作に必要な新しいスキルの支援機能に力を入れているDreamweaver。最新のDreamweaver CS6では、デバイスやブラウザウィンドウの横幅に応じてレイアウトが変更されるレスポンシブWebデザインを実現する「可変グリッドレイアウト」機能が目玉です。本稿では「可変グリッドレイアウト」「CSSトランジション」など、Dreamweaver CS6の新機能を使うワークフローを、サンプルを作成しながら紹介していきます。

目次

Dreamweaverとは

 Adobe Dreamweaver(以下、Dreamweaver)は、Webページを作成・更新・管理するためのソフトウェアです。Dreamweaverにはいくつかの編集モードがあり、コードビュー(HTMLコードやCSS、JavaScriptファイルなどコードを直接編集できる画面)、デザインビュー(Webページをブラウザで表示した形に近い状態で編集できる画面)の両方で編集できます。

 さらに、Dreamweaver CS4で登場したライブビュー(レンダリングエンジンに利用しブラウザに非常に近い状態での表示確認ができる画面)では、SafariやGoogle Chromeと同じWebkitというレンダリングエンジンを採用しており、実際の画面を確認しつつ作業を進めることができます。

 デザイナーにとっては、HTMLやCSSのコードをオートコンプリート(自動補完)してくれる機能である「コードヒント」や、視覚的に確認しながら編集ができる機能、テンプレートやライブラリといった作業を効率化させる機能などがあり、プログラマーにとっても、サーバーサイドスクリプトの補完やデータベースとの接続などの便利な機能があります。

 この記事の内容は、最新のCS6の体験版にて実際にお試しいただけます。下記サイトよりダウンロードしてお使いください。

素材辞典シリーズ 「サンプル画像」について

 本書籍サンプルファイル中のウォーターマーク入りサンプル画像(以下、「本画像」という)は、素材辞典シリーズの製品と仕様が異なります。本画像を営利・非営利を問わず、本記事を用いた学習用途以外の目的にご使用になる場合は、別途、製品版の素材辞典シリーズをご購入ください。

Dreamweaver CS6の新機能

 Dreamweaver CS6の主な新機能/改良点は次の通りです。

可変グリッドレイアウト

 「レスポンシブWebデザイン」を制作する上で強力な支援ツールとなる機能です(追ってサンプルで解説します)。

CSS3アニメーション

 CSS Transitionを使ったアニメーションを[CSSトランジション]パネルで設定で可能です(追ってサンプルで解説します)。

[jQuery Mobileスウォッチ]パネル

 選択した要素にjQuery Mobileテーマ(カラー)やアイコンを適用できます。

FTPクライアント機能の改良

 アップロード速度が大幅に向上しています。アップロード中にアイコンが表示されたり、マウスオーバーするとツールチップにステータスが表示されます。

複数のクラスを適用可能

 複数のクラスを適用できるようになりました。[プロパティ]パネルから、または、タグセレクター、[フォーマット]メニュー[CSSスタイル]→[複数のクラスを適用]。タグセレクタで要素を選択後、[CSSスタイル]パネルで適用したいクラスをクリック、command+クリックで選択、右クリックメニューから適用をクリックします。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 鷹野 雅弘(タカノ マサヒロ)

     株式会社スイッチ  Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、書籍の企画や編集、スクールなどのカリキュラム開発も手がける。  2005年からCSS Niteを主宰。日本全国、および海外に展開し、260回を超える関連イベントを通し、のべ36,...

  • 松田 直樹(マツダ ナオキ)

     株式会社まぼろし  当初身を置いていたゲーム業界にて、デザイナーにPhotoshopを教えてもらい、デザインの持つ力に驚愕した後、Web業界に転身。  2008年に株式会社TSUDUMIを設立、現在に至る。テーマパークの開設運営で培った企画力を生かし、デザイン、マークアップ、プログラムといった...

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5