Adobe Edge: 2010年1月 ワンパクの「もっと使いこなしてみよう！Dreamweaver」 第4回 正規表現を使った検索・置換にチャレンジ！
株式会社ワンパクの近藤＆杉山の師弟コンビが 、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする本連載。今回取り上げるのは「正規表現を使った検索・置換」です。正規表現を使えば、値の異なる属性を検索したり、特定のマークアップ構造の要素を検索したりと検索の幅がグッと広がります。そして、「杉山のこれ知ってます？」のコーナーでは、使用頻度の高い検索・置換のパターンや便利な検索・置換のパターンを保存して、すぐに呼び出せるようにするクエリーについて紹介します。 やればわかる！ わかれば使いたくなる！ まずははじめの一歩！ 杉山：師匠、ちょっと聞きたいのですが…。今やっている案件のHTMLにはいろんな人が関わっていて、ちゃんとした管理がされてなくて、HTMLのコードがタブでインデントされていたりされていなかったり、記述方法がバラバラで気持ち悪いんですよ。あれほどイン
レスポンシブWebデザインから実機検証までサクッと
レスポンシブWebデザインから実機検証までサクッと：無料でCreative Cloudを使い倒せ（1）（1/2 ページ） はじめに 最近、ブラウザの幅に合わせてレイアウトを変える「レスポンシブWebデザイン」（参照記事：＠IT：5分で分かるレスポンシブWebデザイン」を採用するWebサイトが増えてきました。レスポンシブの考え方は古くからあり、JavaScriptやFlashを利用してコンテンツをコントロールしていました。 さて、HTML4でレスポンシブなサイトを作ろうとすると、JavaScriptに頼るしかありませんでした。今でももちろん、さまざまなライブラリが公開されています。 HTML5になって、レスポンシブなサイトはより身近になりました。JavaScriptを使わなくても、CSS3のMediaQueryで解像度に合わせてCSSを切り替えるのが簡単にできるようになったのです。 しかし、
Adobe HTML5 特設サイト Dreamweaver® CS6 と HTML5 で始めようスマートフォン＆タブレット対応| Adobe - 日本
Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応 HTML5 特設サイトは、HTML5/CSS3 やモバイルデバイスの活用を検討している方に最新情報をお届けするアドビ公式サイトです。 事例から Adobe®Dreamweaver® CS6 を始めとする制作環境まで、幅広い観点から Web の新しい方向性をお伝えします。 本文へ 本サイトについて 本サイト自体が、マルチデバイス対応のレスポンシブなデザインの事例として制作されています。表示される画面の大きさに応じて、閲覧し易い様にレイアウトが変化します。詳しくは「互換化とは」をご覧ください。 jQuery Mobile を使ったスマートフォン向けの専用サイトも公開中です。
サンプルで学ぶDreamweaver CS6！「レスポンシブWebデザイン」に挑戦してみよう
Dreamweaverとは Adobe Dreamweaver（以下、Dreamweaver）は、Webページを作成・更新・管理するためのソフトウェアです。Dreamweaverにはいくつかの編集モードがあり、コードビュー（HTMLコードやCSS、JavaScriptファイルなどコードを直接編集できる画面）、デザインビュー（Webページをブラウザで表示した形に近い状態で編集できる画面）の両方で編集できます。 さらに、Dreamweaver CS4で登場したライブビュー（レンダリングエンジンに利用しブラウザに非常に近い状態での表示確認ができる画面）では、SafariやGoogle Chromeと同じWebkitというレンダリングエンジンを採用しており、実際の画面を確認しつつ作業を進めることができます。 デザイナーにとっては、HTMLやCSSのコードをオートコンプリート（自動補完）してくれる機
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
【ハウツー】「Adobe Dreamweaver CS5」を試す -WordPressのテーマ改造CMS編 | クリエイティブ | マイコミジャーナル
前回の記事までは、CSSを一切書かないで、CSSのプロパティを書く程度の作業だった。エディタ上でがつがつコードを書いていくのに比べて、楽に作業ができたと思う。今回、WordPressのテンプレートフレームワークのカスタマイズを行なうため、大部分をマウスだけでというわけにはいかないが、「Dreamweaver CS5」の恩恵を受けつつ、作業を進めていきたい。 「Adobe CS5」体験版はこちらから 今回行うのは下記のカスタマイズだ。 ・メインコンテンツ部分をmain-wrapperというidをつけたdivで囲う ・ロゴを画像にする 今までWordPressのテンプレートを多少いじったことがある人なら、「なんだそんなこと」と思うかもしれない。例えば、メインコンテンツ部分をdivタグで囲いたい場合は単にdivで囲えばいいし、ロゴを画像にしたければ、既存のロゴのテキスト部分をimgタグで置き換
Wordpressのコードヒントが出るDreamweaverの拡張機能 « きんくまデザイン｜デザインを生かしたプログラミング
11/10/22更新 CS5.5だとうまくいかないとのコメントがあり、調べてみました。 取り急ぎ、動くように修正しました。 WordPressCodeHints.xml 解凍したファイルを下記のパスになるようにいれてください。 Winの人は似たパスのところにおけば動くと思います。 /Applications/Adobe Dreamweaver CS5.5/Configuration/CodeHints/WordPressCodeHints.xml ※注意 何年か前に作ったものなので、コードヒント自体が古いものになっています。 下記のページから、関数をひろってきて、上のxmlデータを上書きすれば最新のものになります。 http://codex.wordpress.org/Function_Reference Perl,Ruby,Pythonなどがあやつれれば、上のリンクから必要な部分を拾って
DreamweaverでWordPressサイトを作るならいれておくべき機能拡張 2本 : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 DreamweaverでWordpressサイトを使うなら、以下の機能拡張をいれておけば事足りるな、と改めて思ったので、まとめです。 TAGStention http://solutoire.com/tagstention/ 色々な方が、WordPressの開発で必須、と言っているので、いまさら感はありますが、CS3、CS4でも問題なく使用できる機能拡張です。 ただ、開発は2006年3月28日以降は停滞している（開発をやめている？）ので対応してないタグや使用できないタグもあるようですが、ツールバーからワンクリックで入力で
【ハウツー】「Dreamweaver CS4」の新機能をマスターする(後編) (1) Spryデータセットでコンテンツを作成 | クリエイティブ | マイコミジャーナル
全2回でお届けしている「Adobe Dreamweaver CS4」の新機能紹介と操作ガイド。前編では、「コードナビゲータで定義したCSSをすばやく調べる」、「ビューの表示方法を切り替える」を紹介した。後編では、「Spryデータセットでコンテンツ作成」と「ライブビュー/ライブコード」で表示を確認する方法を紹介したい。 Spryデータセットでコンテンツ作成(1) 「Spryデータセット」は、取得したデータをソートしたり、指定したデータを呼び出して表示するSpryコンテンツだ。「Dreamweaver CS3」から搭載された機能だが、CS4から読み込み用データとしてHTMLのテーブルを扱えるようになり、コンテンツ作成がより容易になった。「Spryデータセット」を使って、日付をクリックすると記事が更新されるコンテンツを作成してみよう。 日付を変えるとコンテンツが更新される。写真は完成後のイメージ
【ハウツー】「Dreamweaver CS4」の新機能をマスターする(前編) (1) コードナビゲータでコンテンツ作成、ビューを切り替える | クリエイティブ | マイコミジャーナル
2008年11月にリリースされたWebオーサリングソフト「Dreamweaver」の新バージョン、「Adobe Dreamweaver CS4」。Dreamweaverを完全マスターするためにも、CS4から加わった新機能「コードナビゲータ」や「ビューの切り替え」、「Photoshopとの連携」、「Spryデータセット」、「ライブビュー/ライブコード」の具体的な操作方法を前編、後編の2回にわけて紹介しよう。 「コードナビゲータ」で定義したCSSをすばやく調べる 「コードナビゲータ」は、選択した場所に適用されているCSSの内容を確認する機能。ショートカットキーでコードナビゲータを開くには、「Alt」キー(Win)または「Command」＋「Option」キー(Mac)を押しながら、ドキュメントの任意の場所をクリックすると、グレーの太枠に囲まれたウィンドウが開く。これがコードナビゲータである。
WordPressのテンプレート作成用のDreamweaverのextension
WordPressのテンプレートファイルを作成・編集する際、タグをクリックで挿入することができるDreamweaver用のextensionの紹介です。
アドビ―Dreamweaverデベロッパーセンター
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
CSSプロパティーフォーマット - 合同会社レゾリューションズ
CSS属性フォーマットをお使いの方へ 『CSS属性フォーマット』は名称を変え、今後は『CSSプロパティーフォーマット』としてリリースされることになりました。今現在の所、CSS属性フォーマット Version 0.2.0とCSSプロパティーフォーマットVersion 0.2.1には機能的差異はございませんが、将来的にはCSSプロパティーフォーマットに機能追加をしていく所存です。 なお、Extension Managerを使用して、CSS属性フォーマットをアンインストール後、CSSプロパティーフォーマットをインストールされることをお奨めいたします。 CSSプロパティーフォーマットとは CSSベースのサイト制作をしていると、ついCSSのプロパティーの順番がバラバラになってしまうことが多々あります。プロパティーの順番がバラバラだと、そのセレクタでどのようなプロパティーが定義されていて、その結果、ど
CSS属性フォーマット Version 0.2 « cyano
CSS属性フォーマット Version 0.2をリリースしました。この拡張機能を使うとバラバラになりがちなCSSの属性を、位置を指定するもの→ボーダーを指定するもの→・・・といった具合にに並び替えることが出来ます。この拡張機能はDreamweaver 4以降で動きます（MX2004でしか検証してませんが…）。インストール方法は上のリンクからCSS_AttrFormat020.mxpをダウンロードしてダブルクリックするとExtensionManagerが立ち上がり、自動的にインストールされます。 この拡張機能はCSSのセレクタ内の属性を指定した順番にフォーマットしてくれるものです。例えば以下のようなCSSがあるとします。 .sidetitle { border-right-width: 8px; border-left-width: 8px; text-align: center; back
作業効率を高めるDreamweaverの小技---目次：ITpro
制作会社に身を置きながら、テクニカルライターとして執筆をしている筆者が，リファレンスやチュートリアルなどの執筆を通して細かい機能を探る中でひらめいた，「日々の作業効率を高めるDreamweaverの小技」をご紹介します。 ・第1回 ひきついだサイトはdivでいっぱい！ ・第2回 特定の要素（タグ）を削除したい ・第3回 マークアップの高速化について考える（1) ・第4回 マークアップの高速化について考える（2) ・第5回 環境設定を見直そう（1） ・第6回 環境設定を見直そう（2） ・第7回 環境設定を見直そう（3） ・第8回 Office書類の活用 ・第9回 Dreamweaver CS3は使えるのか？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pocket - My list
http://solutoire.com/tagstention/
株式会社ブランディングワークス｜Web・SEO・ブランディングを総合支援
Dreamweaverの上部にあるタイトルのテキストフィールドの幅を広げたい 【OKWAVE】