W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:VOhZsV さんの質問

line-heightの設定についてすごく悩んでいます。bodyに1.7など一般的な値を設定すると、heightが低い画像に余分な高さが出てしまうことがあります。かといって、何も設定しないと閲覧環境に左右されてしまいます。
コーディングするページ全体でline-heightが統一されている場合は、bodyやpなどに設定すればいいと思うんですが、場所によって若干違う場合はいちいち個別に設定するものか、それか全体に設定して場所によって上書きするか、悩んでしまいます。
みなさん、line-heightはどんなルールで設定していますか?場所ごとにそれぞれ設定していますか?それとも、bodyやpやliなど、上位要素に設定していますか?何かいい方法があれば教えて下さい。

みんなの回答 6 件

ID:NGbeDB さんの回答

img {
line-height:1;
}
にしてみてはどうでしょうか。

ID:VOhZsV

それだと、例えばh3やpの中に画像を入れた時など、解決にならないですよね。

ID:6FFsHH さんの回答

imgにvertical-align:bottomを設定

ID:VOhZsV

余白がどこに空くかが変わるだけなので、解決にならないと思います。

ID:6FFsHH

font-size:0.1も合わせて設定すれば?

ID:VOhZsV

0.1だと無効になります。0.1emとかでいいんでしょうか?やってみましたが、いずれにせよ、余白は消えませんでした。

ID:abUa/u さんの回答

なんのために、remやemや%があるのだろうか。
line-heightのみならず、テキスト全般に言えることだけれど、たとえばジャンプ率とかどうやって設定してるわけ?

ID:VOhZsV

フォントサイズの大きさはどうやって設定してるのか?っていう意味ですか?もしそうなら、emで設定してます。line-heightは単位なしです。
私の質問とどういう関係あるんでしょうか??なんのために、remやemや%があるんですか?純粋に分からないので教えて下さい。
W3Qって、質問に質問で返してくる人が多いのでわけが分からなくなります...。

ID:oh82Ep

これはやってみた?
//kanonji.info/blog/2015/09/15/fit-img-height-in-h1-h2/
自分のやり方で解決法を探そうとしても、なかなかたどり着かないものだから、ある方法を片っ端からやってみるほうが良いのでは?
例えば上記URLはCSSのやり方だけども、そもそも違ったり、やり方がなんか気に食わなければ別にjQueryで該当する画像のline-heightだけ制御しても良いんじゃないですかね。めんどくさいけど。
それこそ、これが正解ってのはあってないような場合もあるわけだし。

W3Qのもう一つの特徴としては、教えて君の分際でやたら生意気な人が多い事ですよね。元来自分でやれよってところを、わざわざ書いてる人の方が変態なのに、そんな変態を期待しているのはもっとわけが分からないですよ。

ID:y3g5/Q

雑魚で坊やだからね

ID:abUa/u

勘違いしないでほしい。
オレはキミに質問しているわけじゃない。
そこに答えがあると言っているだけだ。
ここは学校ではないし、回答の意味を理解する力がないのであればスルーして、自分のレベルにあった満足できる別の回答を探せばいい。

ID:4AUAIB

そこにトピ主の答えは無いな

ID:VOhZsV

みなさんコメントありがとうございます。
line-height:0;は試したことはありますが、altに重要なテキストが入ってる場合はSEOやユーザビリティ的に不利になる場合があると聞いたことがあって、極力使わない様にしています(情報が見つからないため真偽のほどは分かりません)。
ただ、上記お二人の回答から、画像へのline-heightの影響の解決方法をお尋ねしてるみたいな流れになってしまって、さらに私の質問不足もあって申し訳ないのですが、画像に余白が出ることに困っていての質問ではなくて、ページ全体でline-heightってどんな風に設定してますか??っていう質問のつもりでした。すみません。
あと、考えてみましたが、やっぱりremやemや%とline-heightの関係性についてはいまの私には分かりませんでした。
正解はあってないようなもの、というのにはとても納得しました。こうすればOKというものがあるのかなと思って質問したのですが、そういうものはないか、あっても自分にはまだ理解できないものなのかなという結論に至りました。

ID:abUa/u

>そこにトピ主の答えは無いな
議論は結構だけど、理由なく感想を述べるだけならかき回すだけだから書くべきじゃないね。それこそただの感想であってなんの根拠もないよね。

ID:JS3pLz さんの回答

bodyに設定して余白が不要な所はline-height:1でやってます。

ID:VOhZsV

ありがとうございます。

ID:Z.4Mrh さんの回答

line-height より小さい画像って使わないんだけど…。
俺は昔は body には設定せず、p, ul, ol, dl, td, th だけに設定してたな。そんな感じにしたら?
今は全然気にしないで body に設定してるんだけど、なんでそうするようになったんだっけな…。確か古いIEは body に設定しても td に効かなかった気がする。それでそうしてたかな。

ID:VOhZsV

p, ul, ol, dl, td, th だけに設定ですか、なるほどそういう方法もあるんですね。ありがとうございます。
私も普段はline-heightより小さい画像ってなかなか使わないんですが、明朝体のテキストを画像にしたりとか、レスポンシブ対応の時とかに、たまにline-height以下になることがあり困ってました。

ID:5u145d さんの回答

これ、そのまえに、デザインでp要素の下マージン20pxだったとして、コーディングではどう指定する?
マージン20pxって指定したらline-height分が増えるでしょ。
line-heightの幅はブラウザによって上だったり下だったりしそうなんだけど。

ID:VOhZsV

それがいつも悩むんですが、結局PSDで距離測って、それをline-height考慮した形で設定するようにしています。例えば、ガイドラインでここの下は余白20pxとか指定してあっても、実際にはmargin-bottom:20px;を設定すると、line-height分余白が増えるし、そこまで気にしなくていいよっていうデザイナーもいれば、ちゃんと考慮して設定してください、っていう人もいるし。なので、line-heightを変えるともろ影響するので大変です。。それで、なんだか自分がものすごく無駄な設定方法をしてるような気がして、質問しました。。

最終更新日:2015-11-27 (1,560 views)

関連するトピックス

ページ上部に戻る