- ベストアンサー
行間とフォント
すいません、質問３つです。多いです。 テキストを読みやすくするために、行と行の間を空けたいのですが、どういったタグを、どこに組み込めば良いか教えてください。 あと、普段表示されるフォントって、ゴシック体ですよね？これを明朝体とか、他のフォントにするにはどうすればいいんですか？ それと、“一文字の大きさをそろえる”っていうのかな？普段（メモ帳とかで）文字を書いてるときって“、”や“。”も他の字と同じ大きさで表示されるけど、ＨＰで見ると、少し幅が狭くなっちゃいますよね。あれって、どうしたらならないようにできるんでしょうか？ すいません、わかりにくくて。 分からなかったら言って下さい。 よろしくおねがいします。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
スタイルシートで指定するのが一番でしょうか。 何だったら、外部スタイルシートにして、全てのページにリンクを張って、デザインをまとめて決めてしまう事も可能ですね。 拡張子がcssのファイル（例えばdezainn.css）に、タグを書かずそのまま、 body { font-size: 12px; line-height: 18px; } など、みなさんが仰っているように書いて、HTMLファイルの方に <style type="text/css"> <!-- @import url(design.css);--> </style> というのを入れれば、出来ますよ。 ただ、NNだと、行間の%指定と、font-familyによるフォント名が日本語のものの指定（ＭＳ 明朝など）は、反映されないと思います。 <font face="ＭＳ 明朝">等なら、NN6では有効でした。 行間は、フォントサイズと共にpxで指定されてはどうでしょうか。 ──分かり難くてすみません。
その他の回答 (6)
- selene_pl
- ベストアンサー率49% (102/207)
>％の基準 「その位置での文字の高さ」が基準（=100%）になります。 なので、％で指定すると、文字サイズを変更すると同時に、 改行幅も同じ割合で変わるので、使いやすくなるわけです。 下で「lmeelm」さんは、font-sizeを13pxと指定していますが、 こう指定してしまうと、文字が小さすぎると思っても、 ブラウザメニューからサイズの変更ができなくなるので、 なにも指定しないか、font-size:100%のように、％指定がいいと思います。 これを読むだけではいまいちわからないかもしれませんが、 自分でいろいろ値を変えて試してみれば、ある程度わかると思います。 ＃解像度1600x1200＋ネスケだと、font-size:13pxはかなり小さいので・・・
お礼
つまり、ブラウザで文字サイズを変えても、それに応じて行間が開くってことですよね？ なるほど、px 指定だと、ブラウザで文字の大きさ変えられませんよね。 ありがとうございました！！
- lmeelm
- ベストアンサー率52% (18/34)
スタイルシートの指定で行なった方がいいと思います。 みなさん改行幅はpx指定を教えてくださっているようですが、私はいつも%で指定しています。 それと、フォントの種類は下記のように指定をすると、最初に指定されているものから順に 閲覧者の環境にあるフォントで表示させることができます。一番最初に指定している フォントがない場合、2番目に指定していているフォント、それがなければ、、、、 というようになります。マックのデフォルトフォントのOSAKAはＭＳＰ ゴシックと フォント幅が近いようです（確かではありません）。 あまり、フォント幅の異なるフォントで指定してしまうと閲覧者の環境にそのフォントがない場合 レイアウトがかなり崩れてしまうかもしれません。妥当なフォント指定のほうがいいと思います。 また、下記のように、BODY,P,TDとして指定をするとページない全てのBODY,P,TDタグに 同様のスタイルがかかります。文字幅のスタイル指定含めて下記ソースを参考になさってみて下さい。 <HTML> <HEAD> <TITLE>フォント、改行幅のスタイル指定</TITLE> <STYLE type="text/css"> <!-- BODY,P,TD{ font-size:13px; font-family:Arial,"ＭＳ Ｐゴシック","ＭＳ Ｐ明朝"; line-height:150%; letter-spacing:2px; } --> </STYLE> </HEAD> <BODY> </BODY> </HTML>
補足
わかりやすく書いて下さってありがとうございます！ えっと、％って何を基準として考えればいいのでしょうか？ すいません。よろしくお願いします。
- peso
- ベストアンサー率41% (40/97)
CSS を使うとすべて可能になります。 例えば、 <BODY style="line-height:15pt; font-family:'ＭＳ 明朝';"> line-height は行の高さを 数値 + 単位(px , pt, cm など)で指定します。 font-family はフォントを指定します。ここで明朝体を選ぶと明朝体で表示されます。ただし、相手の環境にないフォントを指定すると無効になります。 ここにプロポーショナルフォント以外（Pのつかないフォント）を指定するとたいてい等幅フォントになります。 ただし、すべてのブラウザが CSS に対応しているわけでもなく、 CSS を使用しないようにしている人もいるのでこの方法で絶対成功するわけではありません。
お礼
CSS使っても必ずってわけじゃないんですね。 Pのつかないフォントは、たいてい等幅フォントなんですか。 ありがとうございました。
- GOLDEN
- ベストアンサー率46% (283/607)
1番の質問ですが、<p>または<div>のタグに、[style="line-height: 20px"]とい うように指定することで実現できるようです <p style="line-height: 20px">～</p> まぁ、スタイルシートの定義を直接内部に取り込む方法ですね 但し、W3Cの勧告では、文の構成と見栄えは別々に定義すべき、となっていますの で、ヘッダ部で宣言しちゃいましょう <style> p { line-height: 20px; } </style> <head></head>の間にこれを書いてください そうすれば、<p></p>で挟んだ部分が全部この指定を受けます 後は、20pxという数字を、見やすい大きさに調整すればOKです
お礼
わかりやすい説明ありがとうございました！ 早速いくつぐらいがいいか検討してみますね。 これってpでなくても（tdとか）いいんですよね？ ありがとうございました。
- twelve
- ベストアンサー率20% (9/44)
多分的外れな回答ですが・・・ <pre></pre>というタグがあります これに挟まれた文は整形済みという事でそのまま表示されます 例 <pre> たとえば改行するとき <BR>タグを使わなければいけませんし 特殊な記号（＜とか&とか）はそのまま打つと 表示されないってことがあります それを表示する方法はほかにもあるのですが 今手元に資料が無いので（fontタイプ変更含む） ご勘弁を </pre> ってな具合です どこかにメモしておいた内容やらをHtmlに直すとき 一々<BR>を打つのが面倒なときなどに使っています 多分 邪道？かもしれませんが くうはくも開けれた・・・と思います
お礼
<pre>か。そういう手もあるんですね。 試してみます。
- GOLDEN
- ベストアンサー率46% (283/607)
なるべく、１個の質問ごとに分けた方がいいですよ １：スタイルシートを使わないと実現できないかと思いますが ２：自分の環境を変えるのか、それとも見る人全員変えるのかで変わりますが 自分の環境を変える場合は、ツール→インターネットオプション→フォントの 中のフォントをお好きなのに変えてください 但し、後述の方法で指定されているフォントがある場合は、それが優先されま すが 自分のページを見る人全員変える場合は、 <font face="フォント名">～</font> で[～]のところに本文を書いてください 但し、"フォント名"に該当するフォントが無い場合は、ブラウザで設定されて いるフォントが採用されます 微妙な間違いでも駄目です(例えば、MS P明朝はダメ。MS Pは全角が正しい) ３：<tt>～</tt>で本文を囲むことで、固定幅フォントを採用します 但し、この場合もブラウザの設定の固定幅フォントにプロポーショナルフォン トが設定されている場合は、プロポーショナルになってしまいます
お礼
あ、一つづつに分けたほうが良かったのですか？ すいませんでした。今度からはそうしますね。
お礼
そんなやり方があったのですか！！（驚） それだと変更したくなったときにいちいち全部のページ直さなくていいんですね。 ら、らくちんだぁ・・・。（←いちいち全部直してた人） ＮＮだと、％指定効かないのですか？！フォントも？！ い、いいやり方だと思ったのですが。 どれも一長一短ってことですかね。 ありがとうございました。