フォントサイズと行間についての質問

前へ 次へ
このQ&Aのポイント
  • フォントサイズと行間についての質問です。具体的には、フォントサイズ12pxの場合、行間はどのように指定すれば良いか、また、小数点以下の値を使用しても正常に動作するかについて知りたいと思っています。
  • また、フォントサイズ13pxで行間を21pxに設定する場合、line-heightの値はどう計算すれば良いかについても教えてください。
  • YUI 2: Fonts CSSを利用していますが、デフォルトのフォントサイズを100%に設定し、行間を21pxにしたい場合、どのように指定すれば良いかも教えてください。
回答を見る
  • ベストアンサー

フォントサイズと行間

フォントサイズと行間についてご質問します。 フォントサイズ12px。文字上下に3pxのアキをとり行高18pxとする場合、 スタイルシートは下記ようになると思います。 font-size: 12px; line-height: 1.5 フォントサイズが13pxで文字の上下に4pxのアキをとり行高21pxとする場合、line-heightは21/13=1.61538462と計算されます。 font-size: 13px; line-height: 1.61538462 このように小数点以下が多い場合でもスタイルは正常に動作するのでしょうか(ちなみに13pxで行高19の場合1.46153846になります)。 普段、YUI 2: Fonts CSSを利用しております。デフォルト(100%)は13pxです。文字の上下に4pxのアキをいれ、行高を21pxに設定したいと思っております。その場合 font-size: 100% line-height: 1.61538462 というのは正常に動作するのでしょうか。

  • CSS
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • yumitsuki
  • ベストアンサー率52% (167/321)
回答No.1

line-heightも、font-size同様、絶対値(ピクセル数など)で指定出来るようです。 ご質問の場合、font-sizeをピクセル数で指定するなら、 font-size: 12px; line-height: 18px; などとするのがもっとも確実だと思われます。 ただし、絶対値で指定することを避けるべきだとする考え方もあるようです。 http://potato.2nd-half.jp/tips/css/line-height.php

infotown
質問者

お礼

早速のご回答ありがとうございます。 >font-size: 12px; >line-height: 18px; >などとするのがもっとも確実だと思われます。 今回は相対表示で指定したいと思っています。 参考URL、とても勉強になりました。 ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 2beeブログで行間と文字の間隔を指定したい

    みなさん、こんにちは。 私は2beeのブログを利用しているのですが、行間と文字の間隔をCSSで空けようとすると、改行がおかしくなってしまいます。ちなみに私のヘッダーに打ったタグは… <style type="text/css"> <!-- H1{font-size:10px; font-weight:lighter; line-height:18px; letter-spacing:4px;} H2{font-size:10px; font-weight:lighter; color:#555; line-height:18px; letter-spacing:4px;}--> </style> の２種類です。また、これを使わずに、ボディに <span style="font-size:10px; font-weight:lighter; line-height:18px; letter-spacing:4px;"><!--body--></span> と打っても、行間が揃わず、改行も上手くいきませんでした。 とても困っているので、いい方法がありましたら、ご回答おねがいします。

  • CSS・フォントサイズ変更は どこをいじれば？

    ホームページビルダー17で、以下のサイトのテンプレートをダウンロードして編集中です。 http://nikukyu-punch.com/template/giin1_pink/index.html 本文部分の文字が小さいのでもう少し大きくしたいのです。 これまではテーブルタグで作っており、CSSは初心者です。 文字部分を右クリックしてスタイルの設定を見ると 本文や見出し部分などのfont-sizeが100％だったり75％だったりします。 たぶんCSSのfont設定が細かく分かれているのでしょうが… あまり細かく分類せず、右のサイドメニューと本文の文字の大きさを font-size : 14px line-height : 150% にしたいというのが希望です。 このようなスタイルの設定の変更はどうすればいいのでしょうか。 スタイルシートマネージャーから変更すればいいのでしょうか？ 一度スタイルを削除すると戻せないようなので、なかなか試行錯誤に踏み出せません。 画像などは変更できたのですが。 ご教授願えませんでしょうか？

  • 【CSS】フォントサイズや幅や高さの指定値の範囲を教えてください。

    <STYLE TYPE="text/css"> <!-- .sample { font-size: 123px; height: 50px; color: red; } --> </STYLE> たとえばこんなような感じでコードを書いてみたのですが、 font-size: 等で指定するサイズや％値には範囲は存在するのでしょうか。たとえば％値なら0％～100%までなのでしょうか。

  • フォントサイズがaタグで囲うとだと元に戻る

    すみません。なぜかわからず困っています。よろしくお願いします。 .navi{ text-align:right; font-size:x-small; padding:5px; } で、.naviの中のテキストはx-smallになるのにaタグで囲ったテキストの部分のみ元々のsmallサイズのテキストになってしまします。 aタグを指定して font-size:x-small;とすると表示がxxx-small位になって読めなくなります。いったいなぜなのでしょうか・・・ *{ margin:0px; padding:0px; font-style:normal; font-family: Osaka,Geneva,Arial,Helvetica,sans-serif; font-size:small; line-height:1.5; list-style:none; }

  • cssで最適なfont-sizeの指定は？

    （ブログのカスタマイズ初心者です。過去ログを探しても見つからなかったので、質問させて下さい） cssでのfont-sizeの記述は、どのような形が最適でしょうか？ px, em, ％, mediamやsmall、その他、単位が色々あって、迷ってしまいます。 pxで指定するのが一般的な気がしますが、IEで文字サイズを変えた時に、変わらないのが不便な気がします。 body {font-size: small;　 line-height: 160%; } のような形が良いように思いますが、あまり見かけません。 皆様は、どのようにしていらっしゃるのか、教えて頂けたらと思います。 よろしくお願い致します。

  • スタイルシートでh1の属性行間のを高さを17ピクセルにしたい場合

    スタイルシートでh1の文字の大きさを変えていますが、表示すると本来の行送りと同じ分の高さが出て、デザイン的に高さがありすぎる行間になっています。 この場合、行高さの設定をするのですか。line-height:17px;で指定しても直らないようなんですが。 この指定で合ってますか。

    • ベストアンサー
    • HTML
  • フォントと文字サイズの指定方法

    HTML初心者です。 どなたか助言ください。 以下のソースのようなテンプレ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=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div> 　　＊＊＊＊以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p> 　　＊＊＊＊ ......同じような内容が続く </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • gooブログのフォントサイズについてなんですが・・・

    gooブログはCSSの編集ができるのでテンプレートのCSSを変えてフォントサイズを小さくしているのですが、英数字が極端に小さくなってしまうので悩んでいます。 HTMLでいう<font size=1>のサイズにしたいのですが、そうすると英数字が読めないほど小さくなってしまって・・・ CSSは↓です。 /* エントリー本文 */ .etBody { font-size: 8px; line-height:160%; word-break:break-all; text-align: left; } テンプレートはクリアホワイト左です。 10px、9pxだと大きすぎ、（どちらにしても英数字は小さくなってしまいます）8pxだと読めないほどになってしまい・・・ 他のブログではそんなことは無いので似たようにしたいのですが、できません。困ってます。 なにかアドバイスお願いします。

  • YUI fonts cssについて

    YUI fonts cssを使い、ホームページを制作しようと考えています。 そこで質問なのですが、YUI fonts cssを使用し作ったサイトというのは プラウザで文字のサイズを変更できるのでしょうか？ （例えばIEでしたら文字のサイズを変更から「最大」にすれば文字が大きくなると考えて良いのでしょか？） いくつかの解説サイトを拝見して、文字のサイズはユーザーが自由に変えれるのだろうと思ったのですが 試しに数ページ作ってサーバーアップした所、いくら文字サイズを変更しても文字が大きくなりません。 YUI fonts cssというのは、相対指定ではなく絶対指定に近い物なのでしょうか・・・？ ユーザーに高齢の方も多いサイトですので、文字サイズを変えれない仕様にするわけにはいかず このままYUI fonts cssを使用するか、諦めてemで指定しなおすか悩んでいます。 詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。 ※以下のコードをbace.cssに書き、読み込ませています。 @charset "utf-8"; body { font:13px "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif; *font-size:small; *font:x-small; } table { font-size:inherit; font:100%; }

    • ベストアンサー
    • HTML
  • 行間を開けたい

    ヤフーオークションのオークタウンを使って出品したいのですか 次のものをつかって行間を開けました <font size="3"><sup>テキスト～</sup></font>又は <SPAN style="LINE-HEIGHT: 23px">　</SPAN> 確認画面では はなれたのですがそれを保存すると消えて前と同じになります 行間を開けて保存できる方法を教えて下さい

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する