The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
こんにちは。フロントエンドエンジニアのほりでーです。 今回は、一度ディスコン(サービス終了)になったにも関わらず、見事復活を果たしたWeb版のAdobe CC Extractというサービスについて、その終了から再開に至るまでの経緯を紹介したいと思います。 Adobe CC Extractとは DreamweaverにはExtractと呼ばれる、PSDからレイアウト情報をCSSで出力したり、画像の書き出しをPhotoshopなしで行える機能があります。 Adobe CC Extractは、このExtract機能をWebブラウザから直接利用することができる、Web開発者向けのサービスです。 PSD 変換 – HTML、CSS | Creative Cloud Extract 最大の特長は、Photoshopを起動することなく、Webブラウザから直接、直感的な操作で要素のサイズや間隔を計測したり
この記事は、2016/6/21 にポストされた See How Dreamweaver is Transforming for the Futureを抄訳したものです。 これまで19年の間、Dreamweaverは世界中のユーザーと数百万にも上るさまざまなタイプのWebサイトを築き上げてきました。まだWebの黎明期の頃からです。この長い旅路を未来に向けてさらに続けていくために、Dreamweaverはもっと速くて効率がよいモダンなツールにとてつもなく大きく変わろうとしています。 本日より、新たに生まれ変わる Dreamweaver の最初の一歩をベータ版として公開します。（Adobe IDでどなたでもログインできます。） 主なポイントは以下の通りです。 モダン化されたUI 他のアドビ製品のようにダークUIが採用されます。UIの明るさは調整可能です。また、UI全体が直感的で分かりやすくなり、
こんにちは、デザイナーのぺちこです。 先日、「Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法」という記事を執筆したところ、多くの方に見ていただけて嬉しく思っています！ ありがとうございます。 前回の記事を執筆したあと、「Dreamweaver CC 2015でどこまでできるかな？」という考えがふつと湧きました。 私自身はもともとコーディング大好きっ子なのでパチパチ打つのが好きなのですが、先日初めてビジュアルエディタをさわったので、「一切コードを書かないでどこまでできるのか」というチャレンジをしてみようかなと！ 「手打ちのほうが早いんじゃない？」と思う方も、普段触らないツールがどのくらいの力を秘めているのかを見学する気持ちで読んでいただければと思います！ そして「コーディングはできないんです……」というデザイナーさんは、まず
Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法 こんにちは、デザイナーのぺちこです。 AdobeのCC2015がリリースされて2ヶ月ほど経ちましたね！ 恥ずかしながらPhotoshop以外はまだ2015を導入していなかったため、先日どーんとアップデートに挑みました。 とはいっても、どんなアップデートがあったのか分からないままでは宝の持ち腐れ。新機能を色々と調べていたところ、いつの間にかDreamweaverがとても便利になっているらしいということを知りました。 どうやらDreamweaver CC2015では、 レスポンシブサイトのコーディングに便利なビジュアルメディアクエリーバーやリサイズバーの追加 Bootstrapのサポート Emmetの標準サポート 手軽にブラウザや実機で確認ができるデバイスプレビュー機能の追加 な
降って湧いたランディングページ制作案件 制作業をしていると、いわゆる「ブラック案件」に遭遇することが結構ある。今回、筆者のチームはLP（ランディングページ）の制作を受注した。LP制作なら数日あれば何とかなるだろうと思っていたところ、クライアントからのメールの最後に、このような一文が書かれてあった。 明日15時までにいただけますと幸いです。 もうすでに18時を回っている。22時間で作ってお渡ししろというわけだ。全くもって幸いじゃない。これは、もう災いである。 デザイナーが高速でデザインを終えてくれて、運良くクライアントの承認がすぐに降りた。後はコーディングをしていくだけだ。降って湧いたブラック案件とはいえ、きちんと仕事はこなしておきたい。そして、できることならちゃんと寝たい。作業時間を短縮しつつ、きっちりクオリティは担保できる、そんな夢のようなツールがあればいいのに、残念ながらそう都合が良い
どうもこんにちは、ハラです。 時間短縮・作業効率化を目指し、今日もがんばっております。 さて。 webデザイナーの方なら、置換や一斉置換など経験したことがある方が多いと思います。 今回はDreamweaverで正規表現を使用して一斉置換する方法を紹介したいと思います。 最低限覚えておきたい正規表現 perlや.htaccessなどで使用される正規表現なのですが、 Dreamweaverで置換する際に、覚えておきたい正規表現は最低2つだけ。 (.*)と$1です。 ・・・おぼえていただけましたか？ では、実際に何か置換してみましょう。 <select> <option value=”きらきら星”>hoge</option> <option value=”夏祭り”>hoge</option> <option value=”海”>hoge</option> </select> hogeをvalue
4月からスタートする、 子どもには見せられない戦隊ヒーロードラマ「乾杯戦士アフターＶ」をひそかに心待ちにしているmackyです。 そんな今日は、Dreamweaverのデザインビューをつかった便利なコーディングを紹介します。 原稿を流し込むなど、繰り返し作業ではあるものの正確にすすめる必要があるときなどにミスなくスピーディーに終わらせられるテクです。 デザインビューを使ったコーディング 基本となるテキストのコピー＆ペースト 原稿を秀丸などのテキストエディタにコピーします。 必要に応じて以下のルールで改行を挿入します。 ポイントとして、改行1つで<br />、改行2つでテキストが<p></p>でくくられます。 リストに変換したい デザインビューで変換したいテキストを選択します。 その後ショートカットキーでul、ol、dlに変換！ ul ol dl ちなみに、入れ子も簡単にできちゃいます。 入
Dreamweaver CC が公開されてから、わずか 2 ヶ月あまりですが、早くも新機能盛り沢山！ のアップデートが公開されました。Dreamweaver CC をインストール済みなら Creative Cloud アプリ経由で通知されるようです。 Dreamweaver のライブビューと言えば、ずっと WebKit が使われていましたが、今回から CEF ベースになりました。つまり、他の Edge 製品と同じく Chrome とコードベースを共有する描画エンジンへのスイッチです。 これにより、パフォーマンスはもちろん、表示機能や開発者向けの機能にも （付随的に或いは自動的に） 更新がが行われています。使ってみて、これはバージョン 14 ではなくて、13.1 だったよね？ とわざわざ確認してしまいました。 といっても、Chome と同レベルの本格的な開発者ツールにいきなり変身した訳では当
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
僕がCSSを書くときに使っているエディタはDreamweaverです。 Sassを使うにあたり、拡張子が違うSassのファイルはそのままではCSSファイルとして認識してくれないので、コードヒントやハイライトが使えません。 なので、Dreamweaverの設定ファイルを変更しました。 環境は「Windows 7 Professional 64bit」の「Dreamweaver CS6」です。 参考にした記事 SassとDreamweaverのコードヒントでCSSをさらに効率的に さて、僕の環境だと以下のパスに設定ファイルがありました。 C:\Users\{ユーザ名}\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\DocumentTypes\MMDocumentTypes.xml 「MMDocumentTypes.xml」を
これまでかたくなに Dreamweaver を利用していたのですが、CS6 にアップデートしたあたりから動作が重くなり、直近ではもーやってられんとなりましたので重い腰をあげて Sublime Text 2 デビューをはたしました。 これでやっと僕にも春が来るのかなとワクワクしております。 参考にした記事 以下あたりを読みました。 基本 Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog Sublime Text2の複数カーソルの使い方 #SublimeText2 – Qiita [キータ] SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ | 濃紺ピッチャー Emmet系 Sublime Text 2のEmmetでdivの閉じタグにコ
Web制作の現場では、日々新しいデザインのインスピレーションを得るためにギャラリーサイトを活用しています。しかし、数多くあるギャラリーサイトの中から、自分の目的に合った適切なサイトを見つけ出すのは意外と難しいものです。 この記事では、複数の...
こんにちは、デザイナーのハルエです。 以前のブログで、Dreamweaverのオススメ拡張機能についていくつか紹介させていただいたのですが、今回はDreamweaverに標準搭載されている隠れた便利機能についてご紹介させていただきます。 CS6から導入されてまだまだ浸透されていない機能や、搭載歴は長いのにあまり知られないまま謙虚に過ごしている機能がたくさんあると思うんです。 CSSトランジション Dreamweaver CS6のCSSトランジションを使用すると、CSS3によるtransition効果がコードを記述することなく簡単に設定できます。 ベンダープレフィックス(-webkit-など)も自動で生成してくれます。 使用手順 1.［ウィンドウ］→［CSSトランジション］パネルを開き、追加ボタン［＋］をクリックします。(htmlファイルを選択した状態にしておかないと、選択できません。) 2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
