検索
連載

予備知識なしでCSS3アニメーションが捗る「CSSトランジション」機能なら、ここまでできる！：無料でCreative Cloudを使い倒せ（16）（3/3 ページ）

誰でもCSS3アニメーションが作れるDreamweaverの「CSSトランジション」機能について、概要や基本機能、使いどころなどを解説する。

Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

画像に商品の詳細が浮かび上がってくる表現を実装する

　最後に、ECサイトなどで商品の画像にマウスオーバーすることで、商品の詳細をトランジションで表示するものを実装してみることにしよう。

　上の状態が、以下のように変化するものだ。

　［トランジションを編集］パネルでは、以下のように設定されている。

CSS3のトランジションを予備知識なしで使える

　今回は、「CSSトランジション」機能にフォーカスしてDreamweaverの魅力を紹介したが、いかがだっただろうか。

　「CSSトランジション」機能は、とてもシンプルなものだ。しかし、入り口で引っかかってしまいがちなところをきちんとフォローしてくれる設計になっているので、CSSの熟練者はもちろんだが、CSSに慣れていない人にもお勧めしたい。「どういう設定をすると、どういうコードになるのか」を覚えていくと、おのずとCSSへの理解が深まってくるだろう。

　また筆者のように、さまざまなプロジェクトに参加していると、「最近ActionScriptばかり書いてたからCSS3とか忘れてしまったわ」といったことが起こる。そんな時、このパネルはリハビリに活躍してくれる。

　Dreamweaverは、Web系制作ツールの中でも歴史があるものだ。そのため、さまざまな機能が搭載されていて、その全貌を知ることはなかなか難しい。

　そしてCSS3も最近は環境がようやく追い付いてきた感じがあるが、複雑な表現は採用を見送っていた人もいることだろう。

　「CSSトランジション」機能を利用すれば、予備知識はほとんど必要なく、コードを生成できる。まずは、パネルを利用してコードを生成し、トランジションに慣れていくというアプローチもお勧めしたい。

　繰り返すが、今回作成したサンプルは筆者のGitHubからダウンロードできるようにした。簡単なサンプルなので、記事を読みながら作ってみることも可能だが、ソースコードを取りあえず見てみたい人は、GitHubから自由にダウンロードしてほしい。

　次回もDreamweaverの隠された魅力を掘り起こしていこうと考えている。

「無料でCreative Cloudを使い倒せ」バックナンバー

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る