タグ・デザイン掲示板

[

長い線の表示方法
by 橙

2013-04-06 00:32
調べても謎だったので質問させて下さい。
小説を書いたりしているのですが、その時に、「―――」みたいな長い線を引きたいのです。
これ「―」だったり、これ「─」を数個入力していつも長い線を打ち込んでいたのですが、先日パソコンで見たところ長い線にしていた所がこう「ーーーー」切り離されて表示されていたのです。
携帯からだとちゃんと「―――」くっついて表示されているのですが…
パソコンでも携帯みたいにくっつけて表示させたいのですが、どうすればいいでしょうか？
長い線が書けるタグとかあるのでしょうか？

N02B
[編集]

by 橙

2013-04-13 00:29
Charles様
返答ありがとうございます。
改行や半角スペースって見やすくするために入ってるものだったのですね。知らなかったです…汗

どちらでも問題ないようで、安心しました。
本当にありがとうございました。

N02B
[編集]

by 橙

2013-04-13 00:49
スミマセン、追記です
HEADタグを編集していたら、数個前に記載したタグと違うタグが使われているものを見付けました
これも小説機能なのですが、書いている話のジャンル(ギャグ、恋愛など)でページの見え方を変えているのです、その内のひとつで、
この場合も教えて下さった「letterｰspacing:」と言うところを削除すればいいのでしょうか？

<pc_only><style type="text/css"></style></pc_only>
<smartphone><style type="text/css"></style></smartphone>
<nopc><style type="text/css">
body{
text-align:left;
line-height:105%;
letter-spacing:1px;
font-size:82%;}

.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;}

.line{
padding:1% 0%;
margin:2% 0%;
border-bottom:dashed #c5b69e 1px;}

.footer{
text-align:right;
padding:1% 0% 1% 0%;
border-top:dashed #c5b69e 1px;}

a{
text-decoration:none;}
a:link{
text-decoration:none;}
a:visited{
text-decoration:none;}
a:hover{
text-decoration:none;
color:#c5b69e;}

input,textarea,select,option{
color:#997575;
background-color:#ffffff;
border:solid 1px #cccccc;}

input:focus{
color:#774400;
background-color:#ffffff;
border:solid 1px #622d18;}
textarea:focus{
color:#774400;
background-color:#ffffff;
border:solid 1px #622d18;}
</style></nopc>

このタグになります。

N02B
[編集]

by Charles

2013-04-13 03:02
「letter-spacingプロパティ指定を削除」というたすけあいさまの回答は、質問者さまのご希望である「――」の二つをPCで繋げるためだと思います。

「――」を繋げるには、PCの場合フォントによるものもありますが（カーニングでも字詰めできます）、携帯の場合は多くの機種で「――」は繋がらないです。
参考リンク先に説明があるように、できる限り携帯にも対応させるとしたら、auなどはletter-spacingプロパティにマイナス値を指定する必要がありますね。
しかし、僕のSoftBank携帯はletter-spacingプロパティでは「――」は繋がりません。ご承知と思いますがこの辺りもリンク先に説明があります。

PC向け、及び質問者さまの携帯対応としてだけなら、提示なさったソース中のletter-spacingプロパティ指定を削除なさればいいかなと思います。（――がある文章全体、あるいは――の箇所にのみ適用<span style="letter-spacing:0;">――</span>のどちらかで）

もし、letter-spacingプロパティが対応する携帯にもというご希望であれば、携帯向けのソース内にletter-spacingプロパティにマイナス値を指定してください。

上記とは別ですが
br{
letter-spacing: 0;
}
の指定は、そのままでいいと思います。IEの改行に対するバグ回避用ですから。

943SH
[編集]

by 橙

2013-04-14 23:07
Charles様
返答ありがとうございます。

私の考えとしては、出来うる限りの携帯から繋がって見えればいいと考えていますので、マイナス値指定をしようと思います。
そこで思ったのですが、「-1px」と「-2px」だと結構、「――」のくっつき方に違いが出て来るのでしょうか？

N02B
[編集]

by Charles

2013-04-15 01:24
au携帯（KCP+）利用の友人に表示確認していただいたところ、マイナス値「-2px」がいいそうです。
※ご承知と思いますが、マイナス値はダッシュ及び罫線の箇所にだけ指定してください。

▼確認方法
ダッシュ<span style="letter-spacing:-1px;">――</span>
罫線<span style="letter-spacing:-1px;">──</span>
ダッシュ<span style="letter-spacing:-2px;">――</span>
罫線<span style="letter-spacing:-2px;">──</span>
をページに記述してテスト。

上記のページ表示を、au携帯側の機能EZWeb文字サイズ設定5段階で確認したところ、最大文字サイズで表示確認した場合「-1px」だとダッシュも罫線も一本線にはならず隙間が表示するそうです。
「-2px」なら、5段階の文字サイズ設定全ての表示確認で一本線に繋がるとのことです。（重なって真ん中が太くなることはないです）

ただし、au携帯はメーカーによってもEZWeb文字サイズの仕様が異なります。
例えば、fontで文字サイズ指定の場合1と2は同じサイズの機種もあれば、違う機種もありますし、3と4は同じサイズの機種もあれば、違う機種もあります。

とりあえず、上記のテストにfont-size:10px;を追記して確認していただきましたが、ダッシュと罫線は問題なく一本線に繋がりました。

新機種など、他のau携帯はどうなのか参考になさりたい場合は、ご回答をお待ちになってみてください。

943SH
[編集]

by 橙

2013-04-15 15:51
Charles様
ご友人にまで確認協力をして頂きまして本当にありがとうございました。

自携帯ではタグありタグなし関係なく、「――」も「──」もくっついて見えてしまうので、確認の仕様が無く、困っていたので本当に助かりました
「ｰ2px」で統一しようと思います

HEADにあった「letter-spacing:*px」は消したままなのですが、これは「<span style="letter-spacing:-2px;">――</span>」のタグを使う場合、あるのとないのでは何か変わりますか？
もし「letter-spacing:*px」をHEADに復活させれば、指定した「<span style="letter-spacing:-2px;">――</span>」の部分は離れるのでしょうか？

あと上記とは別で「―――――」と「――」と長さが違っても離れたりはしませんよね？

N02B
[編集]

by Charles

2013-04-16 03:34
▼まず、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内に子孫セレクタ等で指定でもいいです。

943SH
[編集]

by 橙

2013-04-16 12:54
Charles様

詳しく説明して下さってありがとうございました。
何かこれだけで凄くタグに詳しくなったんじゃないかと勘違いしてしまいそうな感じです、これから少しずつでもタグの勉強をしていこうと思います。
本当にありがとうございました。

N02B
[編集]

by たすけあい

2013-04-16 20:59
まだ見ておられるといいのですが。

もし-2pxにするならダッシュを使用した方がいいです。
au機種はメーカーさんによってディスプレイ表示の色に濃淡があるので、色の薄い機種は罫線の色が若干薄く、-2pxだと重なった部分の色が濃くなってしまいこれがとっても微妙です。

私の機種の場合は、最小文字サイズでダッシュは-2px、罫線は-1pxで繋がります。
ダッシュ-2px指定は中サイズ以上で普通に離れます。(中でも微妙に繋がってないです)
罫線は記号なので文字サイズに関係なく-1pxで繋がります。

5段階中、最大文字サイズ(一行7文字程度)で小説をご覧になる方はそうそういないでしょうから、ダッシュか罫線かで-2か-1か選択するのがよいと思います。

G11
[編集]

by 橙

2013-04-17 09:01
たすけあい様
ありがとうございます

そうなのですね！
私は小説の文字サイズの指定を携帯からは最小サイズにしているので、「ダッシュ-2px」「罫線-1px」でも問題なく見れると思うのですが、ではそうなるとパソコンやスマホだと少しくっつくか怪しいって事でしょうか？
前にパソコンから見たときに文字サイズは中くらいだったと思うのですが…

N02B
[編集]

[＃次]

[