TOP > Expression > FAQ > Webページの作成

'定義された用語' を指定すると特定のファイルで結果が不正になる

Google Bookmarks に追加 Check Yahoo!ブックマークに登録 このページをはてなブックマークに追加
最終更新日：2009/02/27(Fri) 15:32:53
特定のファイルで［定義された用語 <dt>］を指定をすると、カーソルが予期しない箇所に移動し、想定していない箇所のタグが書き換わる現象が発生する問題について説明します。

概要

特定のCSSプロパティを使ってレイアウトされたDIV内に定義リストを作成する場合、［定義］の文字列入力後に［Enter］キーを押下すると、そのDIV内の先頭の文字列にカーソルが移動し、そのタグが［定義された用語］に置き換わります。

原因

<div> タグで指定する id 属性によって適用されるスタイル シートの記述に、float プロパティで left もしくは right を指定した場合に、見出し要素 <h1> から <h6> のタグが <dl> および <dt> タグに置き換わります。なお、この問題は見出し要素に限らず、div内の最初の段落が置き換わることを確認しています。

再現ファイルの作成手順

HTML ファイルの作成

  1. Expression Web 2 を起動します。
  2. 任意のサイトを開きます。
  3. [ファイル] メニューから [新規作成]-[HTML] を選択し、新しい HTML ファイルを作成します。

CSS の作成

  1. [書式] メニューから [新しいスタイル] を選択します。
  2. [新しいスタイル] ウィンドウで "セレクタ" に以下のような名前を入力します。
    #content
  3. "カテゴリ" の一覧から "レイアウト" を選択します。
  4. "float" セクションのプルダウン メニューから [left] または [right] を選択します。
  5. [OK] をクリックして、[新しいスタイル] ウィンドウを閉じます。

HTML の記述

  1.  [挿入] メニューから [HTML]-[<div>] を選択し、ページ上の <div> タグを挿入します。
  2.  手順 9 で挿入した <div> タグに対し、"id" を指定します。
    1. 手順 9 で挿入した <div> タグにカーソルが置かれた状態で、[書式] メニューから [タグのプロパティ] を選択します。
    2. [タグのプロパティ] の作業ウィンドウが開きます。"属性" セクションの [id] の項目に対し、プルダウン メニューから作成したスタイル シートの "content" を選択します。
  3. 挿入した <div> タグの [デザイン ビュー] 上にカーソルを置き、適当なテキストを入力して見出しのタグを指定します。
    1. テキスト "タイトル" と入力します。
    2. 手順 11-1 で入力したテキスト "タイトル" を選択し、[ツール バー] のプルダウン メニューから [見出し 1 <h1>] を選択します。
  4. Enter キーで改行します。
  5.  段落の <p> タグが挿入されます。該当の段落のタグ上で適当なテキストを入力します。

上記手順によって、以下のような記述の HTML ファイルが作成されます。

<html>

<head>
<meta content="ja" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>TEST</title>
<style type="text/css">
#content {
float: left;
}
</style>
</head>

<body>

<div id="content">
<h1>タイトル</h1>
<p>あいうえお</p>
</div>

</body>

</html>

再現手順

前述の手順にて作成された HTML ファイルにて、以下の操作を実施することにより、この問題が発生します。

  1. 作成した HTML ファイルを Expression Web 2 で開きます。
  2. HTML ファイル作成手順 13 で入力したテキストを [デザイン ビュー] 上で選択します。
  3. "共通" ツール バーのプルダウン メニューから [定義された用語 <dt>] を選択します。
  4. Enter キーを入力して改行します。改行後に空の <dd></dd> タグが作成されます。
  5. 再度、適当なテキスト (例では "かきくけこ") と入力します。
  6. テキスト "かきくけこ" の最後尾にカーソルを置き、Enter キーを入力します。
  7. 以下のように、HTML ファイル作成手順 11 で記述した見出しの <h1> タグの内容が <dt> タグに変化し、<dl> タグよって囲まれる記述となります。
<div id="content">
<dl>
<dt>タイトル</dt>
<dt>あいうえお</dt>
<dd>かきくけこ</dd>
<dd></dd>
</dl>
</div>

対処方法

以下のいずれかの方法で対処します。

  1. 対象となるdivにfloatプロパティを使わないようにします。
  2. 一旦「定義された用語」として入力したい文字を「段落」として入力していき、それらの段落を選択して「定義された用語」にスタイルを変更し、それぞれの「定義された用語」の末尾にEnterキーを押して「定義」の文字列を入力します。
INDEX

問題は解決しましたか？

操作方法、設定方法等で困ったら、Expression Web & FrontPage Users Forum に投稿してください！ 

▲このページのトップへ