タグ・デザイン掲示板

[

パソコンでも行間を空けたい
by あゆみ

2015-12-13 14:07
小説機能の文字デザインについての質問です。過去のものを調べてたくさん出てきたのですが自分で試してみても整理できず思うようにいかないのでよろしければアドバイスお願いいたします。

小説をパソコンでも読みやすいようにタグを設定したいです。携帯からの表示では行間が空くのですが、パソコンでは行間が空きません。
テーブルの設定はパソコンのみで、携帯からは両端に二文字程度の空きができるように設定してあります。
ここまではうまくできたのですが、次はパソコンから閲覧して行間が空くようにしたいのですがうまくいきません。

文章画面レイアウト
<blockquote style="margin:0em 1em 0em 1em"><blockquote style="margin:0em 1em 0em 1em"><pc_only><Center><table width="40%"><tr><td></pc_only>#text#<pc_only></td></tr></table></Center></pc_only></blockquote></blockquote>

HEAD内
<style type="text/css">

</style

というようになっています。

pc
[編集]

by e

2015-12-13 15:45
行間 CSSで検索
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=1685&viewType=thread

ご質問とは関係ないですがblockquoteとtableはレイアウトに使うタグではないです

pc
[編集]

by ブルー

2015-12-14 08:12
編集内の記述は提示なさってるのだけですか？
だとしたら、ご回答のようにパソコン向けに行間指定がありませんね。body{letter-spacing…;}は行間指定ではなく、横に並ぶ１文字と１文字の間隔指定ですから。

それから、パソコンのブラウザによって互換モードの場合、bodyに指定してもtable内に適用されないCSSがあります。以下がその一部です。
line-height
letter-spacing
text-decoration
font-size
適応させるやり方はありますが、標準モードになさったほうが得策です。DOCTYPE編集画面内にHTML5の文書型宣言を記述、あるいはIE向けにIE独自の標準モードにするmetaタグをHEAD編集画面の一番最初に記述します。

ここからは誤りの指摘です。余計なことでしたらすみません。
は消したほうが良いです。それと半角小文字に統一。ミスと思いますが </style は、</style>です。
あと、誤りではないですが<blockquote style="margin:0em 1em 0em 1em">を2度使わなくても1度ですみます。(blockquoteタグじゃなく、とりあえずdivタグで)

ご回答にあるように、tableタグや引用文を示すblockquoteタグのレイアウトは弊害があります。単に文法違反だからじゃなく、意外かもしれませんがtableタグは、古いガラケーも含めてパソコンもブラウザの実装によってバグもあり扱いが難しいです。バグでなくてもLynx や MOSAIC などで問題があります。それらのブラウザでtableタグでのレイアウトを見ると悲惨なことこの上ない状態になります。
また、tableタグを逐次表示できないブラウザですと、特に文書全体を一つのtableタグで括っている場合は全く何も表示されない時間が長く続きます。ですから、tableタグは純粋に表として使うよう推奨されているのです。
そして引用文を示すblockquoteタグは、音声ブラウザからだと貴方の文章も画像も、引用です。と読み上げてしまいますし、視覚系ブラウザも設定によって引用符などや色分けで表示してしまいますから、tableタグと同様の理由で純粋に引用箇所として使うよう推奨されてます。

このように、いろんな環境(ブラウザ)を考慮したほうが無難なので、レイアウト目的で使わないほうが良いとされてます。現在のガラケーでも使わずに済むと思います。

pc
[編集]

by あゆみ

2015-12-14 12:57
お二方、ご回答ありがとうございました。お二方のアドバイスを受け、

文章レイアウトに
<div style="line-height:200%;">#text#</div>

HEAD内
<style type="text/css">
a{text-decoration : none ; border-bottom : dashed 1px #c4bda9 ;}
body{letter-spacing:2px}
</style>

としたところ、スマートフォンでは右側に隙間のような空白ができるようになってしまったため、現在HEAD内は空にして行間のみ反映されるようにいたしました。

パソコンでも読みやすいようにとテーブルを使って画面いっぱいに文字が広がらないようにしたのですが、逆効果だったのですね。

また試行錯誤していきます。ご回答ありがとうございました。

pc
[編集]

[