-------------
送られてきたWORDファイルを原稿に、某サイトのHTMLを書いたのですが、原稿中にあったイタリックの箇所がなぜかイタリックになりませんでした。
えっ？と思いながら、タグの使い方を教えてくれるサイトを開いてみました。
上のキャプチャ画像で示した「表示例」に、イタリックで示されるはずなのですが…
この通り、イタリック体になっていません。正確には、「このようにイタリック体で」の部分がイタリック体になればいいのですが、イタリックにはなっていません。
ソースを見ると、
<div class="exampleContainer">
<pre class="code preBreak">
<code>
<p>i要素内のテキストは、<strong><i></strong>このようにイタリック体で<strong></i></strong>表示されます。</p>
</code>
</pre>
<p class="label">表示例</p>
<div class="display">
<p>i要素内のテキストは、<i>このようにイタリック体で</i>表示されます。</p>
</div>
となっていますから、記述も正確です。
私はDreamweaverCS5で次のように書きました。
この下が引用部分で、イタリックにしたかった。
</p>
<p style="font-style:italic; margin-left:1em;">
イタリック体<br />
斜字体<br />
</p>
<p>
この上が引用部分で、イタリックにしたかった。
デザインモードで表示しました。
この通り、イタリックになりません。ライブビューモードでも同じです。
さらに調べてみると、原因はメイリオに「イタリック体がないから」ということがあちこちに書かれていました。
そこで、フォントの指定をしてみることにしました。
この下が引用部分で、イタリックにしたかった。
</p>
<p style="font:'ＭＳ ゴシック', 'MS Gothic', 'Osaka−等幅', Osaka-mono, monospace; font-style:italic; margin-left:1em;">
イタリック体<br />
斜字体<br />
</p>
<p>
この上が引用部分で、イタリックにしたかった。
その結果はというと、
見事にイタリックになった！・・・と喜べるのは束の間で、ライブビューモードではイタリックになりません。
ブラウザに関して、「ieだとイタリックにならない」という記述もありましたが、私がテストした範囲では、ieだけでなく、chromeもsafariも駄目、つまりイタリックになりませんでした。フォントは関係ないのかも知れません。
こちらを見ると、イタリックに関する現状が少し分かります。
つまり、１バイトの文字はイタリックにしてくれるけれども、２バイト（日本語）には対応していない、というのが現状のようです。
どうしてこんな事になっているのやら・・・。
-----------
追記
間違っていた点が分かりました。→「HTMLでItalicが表現できない(2)〜できました」
