WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:文字列の一部のみ文字間隔を調整したい

0:[投稿] 怠惰マスク [2009/01/16 22:35 ] [環境:IE6 わからない]

こんにちは。又お世話になります。

次のような感じで、文字列の一部についてのみ文字間隔を調整したいと思っています。

AB  C  DEFGHI
JKLM  N  OPQRST

スタイルシートで下記のような設定にしてみたところ、IE6では予期した結果が得られたのですが、Firefox だとDとEの間も微妙に間隔が空き、DE間がEFGHそれぞれの間より少し広くなってしまいました(2行目についても同様)。これを回避する方法はありませんでしょうか。或いは、文字列の一部についてのみ文字間隔を調整する他の方法はありませんでしょうか。

よろしくお願いします。


<style type="text/css">

span.item1            {letter-spacing: 2em}

</style>

A<span class="item1">BCD</span>EFGH
JKL<span class="item1">MNO</span>PQRST


1:[回答] 燕雀 [2009/01/17 16:57 ]

あまりスマートなやり方ではないけれど,このやり方を尊重すれば,
[test.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<link rel="stylesheet" href="test1.css" type="text/css" />
<!--[if gte IE 5]>
<link rel="stylesheet" href="test1a.css" type="text/css" />
<![endif]-->
<title>字間値調整試験</title>
</head>
<body>

<span class="item1">BC</span>
<span class="item2">DEFGHJKL</span>
<span class="item1">MN</span>
<span class="item2">OPQRST</span>
</body>
</html>

[test1.css]
span.item1 {
letter-spacing:2em}

[test1a.css]
span.item2  {
padding-left:2em;}

みたいな感じかな.


2:[保留] 怠惰マスク [2009/01/17 23:09 ]

燕雀さん、有り難うございます。

確かに所期の形を表現することは出来ましたが、今の私の知識では、何故この設定でこういう結果になるのかが理解出来ません。残念ながら私の能力を超えているようです。もう少し自分のレベルでも出来る方法を考えてみようと思います。

有り難うございました。m(_ _)m


3:[完了] 怠惰マスク [2009/01/18 13:01 ]

 自己レスです。

 いろいろと調べてみて、燕雀さんに教えて頂いた <!--[if gte IE 5]>  の意味がようやく分かりました。^^; 何故この設定で所期のような表現が可能なのかも納得出来ました。

 で、結局、下記のようにすることにしました。断片的知識しか持ち合わせていないため、インライン要素に margin を設定するという発想が浮かびませんでした。燕雀さんにお書き頂いた [test1a.css]  span.item2  {padding-left:2em;}  のお陰で理解出来たような次第です。再度お礼申し上げます。有り難うございました。


<style type="text/css">

span.item1      {margin-right: 2em;
        margin-left: 2em}

</style>

AB<span class="item1">C</span>DEFGH


回答(必須): 状態:

お名前(必須):

URL:




[戻る]