たまちゃんHTMLのおうち たまちゃんHTMLのおうち

ez-HTMLの使い方   タグの値の入力を楽に行う

ホーム> ez-HTMLの使い方> タグの値の入力を楽に行う

メニュー

タグの値の入力や確認を楽に行います

ez-HTML(7.70) のタグの値の入力支援や入力地の確認方法などの手順です。

■タグの値の入力を楽に行う

タグの入力を支援する機能があります。

★タグの入力支援

タグの候補を出すには、3通りの方法があります。使いやすい順番から、

(A)<」を入力する
 自動的にタグの候補を出してくれ、それに続いてスペースキーで属性、属性値も候補を出してくれます。
 自動で候補を出さなくするには[カスタム]メニューの[HTMLの仕様と文法]-[HTMLの文法設定]で、『基本設定』タブの「候補設定」で設定して下さい。
  要素候補・・・ 「<」を入力したときに要素候補を出します。
  属性候補・・・ 属性が入力可能な位置でスペースを入力したときに属性候補を出します。
  属性値候補・・・属性値まで候補を出します。

(B) Ctrl+Alt+Space キーを押す。
 属性候補と属性値候補は、(A)で説明した「候補設定」でチェックされていなければ動作しないようです。

(C) [スペシャル]メニューの[タグの処理]-[タグ入力支援]を実行。
 (B)と同様

このページのトップ

★ジャンプ元のIDを入力する

ジャンプ先がすでにHTMLファイル上で指定されている場合は、候補として表示されます。
  1. 「<」を入力(タグの選択候補のリストが表示される)
  2. 「a」を入力(リストから「a   <a>|</a>」がハイライトされる)
  3. 半角スペースを挿入(属性の選択候補のリストが表示される)
  4. 候補が表示された状態で「n」を入力(リストから「name name= "|"」がハイライトされる)
  5. 半角スペースを挿入(name= "|"が入力され、属性値(IDの値)の選択候補のリストに変わる)
  6. リストの中から選択
    選択候補のリスト表示の時は、キー入力により候補が絞られます

「href="#abc"」(アンカー)入力があるときに「name= 」(id属性指定時)で選択候補にabcが出ます。
逆に「name="abc"」(id属性)入力のあと「href= 」(アンカー)入力では選択候補に#abcは出てこないようです。
(「href="#abc"」(アンカー)入力があれば、「href= 」(アンカー)入力でも選択候補に#abcがでます)

入力補助1 入力補助2 入力補助3 入力補助4 入力補助5 入力補助6

ヒント 「カスタム」メニューの「HTMLの仕様と文法 」→ 「HTMLの文法設定」で、 「基本設定」タブの、「候補支援の詳細」の「class/id属性を解析」チェックボックスでリスト表示のON/OFFを設定できます。

このページのトップ

★スペシャルサイドバーでタグを編集する

スペシャルサイドバーでタグを編集する
  1. スペシャルサイドバーの「タグ解析」のタブをクリック
  2. 編集画面のタグ内部をクリック
  3. 変更したい項目をリスト上でクリック
  4. 目的に合わせてコンボボックスで変更したり、左側のボタンで編集する

ヒント シンプルファイルビューのタブが表示されていない場合は タブを追加してください。

参照
スペシャルサイドバーに各機能の(ウィンドウ)タブを追加する、または解放する
ez-HTMLスペシャルサイドバー機能一覧

このページのトップ

★スペシャルサイドバーから色の値を入力する

スペシャルサイドバーから色の値を入力する たとえば、スタイルシートで
h1 {color: #FFFF99; background-color: #6699FF; padding: 8px; margin: 2px;}
#FFFF99とか#6699FFの色の値(カラーコード)をカラーパレットから入力します。
  1. 編集画面で色の値を入力したい位置にカーソルを合わせる
  2. スペシャルサイドバーのカラーパレットのタブをクリック
  3. 入力したい色をクリック

ヒント シンプルファイルビューのタブが表示されていない場合は タブを追加してください。

参照
スペシャルサイドバーに各機能の(ウィンドウ)タブを追加する、または解放する
ez-HTMLスペシャルサイドバー機能一覧

このページのトップ

★入力したカラーコードの色を確認する

これは、入力時ではありませんが... HTMLコード上に記入してあるカーラーコードを、色の表示で確認することが出来ます。

  1. 編集画面で色の値(カラーコード)にカーソルを合わせる
  2. クリックする

編集画面の下にあるボタン群の右端の「カラーコード監視パネル」に色が表示されます。

入力したカラーコードの色を確認する

ヒント カラーコード監視パネルが表示されていない場合は [表示]メニューの[詳細設定]→[HTML]→[オプション]の[HTML編集ボタンの右にカラーコード監視パネルを配置]をチェックします。

このページのトップ

★ファイル名をパス付で入力する

ファイル名をパス付で入力する

画像などのファイル名を相対パスや絶対パスで指定したい場合は多々あります。
パスを付けて正確にファイル名を入力します。

  1. 編集画面のファイル名を入力したい位置でクリックしてカーソルを置く
  2. スペシャルサイドバーのシンプルファイルビューのタブをクリック
  3. フォルダを選択し、ファイルをクリックします。
  4. 右クリックして、ポップアップメニューの「絶対パスを貼り付け」、 または「相対パスを貼り付け」を選択

ヒント フォルダだけを選択すると、ファイル名なしのパスのみが入力できます。
スペシャルサイドバーを使用せず、編集画面で右クリックして表示されるポップアップメニューからも入力できます。 ポップアップメニューの「データ添付」から、「絶対パスを貼り付け」、または「相対パスを貼り付け」を選択します。
ファイルを選択するダイアログボックスが表示されるのでファイルを選択してください。

参照
ez-HTMLスペシャルサイドバー機能一覧

このページのトップ

★画像ファイルを編集画面上でプレビューする

入力したカラーコードの色を確認する

これも、入力時ではありませんが... HTMLコード上に記入してある画像ファイルを、編集画面上でサムネイル(縮小プレビュー)を表示して確認することが出来ます。

  1. 編集画面の画像パスにカーソルを合わせ、長押しする

編集画面上に画像が表示されます。

ヒント サムネイルが表示されていない場合は、 [表示]メニューの[詳細設定]→[HTML]→[オプション]の[画像がある箇所でのマウスの押し続けで表示]をチェックします。
スペシャルサイドバーのメディアビューワでも画像表示できます。 こちらは、イメージの大きさとファイルサイズも確認できます。メディアビューワを開いて、編集画面の画像パスをクリックすると表示されます。
スペシャルサイドバーには「クリップボードに出力タグをコピー」と「編集ドキュメントに自動添付」の機能がありますが、ファイル拡張子が小文字でなければ機能しないようです。
また、GIF/PNG画像などは「Susie Plug-In」がインストールされていないと表示されません。

参照
ez-HTMLスペシャルサイドバー機能一覧

このページのトップ

次ページ >> ■スタイルシートの入力を楽に行う
前ページ << ■ツールバーなどをカスタマイズする