Dreamweaverでコードヒントを表示する方法 DreamweaverでCSSを書いている時に、コードヒントが途切れて困ることがあったのでショートカットキーを調べました。 例えば、 display:inline;と入力したいのに、誤って display:inherit;となってしまった場合、inheritを削除しますよね。 すると、もうコードヒントが表示されなくなってしまいます。 地味に面倒。 Windowsの場合はctrl + スペースWindowsの場合はこちらのブログに書かれていました。 キャプチャ画像もたくさんあってわかりやすい！ 画面のような状態のときに、「ctrl+スペース」で、いつでもどこでも、コードヒントを出すことができます。htmlでも一緒で、このキーで、途中で消えてしまったコードヒントを出すことができます。 効率アップ！Dreamweaverのショートカットキー M
こんな感じのよくあるtableを書く時も、 #testArea02>.testMain>table.testTable>tbody>(tr>th{サンプル$$}+(td{テキスト$$}*3))*2これだけでOK！ もちろんCSSでもEmmetはバリバリ使えます。 これも後ほど説明しますね☆ ミスタイプが激減たった数文字でコードが書けるので、絶対的にタイプミスが減ります。 例えば、CSSでボタンの角を丸くしようとborder-radiusを5pxずつかけるとします。 まず間違えることはないとは思いますが、 [borderradius][border-radeus]など、単語はわかっていても「ミスタイプに気が付かなかった」と言うことはよくある話です。 「border-radiusを5pxずつ」をEmmet仕様で書いたら bdrs5となります。数字を入れてもたった5文字になりましたね☆ それでは
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
パスワードがわからなーい、ドリームウィーバーのサイト設定には残っているんだけど……という時のために。 準備 変換されたパスワードの取り出し DreamWeaverのサイト設定は.steファイルに出力することで他の環境へサイト設定を移行することができます。この中にパスワードも含まれていますが、変換されており、元の文字列がなんだったかはすぐにわかりません。そのため、変換する必要があります。 DreamWeaverのサイトの管理からサイト設定を書き出して.steファイルを保存する .steファイルをテキストエディターで開く pw=で検索してパスワードが変換された文字列を見つけてコピーする（pw="716F5F6878"みたいなの） このページのフォームに貼り付けて、元の文字列に変換する 実践 変換された文字列をペーストして「変換する」ボタン 変換前の文字列
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 Dreamweaverで「ファイル比較」を使いたいところから色々と調べたんですが、結局のところ「Text Wrangler」でいいんじゃないの？ という結論ありきでまとめておきます。 Developer toolsやXcode toolsのアプリケーション群をインストールすれば、「FileMerge」というファイル比較のアプリがインストールされます。 しかし、「FileMerge」はコマンドなどを理解して設定できる人でないと、日本語の内容のファイル比較ができるようにできません。 ではアプリケーションでファイル比較がついて
こんにちは、@cappeeです。 リカバリ後、後回しにしていたDreamweaverの拡張機能のことを思い出して色々と調べてみました。 調べたところたくさん記事はあるのですがDreamweaverの対応しているバージョンが古かったり、CS6にはすでにデフォルトで機能があったりと整理が必要そうだったので、Dreamweaver CS6 でオススメの拡張を自分なりにまとめました。他にオススメがあればぜひ教えてください！ コーディング効率化：Zen-Coding なにわともあれまずZen-Codingは入れておかないと始まらないですね。コーディングの効率化には必須の拡張です。 下記の一覧より「Zen Coding for Dreamweaver（バーション）」をダウンロードし、mxpファイルをダブルクリックすると「Adobe Extension Manager」が開くので、承諾してインストールす
Fireworks CS6には、jQuery Mobileのテーマを作成する機能が追加されました。CS5／CS5.1向けに同様の機能を提供する拡張機能「Fireworks CSS3 Mobile Pack」がAdobe Labsにて提供されていますが、CS6では日本語化されているなどの違いがあります。 アイコンの変更 早速、jQuery Mobileのテーマを作成してみましょう。メニューから［コマンド］→［jQuery Mobileテーマ］→［新規テーマを作成］を選択すると、jQuery Mobileテーマ作成用の画面が表示されます。jQuery Mobileのデフォルトテーマには5つのスウォッチ（カラーバリエーションなもの）が用意されており、Fireworksでも初期状態では5つのスウォッチがページとして定義されています。さらに、スウォッチで共通に利用するアイコンなどを設定するページ、テ
Dreamweaverとは Adobe Dreamweaver（以下、Dreamweaver）は、Webページを作成・更新・管理するためのソフトウェアです。Dreamweaverにはいくつかの編集モードがあり、コードビュー（HTMLコードやCSS、JavaScriptファイルなどコードを直接編集できる画面）、デザインビュー（Webページをブラウザで表示した形に近い状態で編集できる画面）の両方で編集できます。 さらに、Dreamweaver CS4で登場したライブビュー（レンダリングエンジンに利用しブラウザに非常に近い状態での表示確認ができる画面）では、SafariやGoogle Chromeと同じWebkitというレンダリングエンジンを採用しており、実際の画面を確認しつつ作業を進めることができます。 デザイナーにとっては、HTMLやCSSのコードをオートコンプリート（自動補完）してくれる機
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応 Dreamweaver は、デスクトップ、スマートフォン、タブレットに向けて、W3C 標準に準拠したサイトを視覚的な操作とコーディングの両方で制作できる、業界最先端の Web オーサリングツールです。 本文へ Adobe Dreamweaver CS6 が発表されました。Dreamweaver は、デスクトップ、スマートフォン、タブレットに向けて、W3C 標準に準拠したサイトを視覚的な操作とコーディングの両方で制作できる、業界最先端の Web オーサリングツールです。Dreamweaver CS6 には、デスクトップからモバイルデバイスまで様々な画面に適応するコンテンツをデザインするための機能が加わりました。 この記事では、Dreamweaver CS6 の主な新機能や強化された機能の概要を紹介します
Entwickeln Sie Kompetenzen, die Sie beruflich voranbringen Lassen Sie sich von der einzigen Lernplattform auf dem weltweit größten Talent-Marktplatz dabei beraten, wie Sie die entscheidenden Kompetenzen für Ihr berufliches Vorankommen entwickeln. Gratismonat starten Für Ihr Team erwerben Personalisieren Sie Ihre Lernerfahrung Legen Sie Ihre beruflichen Ziele fest und nutzen Sie Kompetenztests, um
Dreamweave CS5 のアップデートをかけたところ、メニューバーその他が文字化けしてしまう事態に。 かなりアタフタしてしまったのですが、CS商品群ではアップデート後の文字化けは稀にあるようです。 解決方法を自分メモ兼情報共有として掲載しておきます。 Mac OS X・CS5環境での対処法 1、まずはバックアップ Dreamweaverを終了し、「ユーザー」→「ライブラリ」→「Application Support」→「Adobe」→「Dreamweaver CS5」→「ja_JP」→「Configuration」 にアクセスし「Configuration」フォルダを任意の場所にバックアップしておきましょう。 2、「Menus」フォルダの削除 「ユーザー」→「ライブラリ」→「Application Support」→「Adobe」→「Dreamweaver CS5」→「ja_JP」→
Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応 HTML5 特設サイトは、HTML5/CSS3 やモバイルデバイスの活用を検討している方に最新情報をお届けするアドビ公式サイトです。 事例から Adobe®Dreamweaver® CS6 を始めとする制作環境まで、幅広い観点から Web の新しい方向性をお伝えします。 本文へ 本サイトについて 本サイト自体が、マルチデバイス対応のレスポンシブなデザインの事例として制作されています。表示される画面の大きさに応じて、閲覧し易い様にレイアウトが変化します。詳しくは「互換化とは」をご覧ください。 jQuery Mobile を使ったスマートフォン向けの専用サイトも公開中です。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog いっっっっっつも「どこだっけなーーー」ってなるので、メモ。 Dreamweaver のテンプレートを適用したページは、テンプレートの方で設定した「編集可能領域」の中身しか編集できません。 でも、例えば「body 要素に id を設定して、ページごとやカテゴリーごとに変えたい」なんてこともよくある話で、じゃあそのために編集可能領域の範囲を広げたり新たに追加したりするのも面倒ってもの。 そんなときは、特定の要素の属性を各ページで変更できるようにテンプレートで設定できます。 というワケでその手順。 （ちなみに、バージョンは CS4 です） テンプレートを設定 body 要素の id 属性を変更できるようにした場合。 テンプレート（.dwt）を開き、body 要素に id
鷹野雅弘（スイッチ） 2009年7月17日に開催したCSS Nite in OSAKA, Vol.17のフォローです。 Webは「クリックされてナンボ」。そこがクリッカブルであることが伝わらなければ、意味がありません。 クリッカブルであることを表現するひとつの手段として王道のロールオーバー効果も、DreamweaverやFireworksが自動的にはき出すJavaScriptを使ったものから、画像置換を使ったもの、そして、jQueryを使ったもの、さらにCSSのみで透明度を変更するものなど、その実装は変遷を遂げてきています。 これまでの流れをざっくり復習しながら、作り手/使い手両方がハッピーなロールオーバーはどこに向かうのかを一緒に考えましょう。 ロールオーバーの意味と意義 ロールオーバー（マウスオーバー）とは？ マウスポインタが重なったときに、次のいずれかのような変化を起こすこと 文字
意匠部、渕上です。 htmlの閉じタグの手前にコメントを入れることがめんどくさくなったので、Dreamwaver用の拡張機能を作って解決することにしました。 どういうコメントかというと、以下のようなやつです。 <div id="container"> ～～～ <!-- /#container --></div> このコメントを入れることでコードの見通しがよくなるので絶対いれたほうがいいことはわかってるんですが、idやclass名を記述しなきゃいけないのがちょっと大変なんですねー。 ダウンロード ということで、作成した拡張機能はコチラ。 ダウンロード - End_comment.mxp インストール mxpファイルをダブルクリックするとAdobe Extention Managerが立ち上がりインストールされます。 インストールできないことがあります 「メニューを更新できませんでした」という
旧ブログで公開していた「Dreamweaver スペシャルコードヒント」ですが、ありがたいことにリクエストをいただきましたので、改めて公開します。 なお、データ自体は公開当時のままですので、最新版で動作しない場合はご容赦ください。 そもそも、スペシャルコードヒントとはDreamweaver でコーディングする際、先頭の数文字を入力しただけで入力候補を一覧化してくれる「コードヒント機能」。スペシャルコードヒントは、このコードヒント用の XML ファイルをカスタマイズしたものです。 デフォルトのコードヒントからの変更点は、以下の通りです。（※対応バージョンごとに多少の差異があります。） 利用頻度の低い CSS プロパティのコメントアウト@ で @import を表示数値入力の際、px、%、em、s、deg、grad、rad、turn を表示CS4 版のみ「!im」で !important を表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く