スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第14回目の授業です。

Dreamweaverでコーディングをしている時、とっても便利なコードヒント。
長いプロパティや値を、キーをポンと叩くだけで書いてくれるので効率的ですね。

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

しかし、既に書かれたものを修正する場合や、何かの拍子でコードヒントが消えてしまった時、どうしますか?
綴りどんなんだったっけなぁ、と全部自分で書いていますか?

それをしなくても、あのちっちゃい窓を、その場でもう一度呼び出す方法があるんです!

INDEX

  1. HTMLファイルでコードヒントを使う
  2. CSSファイルでコードヒントを使う
  3. 途中で消えてしまったコードヒントをもう一度出す

まずは、コードヒントの使い方を簡単におさらい。

1.HTMLファイルでコードヒントを使う

半角で「<」を入力すると、タグの一覧がアルファベット順に表示されたコードヒントの窓が出てきます。
入力したいタグの初めの文字を打つと、そのアルファベットを先頭に表示が変わります。

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

目的のタグが選択されていなければ、矢印キーで選択カーソルを移動して、Enterキーをどーん。
または窓の中のタグをダブルクリックするとファイルに記述されます。
1文字打っても目的のタグが遠ければ、2文字目、3文字目と入力すると近づきます。
(「>」は自動で入力されないので、手動で入力します。)

そして終了タグを入力したい場合は、「</」と入力すると、直前の開始タグを判定して勝手に入力されます。(scriptタグなど例外もあるようです)

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

属性を書きたい時、例えばclassをタグに付けたい時は、タグ名の後ろに半角スペースを入れ、「c」と入力すると、コードヒントでclassが選択されているので、そのままEnterキーを押します。

すると「class=""」が入力され、「""」の間にカーソルが当たり、そのままクラス名を入力できる状態にまでなっています。

さらに、リンクしているcssファイル中のクラスセレクタがコードヒントの小窓に出るので、既存のスタイルを適用させたい場合はそこから選択してEnterキーを押すだけ。

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

aタグのhref属性やimgタグのsrc属性では、コードヒントに「参照...」と出るので、そこでEnterを押せば、ファイルや画像をエクスプローラー的に選択できます。

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

これだとファイルパスを気にしなくてもいいですね。

2.CSSファイルでコードヒントを使う

セレクタを書いたあと、「{」を入力するとコードヒントが出ます。
そのままEnterキーを押すと、インデントされた位置に改行されます。

プロパティの最初の文字を入力→上下キーまたはマウスで選択→確定すると、プロパティ名の後のコロン「:」まで入力され、さらに値の候補が出てきます。

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

値を選択、または入力したら、最終行のセミコロンは忘れずに手動で付けましょう。

プロパティを書き終わって閉じかっこ「}」を付けたい時、コードを改行したところはインデントされた位置になっていますが、気にせずに「}」を入力します。

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

そうしたら、インデントが自動で解除されてセレクタの先頭に揃います。
Backspaceキーでわざわざインデントを消す必要はありません。

3.途中で消えてしまったコードヒントをもう一度出す

さて、本題です。

一度指定した色を変えたいからもう一度コードヒントのカラーパネルを出したいとか、プロパティの入力途中にコードヒントが消えてしまったとか、そういったことが時々ありますね。

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

そんな時は、「Ctrl+Space」キーを押しましょう!

[Dreamweaver CS5.5]消えたコードヒントをもう一度表示させる(&コードヒントのおさらい)

出ましたね!

HTMLやCSSの記述に慣れてきたら、次は是非コードヒントを使いこなしてくださいね!

それでは、お疲れさまでした!

関連記事
このエントリーをはてなブックマークに追加
ページトップへ戻る

コメントの投稿

非公開コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。