- ベストアンサー
スタイルシートのline-hightについて教えてください
下記アドレスが現在テスト中のサイトのアドレスです ■HTML http://sangoclip.web.fc2.com/test/ ■デフォルトCSS http://sangoclip.web.fc2.com/test/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/test/shared/css/reset.css ■Yahoo! UI LibraryのFonts CSS http://sangoclip.web.fc2.com/test/shared/css/fonts.css フォントサイズは全て同じです(12px相当) ラインハイトは左から1.1 真ん中1.5 右1.8と 設定しているのですが ラインハイトの設定の違いによりそれぞれの最初の行上部と最後の行の下部の余白が違ってしまいます。 ラインハイトを大きく設定すればするほど上下に無駄な余白がとられてしまうのですが厳密に1px単位で余白を設定する際にとても困ってしまいます。 上下に余白を作りたくない時でもラインハイトの影響を受けて余白が出来てしまうのですこれはCSSの仕様上しょうがないのでしょうか？？ それとも何か解決方法はあるのでしょうか？ どなたかアドバイスいただけると助かります。 宜しくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
> ラインハイトの設定の違いによりそれぞれの最初の行上部と最後の行の下部の余白が違ってしまいます。 たぶんそれはmarginかpaddingだと思います。 そっちの設定は同じにしてますか？
お礼
やはり仕様なんですね 後はpaddingやmarginで上下の余白設定をして対応するしかないんですね 貴重なご意見ありがとうございました
- nori_007
- ベストアンサー率35% (369/1048)
ブラウザの環境は？何を基準に考えていますか？ この辺の挙動は、ブラウザで変わると思います。 また、現実的には 1px 単位で余白の設定なんて無理だと思います。余裕を持ち、文字のサイズを変更しても大きく崩れない等の配慮も必要だと思います。 一番良いは目標になるサイトのソースを参考にするのが良いと思います。
お礼
やはり仕様なんですね 後はpaddingやmarginで上下の余白設定をして対応するしかないんですね 貴重なご意見ありがとうございました
関連するQ&A
- スタイルシート IE環境でのバグ
下記アドレスが現在テスト中のサイトのアドレスです。 グローバルメニューボタン下部(添付画像の赤枠の部分)に2～3px程の白い隙間がどうしてもできてしまいます。 色々CSSの設定を試してみたのですがどうしてもWIN XP IE6の環境だけ回避できないのです その他の一般的なモダンブラウザでは大丈夫なのですが・・・ どなたか原因を教えていただけると助かります。 宜しくお願いします。 ■HTML http://sangoclip.web.fc2.com/lesson01/ ■デフォルトCSS http://sangoclip.web.fc2.com/lesson01/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/lesson01/shared/css/reset.css
- ベストアンサー
- CSS
- スタイルシートのバグです(2)
下記アドレスが現在テスト中のサイトのアドレスです。 バグの内容は添付画像の赤枠の部分なんですが CSSの指定は見出しタグh3の下部にボーダーを設定してその中にテキスト要素を入れてフロートさせて右へ左へ配置しているのですが なぜか見出しタグh3で設定したボーダーの部分にテキストが乗ってきてしまって打ち消し線みたいになってしまうのです。 ソースも無駄な部分は消して今の状態までスマートにして色々試行錯誤してみたのですがどうにも解決できません。 ちなみに一般的なブラウザー全てで同じ現象になるのでそもそも文法が間違っているのですかね？？ どなたかご教授いただけると助かります。 宜しくお願いします。 ■HTML http://sangoclip.web.fc2.com/lesson03/jyuken/ ■デフォルトCSS http://sangoclip.web.fc2.com/lesson03/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/lesson03/shared/css/reset.css
- ベストアンサー
- CSS
- Yahoo! UI LibraryのFonts CSSについて
YAHOOが提供している Yahoo! UI LibraryのFonts CSSを利用して各ブラウザー毎のフォントサイズを統一しようとしているのですが 下記参考サイトで紹介している通りに設定をして使用したのですがどうもうまく適用されません。 ■参考サイト→http://thinkit.jp/article/813/1/ ちなみにYahoo! UIのFonts CSSはローカルにデータを持たずにヤフーサーバーから直接リンクして使用しています。 そもそも使用の仕方が間違っているのでしょうか？？ 問題がどこにあるのかアドバイスいただけると助かります。 下記に現在テスト製作中のサイトのアドレスを記載しておきますので中身を見ていただきアドバイスいただけると助かります。 ■HTML http://sangoclip.web.fc2.com/test/ ■デフォルトCSS http://sangoclip.web.fc2.com/test/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/test/shared/css/reset.css ■Yahoo! UI LibraryのFonts CSS http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css
- 締切済み
- CSS
- スタイルシートのバグです(3)
下記アドレスが現在テスト中のサイトのアドレスです。 添付画像の赤枠の部分が ブラウザーの文字サイズを大きくしていき 横幅がいっぱいになるとなぜかカラム落ちしてしまいます。 親ボックスには横幅のサイズを指定しているものの 子要素には特に幅のサイズ指定などはしていないにもかかわらず なぜかカラム落ちしてしまいます。 仮に子要素の幅のサイズ指定をしてみたのですがそれでも同じでした 原因がよくわかりません？？ ちなみに一般的なブラウザー全てで同じ現象でした。 どなたかご教授いただけると助かります。 宜しくお願いします。 ■HTML http://sangoclip.web.fc2.com/lesson03/jyuken/ ■デフォルトCSS http://sangoclip.web.fc2.com/lesson03/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/lesson03/shared/css/reset.css
- ベストアンサー
- CSS
- Win IE5.5～6.0での余白に関するバグ
最近やっと完全スタイルシートによりコーディングをマスターする為に勉強を始め何とかある程度形になるまでコーディングが出来たのですが Win IE5.5と6.0でバグが発生してしまいました。 幅532pxのボックス内に532pxの画像を配置した所右側に1px～2pxの無駄な余白が出来てしまうのです 他のモダンブラウザーでは全て平気なのですがIE5.5と6.0でこの現象が発生してしまいます。画像を添付しましたので症状を見てください。 それと下記アドレスに現在製作中のHTMLファイルとCSSファイルをアップしてありますのでお暇な時にでも覗いていただきアドバイスいただきたくおもいます。 宜しくお願いします ■HTML http://sangoclip.web.fc2.com/test/ ■CSS(レイアウト用) http://sangoclip.web.fc2.com/test/shared/css/default.css ■CSS(デフォルトCSSクリアー用) http://sangoclip.web.fc2.com/test/shared/css/reset.css
- ベストアンサー
- CSS
- line-height
<html> <head> <title>test</title> </head> <body> <style type="text/css"> p.example1{ line-height:10em; } </style> <p class="example1">test1</p> <p class="example1">test2</p> </body> </html> line-heightを使うと、上の余白もあいてしまうのですが 行間だけ開けて、上下の余白は開けない方法はありますか？ 不可能だったら文字と文字の間に改行を入れたりした方がいいのでしょうか？
- ベストアンサー
- CSS
- フォントサイズと行間
フォントサイズと行間についてご質問します。 フォントサイズ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
- メニューをスタイルシートで設定
画像を使用したメニューをULタグとLIタグで作成し、 スタイルシートで余白等の設定しましたが、画像の下に余白が入ってしまいます。 背景色をつけたところ、LIタグに余白がついていることは 確認できたのですが、これをなくす方法が分からずにいます。 HTML----------------------------------------------------- <UL> <LI><IMG src="img/img1.gif" width="265" height="21"></LI> <LI><IMG src="img/img2.gif" width="265" height="21"></LI> <LI><IMG src="img/img3.gif" width="265" height="21"></LI> </UL> CSS----------------------------------------------------- UL { list-style-type:none; margin:0px; padding:0px; } LI { padding:0px; margin:0px; } アドバイスを頂けると助かります。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- スタイルシートで点線のアンダーライン
スタイルシートを使用し、インデントを付けたテキストに点線のアンダーラインをつけようとしています。 【CSS部分】 .honbun { border-bottom-style: dotted; border-left-width:20px; border-bottom-color: #523D2F; border-bottom-width: 1px; margin: 20px; line-height: 20px; } 【html部分】 <p class=honbun> テスト<br> テスト<br> テスト<br> </p> 【画面結果】 テスト テスト テスト ------ すべての行のテキストのアンダーラインに、点線のアンダーラインを入れたいのですが、 ひとつの要素としてみてしまうのか、できません…。 一行づつにスタイルシートで点線を指定しなければ実現できないのでしょうか。（そもそも不可能？） よろしくご教授ください。どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- スタイルシート【複数の画像の配置について】
初めまして、質問させていただきます！ 今、サイトを構築中なのですが、そこで困ったことがおきました。 <link rel="stylesheet" type="text/css" href="./default.css" media="all" /> <style type="text/css"> <!-- Body{ margin:0 margin:0;} --> IMG.a{ position: relative; left:60px; top:60px;z-index:1;} IMG.b{ position: relative; left:100px; top:20px;z-index:0;} </style> </head> <Body Style="margin:0 margin:0;"> <img class="a" src="**" alt="**" width=197 height=143> <img class="b" src="**" alt="**" width=78 height=59> このように、スタイルシートで画像の位置を指定しているのですが、 画像を増やしていくと、下（または上）に余白が出来き、どんどんスクロールが出来るようになってしまい、うまく画像を配置できなくなってしまいます。 ちなみに画像はFireworksで作ったものを書き出したものです。 他にタグを打ち込むなどで、解消できるのでしょうか？ 構築は初めてで、タグの知識もほとんどありません。 どうか、よろしくお願いいたします。
- 締切済み
- HTML
お礼
やはり仕様なんですね 後はpaddingやmarginで上下の余白設定をして対応するしかないんですね 貴重なご意見ありがとうございました