メッセージの編集
お名前
本文
▼まず、letter-spacingプロパティのCSS仕様から理解したほうがいいと思いますから、主なことを簡単に説明しますね。 letter-spacingは、親要素に指定があれば子要素に継承されます。(PCの場合はモードやブラウザ仕様にもよりますが、携帯の多くはtableの内容や置き換え要素には継承しない) 例えば、HEAD内にbody{letter-spacing:2px;}と指定があればレイアウト内の文章全てに適用されます。 しかし、子要素に同じletter-spacing指定があると、その子要素内の文章は子要素で指定された値が上書きされ適用されます。 上書きというのは、親要素と子要素の指定がプラスされるのではなく、親要素の指定が打ち消され新たな子要素の指定が適用されるという意味です。 それから、マイナス値はUA依存があり解釈が異なります。(全ての端末が必ずしも字間を狭くするとは限らないことを意味します) 上記の仕様を踏まえ、以下の質問者さまが提示なさった携帯向けのソースを再度見てみましょう。 <nopc><style type="text/css"> body{ text-align:left; line-height:105%; letter-spacing:1px; font-size:82%;} ▼親要素のbodyセレクタに1pxの値指定があります。 .all{ padding:4% 3%; margin:3% 4%; text-align:left; background-color:#ffffff; border:solid #c5b69e 1px;} .top{ padding:1% 0%; margin:2% 0%; letter-spacing:1px; font-size:120%;} .midashi{ text-align:right; padding:1% 0% 1% 0%; margin:1% 0% 1% 0%; letter-spacing:1px; border-top:dashed #c5b69e 1px; border-bottom:solid #c5b69e 1px;} ▼子要素になるクラスセレクタ(.topと.midashi)に1px値指定があります。 ……これ以降のソースは、焦点のletter-spacing指定がないので省略…… </style></nopc> ▼いかがですか?ご確認なさるとわかると思いますが、子要素 .top と .midashiのクラスセレクタに指定されてる値は親要素のbodyセレクタと同じ値ですから、.topと.midashiセレクタに指定しなくても親要素bodyの値のみで継承されます。 (携帯の多くはtable内や置き換え要素には継承しませんが) 字間を変更したい箇所がある場合なら、セレクタに個別指定でいいと思います。 ▼「携帯対応として」の質問&回答になりますから、質問者さまの上記の携帯向けソースを元に、以下の質問について説明しますね。 「HEADにあったletter-spacing:*pxは消したままなのですが、これは「<span style="letter-spacing:-2px;">――</span>」のタグを使う場合、あるのとないのでは何か変わりますか?」について ▼letter-spacing:1px;指定がある場合 別に問題ありません。子要素のspanに別の値を指定することになるので、レイアウト内容に<div class="top">あかさたな<span style="letter-spacing:-2px;">――</span></div> を記述なされば、「.topセレクタ」指定であるあかさたなの文章に字間1pxが表示され、――はspan要素指定により一本線に繋がります。 ▼letter-spacing:1px;指定を全て消した場合 あかさたなの文章の字間だけが指定なしのデフォルトになります。―は、span要素でマイナス値指定をしてあるなら一本線に繋がります。 「もしletter-spacing:*pxをHEADに復活させれば、指定した<span style="letter-spacing:-2px;">――</span>の部分は離れるのでしょうか?」について ▼前記の説明通り、子要素になるspan要素のマイナス値指定が上書きされますから、レイアウト内に正しくHTML(入れ子)を記述なされば――は一本線に繋がります。 「あと上記とは別で―――――と――と長さが違っても離れたりはしませんよね?」について ▼<span style="letter-spacing:-2px;">―――――</span>というように、―を開始タグと終了タグ内に記述なされば―が幾つあっても一本線に繋がります。つまり、―が多ければそれだけ長い一本線になります。そして、当然ですが文字サイズに応じて長さも変わります。(letter-spacingのマイナス値に対応してるau携帯などは) ▼ここでは、わかりやすくspan要素をstyle属性でレイアウト内に指定してますが、HEAD内に子孫セレクタ等で指定でもいいです。
編集パス
編集
記事削除
×
人気急上昇中のBL小説
BL小説 BLove
- ナノ -