素のDwでも高度にWEB管理できる（◯）　vs　素のVSCodeは魅力ゼロ（✕）SSHログインによるシェル作業がない（✕）　vs　素の状態でもターミナルが使える（◯）１つのウインドウで複数サイト管理（◯）　vs　サイトごとに別ウインドウ（◯）ファイル転送関連GUIの完成度が高い（◯）　vs　「SFTP」拡張機能で近づいたが及ばない（△）もう発展しない？（ターミナル欲しい）（✕）　vs　活発に開発中（◯）エディタ部分をVim化できない（？）（✕）　vs　拡張機能でVim化 and ターミナルでVim（◯）コードビューとデザインビューの２Way（◯ → △）　vs　できない（✕ → △） そういえば私の「初めてのHTML」は秀丸エディタだった。1996年ごろ所属団体での「会員企業・店舗のインターネットモールを立ち上げよう」的企画で初めてHTMLファイルに触れた。フロッピで配られた雛形HTMLソ

Dreamweaverユーザーあるあるです。 設定を初期化してしまいました。 コーディングしてる時はかなり集中してることが多いです。ガガーッとコーディングして、「よっしゃブラウザで確認だ」→よしOK、次！ みたいなノリで勢いよくやりたいものです。 この「よっしゃブラウザで確認だ」ってときに、いつもはショートカットを使っていたのですが、ひょんなことがきっかけで、Dreamweaverの設定を初期化したがために、ショートカットがきかなくなってしまいました(つд∩) ｳｴｰﾝ ショックです。イライラします( ﾟДﾟ) Dreamweaverでブラウザプレビューする方法 ブラウザでプレビューするには、ファイルの画面右上の、地球マークをクリックしてメニューを出すか ファイルメニューからブラウザプレビューを出すか どちらかです。 Macの場合です。 画面にもででますが、デフォルトでショートカットキーが

ワタシは Scripting News 経由で知ったが、Wordpress の開発者、そして Automattic の創業者として知られるマット・マレンウェッグのツイートがなんとも味わい深い。 It's amazing how much development, how many startups, and how much funding is going into rebuilding Microsoft FrontPage and Macromedia Dreamweaver as a web app. (Gutenberg included.)— Matt Mullenweg (@photomatt) April 5, 2022 かくもたくさんの開発、スタートアップ、そして資金が Microsoft FrontPage や Macromedia Dreamweaver をウェブアプ

Dreamweaverでは出力先は一つしか指定できない 以前書いた記事「ほぼDreamweaverだけでWordPressのテーマ制作をしてる話」で、 ソースフォルダと出力フォルダはサイト単位の設定となります。 テーマごとやプラグインごとに別のフォルダを指定することはできません。 と書いていたのですが、さっきふと思いついてやってみたら出来てしまったので紹介しておきたいと思います。 （みんな知ってることだったらごめんなさい・・・） 下記のようなフォルダ構成があったとします。 一つの管理サイト内で静的サイトとWordPressサイトが混在していて、それぞれでSassを使いたいと思ったらどうしますか？ root └static └sass └css └wp └wp-content └themes └sample └sass └css DreamweaverのCSSプリプロセッサ設定では、ソースフ

DreamweaverではじめるWebクリエイターのためのGit入門 Webクリエイターには敷居が高かったGit 「バージョン管理システム」は、ファイルの変更履歴を管理するしくみで、これまでの変更内容を確認したり、変更前の状態に戻す機能を持っています。ファイルの数が増えたり、開発者の数が多いときには、特に便利です。 Git（ギット）は、そうしたバージョン管理システムの1つで、現在ではソフトウェア開発者を中心に、広く利用されています。しかし、Web制作者には「名前は知っているが、自分はあまり利用していない」という方も多いのではないでしょうか。 Gitは、ソフトウェア開発の流れを想定して設計されています。そのため、Web制作者にはちょっと利用の仕方がイメージしにくい面があります。ですが、今回Adobe Dreamweaver CC（以下Dreamweaver）がGitの操作に一部対応し、現在も

Adobe DreamweaverがCC 2017版から、正式にGitをサポートするようになったというニュースを読んで、さっそく設定してみました。これまでSourceTreeで管理していたため、Dreamweaverの使い勝手になれるまで、すこし時間がかかりそうですが、ちゃんと既存のリポジトリと統合することもできて、思っていたよりも、活用できそうです。同じ環境のMacで、導入に迷っている方の参考になれば、幸いです。 Mac環境：iMac (Retina 5K, 27-inch, Late 2015)/macOS Sierra 10.12.5 Dreamweaver：CC 2017 Macに付属のGitを確認する MacOsXの場合、最初からインストールされていると思います。ターミナルで確認してみましょう。ターミナルを立ち上げて、「 git –version 」と入力すると、バージョンが表示

SVGのイメージマップでレスポンシブにも対応。Dreamewaverで効率的なイメージマップ作成 画像内の特定の箇所をクリック可能にするイメージマップ。ユーザーとして、誰もが一度は使用したことがあるのではないでしょうか。 しかし、開発する側にとっては、イメージマップのコードは直感的に記述・理解できるものではないという難点があります。 また、昨今は、レスポンシブデザインへの対応や、マウスオーバー時のアニメーション等、標準イメージマップでは対応できない要件を求められることも多くなりました。 そこで活躍するのが、Dreamweaver CCです。「Web標準対応の統合制作環境」と言われる通り、Dreamweaverはイメージマップを作成するのにも最も適したツールで、柔軟、かつ効率的に開発を行うことが可能です。 本記事ではDreamweaverの便利な機能を利用しつつ、まずmap・area要素を使

Webの勉強を始めたのなら、迷わずDreamweaverを使ってくださいお願いだから！という話です。 未経験からWebデザインの勉強を始めていると、ネットや学校などで、いろんな情報が一斉に入ってきます。 特に、コーディング用のエディターは何を使うか、という議論は尽きません。 Twitterのタイムラインには、 「Sublime Textが鉄板だろ」 「いや、私はSublimeはとうの昔にやめて、今はAtomだよ」 「は？時代遅れだろ？いまはPhpStormだわ」 「ぜんぜんBracketsで十分だよ〜」 「吾輩はVisual Studio Codeである」 と、みんなお気に入りのエディターを語っていて、もはや収拾がつきません！ てゆうかもう、ドリちゃんでいいから！！！！！！ なんの躊躇もなくDreamweaverをバリバリ使っていいから！！！！ ドリちゃん（Dreamweaver）は、かつ

（2018年11月1日追記：CSSプリプロセッサ―の設定で複数フォルダへの出力方法を追記しました） ※この記事は「WordPress Advent Calendar 2017」の17日目のエントリーです。 2017年の WordPress Advent Calender はQiitaだからか、参加者はプログラマ・エンジニアの方が多いようですね。 私は正直言って半分くらいの記事は内容が全然理解できません・・・私が使ってるWordPressと他の方が使ってるWordPressって本当に同じものなんだろうかと思っています（笑）。 さて、この記事は2017年10月に行った「WordBench京都 in 舞鶴」での私のセッションの後半部分を抜き出して詳しくしたものになります。 WordBenchではDreamweaver愛を語り過ぎましたので、今日は時間が無くなって駆け足になった後半の運用部分を詳し

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法 こんにちは、デザイナーのぺちこです。 AdobeのCC2015がリリースされて2ヶ月ほど経ちましたね！ 恥ずかしながらPhotoshop以外はまだ2015を導入していなかったため、先日どーんとアップデートに挑みました。 とはいっても、どんなアップデートがあったのか分からないままでは宝の持ち腐れ。新機能を色々と調べていたところ、いつの間にかDreamweaverがとても便利になっているらしいということを知りました。 どうやらDreamweaver CC2015では、 レスポンシブサイトのコーディングに便利なビジュアルメディアクエリーバーやリサイズバーの追加 Bootstrapのサポート Emmetの標準サポート 手軽にブラウザや実機で確認ができるデバイスプレビュー機能の追加 な

予備知識なしでCSS3アニメーションが捗る「CSSトランジション」機能なら、ここまでできる！：無料でCreative Cloudを使い倒せ（16）（1/3 ページ） Dreamweaverの「CSSトランジション」機能とは 本連載「無料でCreative Cloudを使い倒せ」では以前、「Adobe Dreamweaver CC」（以下、Dreamweaver）の「CSSデザイナー」機能を紹介したが、DreamweaverのCSS関連の機能としてもう1つ注目すべきものが、「CSSトランジション」だ。 「トランジション」とは画面切り替え効果のことを指す言葉だが、CSS3ではより広い意味で使われており、簡単にいうと「ちょっとしたアニメーション」を作ることができる機能のことだ。 今回は「CSSトランジション」機能を利用して、できれば面倒なコードを一切書かずに、最近よく見掛けるようになったWeb表

こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。 何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。 つまりは「効率化」することが必須になるわけです。 そこで今回は、アドビさんにお聞きした「WebデザイナーがDreamweaverのExtract機能を使って、PSDファイルから効率よくデザインする方法」をご紹介させていただきます。 そもそもExtract機能とは？ Dreamweaverは聞いたことあるけど、Extract機能ってなんぞ？！と、Extract機能を初めて聞いた方は首を傾げることでしょう。 以下に公式サイトの文言を引用させていただきます。 コンテキストに応じたコ

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、「Adobe Dreamweaver CC」（以下、Dreamweaver）をメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。さまざまなモダンな技術としては、「Sass」「Compass」「Emmet」（旧、Zen-Coding）を想定している。 今回は、Dreamweaverの概要と最新版Dreamweaverの新機能、WordPressの概要、Dreamweaver＋WordPressの環境構築を行う際に必要な初期設定などを紹介していこう。 そもそもDreamweaverとは、なぜDreamweaverを使うのか DreamweaverはWebサイト／Webアプリケーションの制作ツールだ。HTMLエディタという見方をすれば非常に動作が重そうで、他の軽量なエデ