SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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+クリックで選択、右クリックメニューから適用をクリックします。

次のページ
「レスポンシブWebデザイン」とは?

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

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

 株式会社スイッチ Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、書籍の企画や編集、スクールなどのカリキュラム開発も手がける。 2005年からCSS Niteを主宰。日本全国、および海外に展開し、260回を超える関連イベントを通し、のべ36,000名を超える方が参加している。 テクニカルライターとして20冊以上の著書を持ち、総販売数は14万部を超える。主な著書に『よくわかるDreamweaverの教科書』(共著、マイナビ)、企画編集を行った書籍に『現場のプロから学ぶXHTML+CSS』(マイナビ)など。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6574 2013/01/15 17:33

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング