サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
adobe-html5.jp
このページでは、アドビが取り組んでいる Web 標準の推進や、アドビが提供する Web 制作に役立つツールやサービスに関連したサンプルをご紹介しています。 > Adobe HTML5 特設サイト
このページでは、アドビが取り組んでいる Web 標準の推進や、アドビが提供する Web 制作に役立つツールやサービスに関連したサンプルをご紹介しています。
Dreamweaver CS6 と HTML5 で始めようスマートフォン&タブレット対応 Dreamweaver は、デスクトップ、スマートフォン、タブレットに向けて、W3C 標準に準拠したサイトを視覚的な操作とコーディングの両方で制作できる、業界最先端の Web オーサリングツールです。 本文へ Adobe Dreamweaver CS6 が発表されました。Dreamweaver は、デスクトップ、スマートフォン、タブレットに向けて、W3C 標準に準拠したサイトを視覚的な操作とコーディングの両方で制作できる、業界最先端の Web オーサリングツールです。Dreamweaver CS6 には、デスクトップからモバイルデバイスまで様々な画面に適応するコンテンツをデザインするための機能が加わりました。 この記事では、Dreamweaver CS6 の主な新機能や強化された機能の概要を紹介します
Dreamweaver CS5.5 と HTML5 で始めようスマートフォン&タブレット対応 マルチデバイス時代を見据えて HTML5 の活用に対する関心が高まっています。本サイトは最新事例を通じて様々な業界における取り組みや課題をお伝えします。 本文へ 2011 年 12 月 1 日の就活解禁に合わせて、自分の未来を描くキャンバスをテーマとする「サイバーエージェントの就職情報サイト 」が公開された。PC 版は Flash、スマホ版は HTML5 と異なる技術を使いながら、それぞれ同様のコンテンツが提供されている。 スマホサイト用の HTML5 アニメーションの作成には、現在 Adobe Labs に公開中の Edge プレビュー 3 が使用された。また、Facebook や Twitter との連携も目を引く点だ。これらの企画や制作はどのように進められたのだろうか。今回は、実際に制作に関
Dreamweaver CS6 と HTML5 で始めようスマートフォン&タブレット対応 Adobe® Dreamweaver® は、マルチデバイス時代に対応すべく HTML5 や jQuery Mobile といった最新の技術をサポートし、更に強力な Web 開発ツールとなりました。本サイトでは Dreamweaver の便利な使い方をご紹介します。 本文へ プロパティインスペクタを使って CSS を手軽に追加・編集しよう Dreamweaver のプロパティインスペクタを使って、閲覧中のページに CSS スタイルを手軽に追加したり編集する方法をご紹介します。 ライブコード機能を使って、閲覧中の HTML の構造を確認しよう Dreamweaver のライブコード機能を使って、閲覧中のページのコードを確認する方法をご紹介します。最近は、JavaScript の使用により、ソースコードとブ
Dreamweaver CS5.5 と HTML5 で始めようスマートフォン&タブレット対応 マルチデバイス時代を見据えて HTML5 の活用に対する関心が高まっています。本サイトは最新事例を通じて様々な業界における取り組みや課題をお伝えします。 本文へ 衣料品、生活雑貨、食品に至るまで、多様な商品を展開している無印良品。過剰な装飾を削ぎ落したシンプルなデザインのプロダクトは、多くのユーザーから支持されている。現在では日本国内のみならず、海外にも店舗展開され、無印良品ブランドは世界でも通用することが証明された。 無印良品の製品には、実際に商品を使用しているユーザーからの意見を取り入れた物が多い。そのため、ユーザーとのコミュニケーションがコンテンツ作りのメインテーマとなっている。今回は無印良品を展開する 株式会社良品計画を訪れ、同社の Web 制作について話を伺った。 無印良品の Web サ
Dreamweaver CS6 と HTML5 で始めようスマートフォン&タブレット対応 Adobe® Dreamweaver® は、マルチデバイス時代に対応すべく HTML5 や jQuery Mobile といった最新の技術をサポートし、更に強力な Web 開発ツールとなりました。本サイトでは Dreamweaver の便利な使い方をご紹介します。 本文へ Adobe Dreamweaver CS6 体験版 ダウンロード サンプルコードのダウンロード 今回は、jQuery と CSS を使ってごく簡単なクロスフェード効果を実装する方法をご紹介します。Dreamweaver CS 5.5 の CSS パネルを使うとアニメーションも簡単に設定できます。制作するのは写真ギャラリーです。 それでは実際に必要なコードの編集を行います。サンプルコードをダウンロードして、その中に含まれる index
Dreamweaver CS6 と HTML5 で始めようスマートフォン&タブレット対応 Adobe® Dreamweaver® は、マルチデバイス時代に対応すべく HTML5 や jQuery Mobile といった最新の技術をサポートし、更に強力な Web 開発ツールとなりました。本サイトでは Dreamweaver の便利な使い方をご紹介します。 本文へ
Dreamweaver CS6 が登場! Dreamweaver CS6 は、HTML5・CSS3・jQuery Mobile・PhoneGap といった最新の技術やフレームワークをサポートし、より一層強力なマルチデバイス向け開発ツールとなりました。
本サイトのスマートフォン専用サイトが公開された。 既に、互換サイトとしてデバイス表示に対応していたサイトを、改めてスマートフォン専用に作り替えたポイントはどこにあったのか。実際に制作を担当したカヤック意匠部のお 2 人にお話を伺った。 操作性と情報内容を最適化 -- 以前から公開されていたPC互換サイトも十分見やすかったと思いますが、新しく公開されたスマートフォン専用サイトでは、どこが変わったのでしょうか? 互換サイト(左)と、専用サイト(右) 「スマートフォンは、直接指で触って直感的に操作できる所が一番の特徴です。専用サイトではそれが生かせるようネイティブアプリっぽい UI になっています。例えば、ページ遷移の際に滑らかなトランジションを提供して、普段のアプリと同じ感覚でページをめくれるようにとか。あとは、ヘッダーの左側に “戻る” ボタンを配置しました。これもスマートフォンユーザーには
スマートフォンサイトの構築に積極的に取り組み、DynamicViewer など既にいくつかの事例も手がけた大日本印刷株式会社 C&I 事業部とデジタルコムに、最近の、サイトのスマートフォン対応に関する顧客の状況についてお話を伺った。“今年になってから、サイトのデバイス対応についての問い合わせが多くなった印象” とのことで、制作業務にも大きな影響が出ているそうだ。 クライアントも目を向け始めたデバイス対応 -- スマートフォンサイトに取り組みを始めたのはいつ頃からでしょうか? 「1 年半くらい前です。iPhone 3GS が出たころまずはチーム内で調査が始まりました。 HTML5 を始めたのは去年の春からです。まだデスクトップ環境ではブラウザを指定できないと使い物にならなかったのですが、iPhone 限定であれば使えるよね、ということで。そこに Android も出て来たので、スマートフォン
レスポンシブなデザインと互換化について Web サイトのマルチデバイス対応には、1 つの HTML をマルチデバイスに対応させる "互換化" と、PC 用とは別途デバイス専用の HTML を制作する "最適化" の 2 つの考え方があります。本サイトは、"レスポンシブなデザイン" を実装した、互換化によるマルチデバイス対応のサンプルになっています。 レスポンシブなデザインは、1 つの HTML ファイルを、スマートフォンからデスクトップまで、さまざまな種類の画面に積極的に適応させる新しいデザインです。表示される画面に応じて、カラムの幅や数、そしてコンテンツのレイアウトも動的に変化します。レスポンシブなデザインは、"リキッドレイアウト" と HTML5/CSS3 の新機能である "メディアクエリ" を組み合わせることで、このような可変レイアウトを実現します。 メディアクエリ レスポンシブなデ
Dreamweaver CS6 と HTML5 で始めようスマートフォン&タブレット対応 HTML5 特設サイトは、HTML5/CSS3 やモバイルデバイスの活用を検討している方に最新情報をお届けするアドビ公式サイトです。 事例から Adobe®Dreamweaver® CS6 を始めとする制作環境まで、幅広い観点から Web の新しい方向性をお伝えします。 本文へ 本サイトについて 本サイト自体が、マルチデバイス対応のレスポンシブなデザインの事例として制作されています。表示される画面の大きさに応じて、閲覧し易い様にレイアウトが変化します。詳しくは「互換化とは」をご覧ください。 jQuery Mobile を使ったスマートフォン向けの専用サイトも公開中です。
このページを最初にブックマークしてみませんか?
『Adobe HTML5 特設サイト Dreamweaver® CS6 と HTML5 で始めようスマートフォン&タ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く