2010年7月アーカイブ

Dreamweaver CS5ではバリデート機能が使えなくなってしまったため、『効率的なサイト制作のためのDreamweaverの教科書』では、Firefoxでブラウザプレビュー→　Web Developerアドオン経由でW3C Markup Validation Serviceというフローをご紹介しています（pp.94-95）。

Donald Booth氏によるValidator for Dreamweaver CS5が6月15日から公開されていて、これをインストールすると、Dreamweaver CS5でもバリデート機能が使えるようになります（UIも日本語です）。

Adobe Extension Managerからインストール後、盛大に文字化けしますが、その場合には、一度「Configuration」フォルダーを捨ててから、Dreamweaverを再起動してみてください。

追記（2011年9月21日）：

「Configuration」フォルダーを丸ごと捨ててしまうと、すべての拡張機能がオフになってしまいます。メニューバーだけの文字化けであれば「Configuration」フォルダー内の「Menu」のみを捨ててからDreamweaverを再起動することで直ります。

• Dreamweaverのメニューが「文字化け」してしまった時の対処法｜DESIGN Oil BLOG

p.200以降の「Part 3, Practice 1」をスタートするには、こちらの素材をお使いください。

追記：リンク先がリンク切れになってしまっていたのを修正しました。

• CSS3 Gradient Generator
• Linear Gradients
• Getting Started - Google Font API - Google Code
• Adobe Labs - Adobe Dreamweaver CS5 HTML5 Pack
• HTML5タグライブラリ機能拡張を更新しました。 - dwlog.net
• CSS3コードヒント機能拡張が出来ました - dwlog.net
• 画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
• Daylite 3.9 Frequently Asked Questions
• iPad Peek
• iPhone site extension for Dreamweaver CS4/5 | エイチツーオー・スペース[H2O Space.]
• iPhone向けサイト制作ノウハウ＆拡張機能「iPhone site extension for Dreamweaver CS4/5」 | デベロッパーセンター

• W3C Link Checker
• Web Accessibility Toolbar 1.2.1 日本語版／ツール＆ダウンロード ? Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
• Check your web site.
• WDG HTML Validator

• yuga.js :: Kyosuke.jp
• yuga.js 0.4.2 - 優雅なWeb制作のためのJS｜CSS HappyLife
• 優雅なWeb製作者の為の『yuga.js』-JavaScript Library Archive
• jQuery: The Write Less, Do More, JavaScript Library
• 透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた | THE HAM MEDIA
• inputlog - Google AJAX APIを使ってjQueryを読み込む

• コメントを生成して挿入するDreamweaver用拡張機能を作成しました | Topics | DB - KAYAC Designer's Blog （カヤック デザイナーブログ）
• Zen.Coding-Dreamweaver.v0.6.zip - zen-coding - Zen Coding for Dreamweaver v0.6 - Project Hosting on Google Code
• The W3C Markup Validation Service
• Another HTML-lint gateway
• Web Developer :: Add-ons for Firefox

• ウェブブラウザ Lunascape - 軽快で革新的な無料Webブラウザ
• フェンリル | フリーソフト | Sleipnir カスタマイズに特化した上級者向けブラウザ
• スクリーンショット.jpでクロスブラウザチェック！｜Mac SafariやWindows IEなど複数バージョンのマルチブラウザで表示確認。Webサイトのスクリーンショットでレイアウトチェックができる便利ツールです。
• IETester
• BrowserLab

『効率的なサイト制作のためのDreamweaverの教科書』がAmazonに掲載されました。

発売は8月10日の予定です。

次に挙げる拡張子はDreamweaverの特有のものです。

• dwr：検索クエリー
• ste：サイト定義
• lbi：Dreamweaverライブラリ
• dwt：Dreamweaverテンプレート
• csn：スニペット

jQueryについては、通称「ドーナツ本」と呼ばれている西畑一馬さんの『Web 制作の現場で使う jQueryデザイン入門』がオススメです。

これは、ASCII.jpの連載Web制作の現場で使えるjQuery UIデザイン入門を単行本としてまとめられたものです。

下記などをチェックしてみてください。

• Web Designing: メールマガジンのご案内
• デイリーWebテク - Webテク関連の話題を毎日配信 -
• コリス
• Web制作に関わる方のためEL-J（エル・ジェイ） [まぐまぐ！]
• Dreamweaver Tips (DreamweaverTips) on Twitter

Movable Typeのオープンソース版（MTOS／エムトス）があります。サポートがないこと、カスタムフィールドが使えないとう制限がありますが、後は同じです。

• MTOS のダウンロード方法 | MovableType.jp

残念ながらありません。下記のムービーを参考にしてみてください。

• Adobe station5 / 2010.6.8 / CSS Nite in OMOTESANDO, Vol.1, 鷹野 雅弘 氏（株式会社スイッチ） station5_s on USTREAM. デザイン
• Adobe station5 / 2010.6.12 / CSS Nite in OMOTESANDO, Vol.2, 湯口 りさ 氏（WEBデザイナー）、林 大輔 氏（WEBデザイナー） ほか station5_s on USTREAM. デザイン...

『Dreamweaver プロフェッショナル・スタイル［CS3対応］』の丸山さんの章で詳しく書かれています。

「Dreamweaver　テンプレート式」で検索すれば、いろいろ出てくるので探してみてください。

id属性名に使用可能な文字は、半角アルファベット（a-z|A-Z）、半角数字（0-9）、ハイフン（-）、アンダースコア（_）です（1文字目に使えるのは半角アルファベットのみ）。

ただし、古いブラウザーによっては「mainareasection」が対応しなかったり、「main-area-section」と混在しないようにという観点から、語句の区切りのみを大文字にする方法が取ることがあります。

ラクダの“こぶ”のように見えることからキャメルケースと呼ばれます。

Firefoxのアドオン「Firebug」の使い方を解説しているサイト（ブログ）をご紹介します。

• Firebugで始めるCSSデバッグ[to-R]
• 意外と知られていない機能が多い！？Firebugの使い方 | THE HAM MEDIA

Mac版のDreamweaverでは、プライマリーブラウザーにoption+F12キー、セカンダリーブラウザーにcommand+F12キーのキーボードショートカットがアサインされています。

Dreamweaverで作業中に、これらのキーボードショートカットを押すと、作業中のドキュメントをそれぞれのブラウザーで確認することができます。

プライマリーブラウザーにFirefoxを割り当てて、option+F12キーを押すとき、ぱっと離せばよいのですが、optionキーを押し続けてしまうと、［Firefoxセーフモード］ウィンドウが開いてしまうのです。