2010年10月アーカイブ

Dreamweaverには［リファレンス］には、O'Reillyのリファレンスが付属しています。

ふと見ていたら、「-moz-border-radius」の説明が入っていました（border-radiusはないんですが...）。

［リファレンス］パネルは［プロパティ］パネルの下部に隠れていますが、見つからない場合には、［ウィンドウ］メニューの［結果］→［リファレンス］をクリックして表示します。

益子貴寛さん（サイバーガーデン）が運営されているWeb::Blogoscopeにて『効率的なサイト制作のためのDreamweaverの教科書』を取り上げていただきました。ありがとうございます。

• 書評『効率的なサイト作成のためのDreamweaverの教科書』 | Web::Blogoscope

2010年10月23日に新潟で開催されたCSS Nite in NIIGATA, Vol.2に出演しました。その中で「使っているようでも見落としがちなDreamweaverの機能」と題して、デモを交えてお話しいたしました。

ご参考までにご紹介します（括弧内は書籍の該当ページ）。

• インデントや特定のタグの前後の改行が思い通りにならない、コーディングルールにそぐわない、など、Dreamweaverのはき出すコードがイヤ！
  →　［コードフォーマット］環境設定とタグライブラリでコントロールできます（pp.26-27、p.220）
• ［CSSスタイル］ダイアログボックス経由でCSSを記述するとき、CSSプロパティの順番を思い通りに書きたい
  →　［適用］ボタンをクリックすると、そのタイミングで記述されます（p.115）
• ライブラリの編集時にCSSを当てたい、Dreamweaverのデザインビューでclearfixを効かせたい
  →　デザインタイムスタイルシートを使いましょう（p.111、p.152）
• 設定したつもりのCSSルールがなぜか反映されない…
  →　［CSSスタイル］パネルで［現在］タブに切り替えて、特異性（詳細度）を確認しましょう（p.119）

『効率的なサイト制作のためのDreamweaverの教科書』の正誤表をアップデートしました。

ご不便をおかけしますが、よろしくお願いします。

今回のアップデートでは、西村さん（NOTアドビの方）にご尽力いただきました。ありがとうございます。

『効率的なサイト制作のためのDreamweaverの教科書』紹介のフライヤーを作成しました。PDFでダウンロードいただけますので、社内申請などにお使いください。

Dreamweaver CS5では、［CSSスタイル］パネル上で、CSSルールの中の一部のプロパティを一時的に無効にすることができるようになっています。Photoshopのレイヤーを非表示にする感覚です。

1. ［CSSスタイル］パネルで対象となるCSSルールを選択し、2つ目のセクションで無効にしたいプロパティの左側にマウスポインタを当ててクリックします。
   
2. プロパティの左側にアイコンが表示され、そのプロパティが無効になります。
   

ソースコードでは、次のようにコメントアウトされています。

/* [disabled]margin: 0px; */

発売から2ヶ月ですが、『効率的なサイト制作のためのDreamweaverの教科書』の増刷（3刷）が決定しました。ご支援ありがとうございます！

アドビのDreamweaver Extensionにて、「HTML5 Pack for Dreamweaver CS3 and CS4」が公開されています。

This extension contains code hints (Tag Library) for HTML5 tags. It also updates the existing HTML4 library with new attributes and values. Code hinting for some CSS3 and vendor-specific CSS rules are also included. (Note: There is no Multi-screen Preview or Media Queries in this extension)

と解説しますが、ざっくり訳すと、次に挙げるものが追加されるようです。

• タグライブラリにHTML5の新しいタグを追加
• HTML4のライブラリにも新しい属性や値を追加
• ベンダー特異のコードを含むCSS3のコードヒント

しかし、マルチスクリーンプレビューとメディアクエリーのサポートは行われないそうです。

エイクエント x CSS Nite x KDDIウェブコミュニケーションズ『効率的なサイト制作のためのDreamweaverの教科書』出版記念セミナーを下記の日程で株式会社KDDIウェブコミュニケーションズ セミナールームにて開催しました（主催：AQUENT、協力：KDDIウェブコミュニケーションズ）。

• 9月27日：「コーディングを加速するDreamweaverの機能アレコレ」
• 10月16日：『”Dreamweaver使い”なら使わなきゃソン　Dreamweaverテンプレートの基本と使いどころ』

紙面スペースや構成の関係で、チュートリアルは299ページで終了していますが、次に行うのは、pp.163-164のリピート領域の設定です。

この場合には、次の手順を踏みます。

1. 「base.dwt」の子ページである「index.html」を開き、テンプレートして保存します（「index.dwt」と名前を付けます）。
2. 「index.dwt」にリピート領域を設定し、保存します。
3. 「index.dwt」を元にした新規ファイルを作成し、「index.html」を上書きします。
4. 「index.html」のリピート領域に実際のコンテンツを挿入します。

163ページのステップ7の画像を、ひろげてみると、次のように上位階層の編集可能領域がオレンジで表示されます。

「index.html」は「index.dwt」の子、「index.dwt」は「base.dwt」の子、という関係になります。言い換えれば、「index.html」は「base.dwt」の孫にあたります。

ブラウザー検証サービスAdobe BrowserLabが9月末にさりげなくアップデートされています。

• Safari 5のサポート
• Firefoxユーザー がFirebugを使って編集した結果を簡単にプレビューし、またそれらが他のブラウザーでどのように維持されるかを検証することのできるFirebugへのアドオン機能
  →　Adobe BrowserLab for Firebug
• ページの位置決め方法が異なるブラウザーについて、スクリーンショットをページの特定の位置に揃えることのできる、Smart Alignと呼ばれる新しい比較ツールの強化

次の3本のムービーが公開されています（全編英語）。

• ADC Presents - Design for the Web with BrowserLab and Firebug | Adobe TV
• ADC Presents - Integrate a Third-party CMS with BrowserLab and Dreamweaver CS5 | Adobe TV
• ADC Presents - The Auto-align Tool in BrowserLab | Adobe TV

226ページの「header-menu-home_on.gif」は「header-menu-home.gif」の誤りでは？というご指摘をいただきました。結論からいうと、このチュートリアルでは「header-menu-home_on.gif」が正しいです。

作例しているページは、トップページのため、ホーム=現在位置です。そのため、ほかのナビゲーションボタンとは少しだけ異なる処理にしています。

そういう意味では、その後、テンプレートに変更する過程で、「header-menu-home_on.gif」は「header-menu-home.gif」に変更しておく必要があるので、この時点でご指摘通り変更しておくのがベターかもしれません。

なお、たとえばjQuery+yuga.jsを利用すれば、リンク先が現在位置の場合には「_cr」がつく画像に自動で差し替えることができますので、実際には、その方法を使って実装するのが今的なアプローチであるといえます。

S.Tさん、ご指摘ありがとうございました！

試行錯誤しながら作業しているとき、仮納品的にデータを送信する必要が生じることがあります。不要なファイルを見極めて削除するのが大変ですが、そんなときには、接続先をローカルに設定して、納品用のファイルを取り出す方法があります。

1. サイト定義のサーバー設定で新規サーバーを追加する
2. ［使用する接続］に「ローカル/ネットワーク」を選択し、［サーバーフォルダー］に、PC上のフォルダを選択する（または新規作成）
   
3. 納品したいHTMLファイルを選択してアップロード。その際、「依存ファイルを含む」を選択すれば、必要な画像、CSS、JavaScriptが一緒に送信されます。
   

注意点として、Dreamweaverで設定したロールオーバーは問題ないのですが、jQueryなどを使ってロールオーバーを設定している場合、マウスオーバー時の画像は依存ファイルとして認識してくれないので、手動でアップロードする必要があります。 使う場合には、収集したファイルを開いて、必ず確認してくださいね。

スペースの関係で半分くらいに圧縮した原稿の完全版です。

Webでの色指定

Webページの背景や文字のカラーは、「#ff9933」のように指定されます。これを「HEXカラー」「Webセーフカラー」のように呼びます。

「#ff9933」は「#f93」、「#0066cc」は「#06c」のように3桁で表現することがあります。これをショートハンドと呼びます。

フルカラー（24bitカラー）

光の三原色は、赤（Red）、緑（Green）、青（Blue）で構成されています。これらの各カラーを256段階で表現すると、その組み合わせは、256× 256× 256=16,777,216になります。人間が識別できるカラーはおよそ1600万色と言われていることから、この16,777,216色のことを「フルカラー」と呼びます。

なお、256は2の8乗です。そこで、256× 256× 256は28×28×28と表現することができます。これを計算すると、224になることから「24ビットカラー」と呼ばれることがあります。

なお、24ビットカラーにアルファチャンネル（透過情報）を加えたものを32ビットカラーと呼びます。1バイトは8ビットです。1ビットは0と1の「2値」のため、1バイトは2の8乗（256）です。

<br>と<br />をスピーディに統一するには、［ファイル］メニューの［変換］が便利です。

たとえば、現在のドキュメントが「XHTML 1.0 Transitional」の場合、一旦、「HTML 4.01 Transitional」に変換し、再度、「XHTML 1.0 Transitional」に変換すれば、すべての<br>が<br />に変更されます。

ただし、元の原稿にalt属性のないimg要素がある場合になどにはアラートが出ます。