line-heightを指定した際に発生する要素の上下の余白(文頭の行の上と文末の行の下)についてご相談です。
行間を指定する上で仕様上仕方のない空白なので、普段は
(1)多少の余白なので無視する
(2)次に続く要素が背景色or画像orボーダーありの要素以外のときは別途CSSでマージンを調整する
(3)ブロック要素の内側に<span>でネガティブマージンを指定して上下のline-heightを相殺する
のいずれかで対応しています。
(1)はともかく、(2)は汎用性がいまいちで、構成が変わって画像が間にはいったりしたらクラスをいちいち付け替えなくてはなりません。
(3)に関しては文書構造上余計なタグが入ってしまいますし、ネガティブマージンの多用でかなりカオスなことになってしまいます…
かといってデザインに気を使ったサイトやline-heightをかなり広めに指定したいときなど、
見過ごせないときもあるなあと思い、皆様がどう対応しているのかご教授いただければと思います。
よろしくお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
:beforeや:afterを解釈できる比較的新しいブラウザであれば、一応こんな感じで回避できますね。
今、思いついただけの方法なので、ベストプラクティスかどうかは謎ですがwp{
background: #f00;
line-height: 3;
font-size:15px;
}
p:before , p:after{
display:block;
content:"";
line-height:1;
height:1px;
width:1px;
}
p:before{
margin-bottom:-15px;
}
p:after{
margin-top:-15px;
}
:beforeや:afterを解釈できないブラウザに関しては、javascriptで対応させる感じかな。
No.1
- 回答日時:
基本的には、(1)です。
永続スタイルシートには
html,body{margin:0;padding:0;font-size:14px;}
h1,h2,h3,h4,h5,h6,p{line-height:1.8em;margin:0;}
p{text-indent:1em;}
としています。
途中に画像が入ると言う想定がよくわかりませんが・・
例えば本文(section)中の段落はline-height:3em;だとして
div.section p{margin:0;line-height:3em;}
挿絵的要素(class="figure")があれば
div.section *.figure,div.section *.figure p{margin:-1em;line-height:1.8em;text-align:center;}
>(2)は汎用性がいまいちで、構成が変わって画像が間にはいったりしたらクラスをいちいち付け替えなくてはなりません。
これもわかりません。ひょっとしてデザインのためにclass名をいちいち付与しているのですか?もしそうでしたら、根本的に間違っています。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ためのものです。その上でその文書構造を利用してスタイルシートを書くのです。
HTML5では、DIVは他に適当な要素がないときの最後の最後の手段としてDIVを使うと明記されましたが、元々HTML4.01の時代からそうでした。
【引用】____________ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html … )]より
訳すと
『著者は、他に適切な要素がないときの、最後の手段としてDIVを使用することが強く奨励される。DIVより適切な要素を使用することは、読者には良いアクセシビリティに、著者には容易な保守につながる。』
<div class="section">
<h2>見出し</h2>
<p>(1)はともかく、(2)は汎用性がいまいちで、構成が変わって画像が間にはいったりしたらクラスをいちいち付け替えなくてはなりません。</p>
<p>3)に関しては文書構造上余計なタグが入ってしまいますし、</p>
<p class="figure"><img src="./images/abc2.jpg" width="100" height="100" alt="扇風機"></p>
<p>ネガティブマージンの多用でかなりカオスなことになってしまいます…</p>
<div class="figure">
<p><img src="./images/abc2.jpg" width="100" height="100" alt="扇風機"></p>
<p class="figcaption">これは扇風機</p>
</div>
</div>
に
先のスタイルシートで添付図のようになるはずです。firefox+firebug・・
スタイルシートを読むと一目瞭然にわかるのは
div.section p{margin:0;line-height:3em;}
↑本文中の段落は行高さを3emにする。
div.section p.figure,div.section div.figure p{
↑本文中の挿絵中の段落は
margin:-1em;line-height:1.8em;text-align:center;
とHTMLを見なくてもどうデザインしているかわかりますし、デザインを変えるためにHTMLを弄る必要もありませんね。
★HTMLはデザインを一切考えずに、ひたすら将来の自分(あるいは第三者)のメンテナンス性、検索エンジンに理解できるよう、様々なユーザーエージェントに利用できるよう・・文書構造だけをマークアップする。
★スタイルシートはその文書構造を元にmarginやline-heightやpaddingなどを自在に調整する。
そうすると、
汎用性とか、構成が変わって画像が間にはいったりしたとか、文書構造上余計なタグとかの悩みはそもそも存在しなくなるのでは?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- Word(ワード) ワード。長い四角の中に文字を体裁良く入力するには。 2 2022/09/24 14:19
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- 片思い・告白 【至急お願いします!】これを脈アリと思ってもいいのでしょうか? 7 2022/12/29 06:00
- C言語・C++・C# C言語初心者 構造体 課題について 1 2023/03/10 19:30
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- HTML・CSS 依頼したWEBサイトの修正に追加料金がかかる 10 2022/10/24 09:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
div要素が重なってします
-
html の divとtable の役割
-
グラフィックス
-
divとpの使いわけ
-
画面を縮小するとカラムが落ち...
-
フッターがウインドウの一番下...
-
idとclassの指定方法
-
htmlの見出しタグ(<h1>)の次...
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
reuterのScraypingで不思議な現...
-
レスポンシブかつ、スマホ、携...
-
ホームページ作成会社を探して...
-
<BR> が多数連続しています。
-
リストで画像を右に表示したい
-
コンピューターの画像ブロック
-
特定範囲内のCSSの継承を断ち切...
-
<!-- #BeginLibraryItemとは
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報