Dreamweaverのテーブル操作で覚えるべき6つのショートカット

[ショートカット]
Ctrl+Alt+M     セルのマージ(デザインビューで選択中の複数のセルを結合する)
Ctrl+Alt+S     セルの分割(デザインビューで選択中の結合済みセルを分割する)
Ctrl+M     行の追加(デザインビューで選択中のセルの隣に行を追加する)
Ctrl+Shift+A    列の追加(デザインビューで選択中のセルの隣に列を追加する)
Ctrl+Shift+M    行の削除(デザインビューで選択中のセルの行を削除する)
Ctrl+Shift+-    列の削除(デザインビューで選択中のセルの列を削除する)

※Dreamweaver>修正>テーブル の順にアクセスすると、テーブル関連のショートカットを確認できます。

 

[確認環境]
Windows 7 SP1
Dreamweaver CS3 9.0

[HTML/CSS]CSSのコメントアウトの注意点

コメントアウトの中でコメントアウトを使うと期待通りに動きません。
CSSには、JavaScriptで使うような一行コメントアウト // の記述は存在しません。

 

以下、全体をコメントアウトできない例
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

/*
p.sample {
font-size:16px;
font-weight:700;
color:#777;
text-align:left;
line-height:100%;
padding:12px 25px;
width:320px;
background:#DDD;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari,Chrome */
border-radius: 10px; /* CSS3 */
*/

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

[HTML/CSS]divの中の文字列がwidthを超えて突き抜ける問題について

以下のような文字列は、widthを超えても折り返されず、突き抜ける仕様がある。
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

 

理由は、英文は単語毎にスペース区切りで折り返すが、スペースがない為に長い単語とみなされててしまうから。
期待通りに動かないことを覚えておくとよい。

[Mac]Fireworksでビットマップ画像をjpgへ変換する方法

Fireworksのデザインファイル(*.fw.png)中のレイヤに配置されているビットマップ画像を変換して抽出します。
変換先のファイル形式(jpgやpngなど)を選択することはできないようです。

 

[操作手順]
→コマンド>ドキュメント>レイヤーに分配 の順にアクセスする。

→要素が各レイヤーに分配される。

→ファイル>書き出し の順にアクセスする。

→書き出し:「レイヤーからファイルへ」を選択して、「画像を切り抜き」にチェックを入れて、保存する。

→以下のファイルへ各レイヤーのビットマップ画像が書き出される。
レイヤー_1.jpg
レイヤー_2.jpg
・・・

以上で完了です。

 

[確認環境]
Mac OS X 10.9 Mavericks
Fireworks CS4 10.0

Fireworksでビットマップ画像をpngへ変換する方法

Fireworksのデザインファイル(*.fw.png)中のレイヤに配置されているビットマップ画像を変換して抽出します。
変換先のファイル形式(jpgやpngなど)を選択することはできないようです。

 

[操作手順]
→コマンド>ドキュメント>レイヤーに分配 の順にアクセスする。

→要素が各レイヤーに分配される。

→ファイル>書き出し の順にアクセスする。

→書き出し:「レイヤーからファイルへ」を選択して、「イメージを切り抜き」にチェックを入れて、保存する。

→以下のファイルへ各レイヤーのビットマップ画像が書き出される。
レイヤー_1.png
レイヤー_2.png
・・・

以上で完了です。

 

[確認環境]
Windows 7 SP1
Fireworks CS3 9.0

[Mac]Dreamweaverのコードインスペクタ(コードビューの別窓)の使い方とショートカットキー

コーディング最中、別の箇所を並行して編集したい時はコードインスペクタを使います。
コードインスペクタで編集した結果は、リアルタイムでコードビューに反映します。(その逆も)

 

[操作手順]
→Dreamweaverでコードビューを開く

→以下のショートカットを押す。
option+F10

→コードインスペクタが表示される。

→コードビューとコードインスペクタを行き来して編集作業をする。

以上で完了です。

 

[確認環境]
Mac OS X 10.9 Mavericks
Dreamweaver CS4 10.0

Dreamweaverのコードインスペクタ(コードビューの別窓)の使い方とショートカットキー

コーディング最中、別の箇所を並行して編集したい時はコードインスペクタを使います。
コードインスペクタで編集した結果は、リアルタイムでコードビューに反映します。(その逆も)

 

[操作手順]
→Dreamweaverでコードビューを開く

→以下のショートカットを押す。
F10

→コードインスペクタが表示される。

→コードビューとコードインスペクタを行き来して編集作業をする。

以上で完了です。

 

[確認環境]
Windows 7 SP1
Dreamweaver CS3 9.0

[Word]ワード文書中の「赤の波線」や「緑の波線」「青の波線」の意味と使い方について

ワードが自動判定して表示しています。
日本語文、英語文どちらにも適用されます。
これらの波線が印刷されることはありません。

赤の波線は、スペルミスの可能性を示しています。
緑の波線は、文法誤りの可能性をを示しています。
青い波線は、「段落番号」や「箇条書き」や「見出し」などの書式設定が統一されていない可能性を示しています。

波線を右クリックして、メニューに従い、修正すると表示されなくなります。
例えば、波線を右クリック>無視 の順に選択すると表示されなくなります。

 

[確認環境]
Windows 7 SP1
Word 2010