PC、ゲーム、デジタル機器などの初心者向けの話題や小技などをつらつらと……

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Loading...

タグによる段落間に行間ができない場合の対処

【問題】:
 <P>タグで段落を設定した際、段落間に生じるはずの行間がゼロになってしまう。

【原因】:
 親要素のmarginが0pxに設定されていた。

【解決方法】:
 親要素のmarginを削除、あるいは他の部分に影響がないように数値を調整する。


 運営しているサイトやブログの手直しの際、とあるいくつかのサイトで<P>タグと<P>タグの間、つまり段落間にできるはずの行間がゼロになってしまうものがあるのに気がついた。
 そうした症状が生じるのは主に2004年頃のサイト運営最初期頃に作成したサイト、つまりまだCSS黎明期でサイトデザインはテーブルタグ、改行は<br>タグが主流だった頃に作成していたサイト。

 ただそれだけならこのような問題は起こりそうにないが、その後CSSが普及しだして徐々にそれらのサイトにも部分毎にCSSに対応させていった際に、どうやらヘンな記述を組み込んでしまっていたようなのが今回の問題の主要因だった。

body等親要素のボックス関連プロパティの設定には要注意

 CSSを扱い慣れている人やプロのSEならば常識中の常識みたいな話だが、私のような趣味の範疇でしかCSSなんて触れない素人同然の人間にとっては結構やらかすミス。

 今回はmarginに関するミスだったが、他にもpaddingやborderに関する親要素の値が子要素に妙な邪魔を仕掛けてくるというのは、CSSを組み慣れてない人間にはよくあること。というかサイト運営始めて10年経った今でも普通にやらかす(笑)

 コンテンツのレイアウトがCSS上は間違っていないのに上手くいかないといったトラブルが発生した場合、明確な原因を思い付かないのならまず親要素からの値継承による何かが起こっていると判断した方がいいかと。次点ぐらいで使用ブラウザによる表示方法の違いも。

 エラーではないが、家で作成したのを翌日会社で昼休みに確認した際、表示が違ってて「やべぇ、CSS間違えてた!?」とか思ったのが実際あった(笑)

何故そんな設定にしたのかは原因も理由も不明

 だって10年近く前のことなんか覚えてねぇし(笑)

 まぁ当時CSSのことなんかほとんど理解しないままに、文法とか完全無視で表示確認しながらカタカタ打ち込んでただけなので、そんなことしてればもっと早くに何か不具合が起きても全然おかしくなかった。

 正直今回の件も、HTML5の勧告を受けて古くなったサイトやブログの手直しをしようと思わなければ多分、というか絶対気付かなかっただろうし(笑)

 別に仕事ではない完全趣味の分野の話なので、HTML5やCSS3対応なんて特に必要なかったのだが、まぁ今回気付けたのはある意味僥倖なのか、余計な手間を自分で増やしたという意味で藪蛇だったのか……



Loading...
コメント
コメントの投稿
【Font & Icon】
管理者にだけ表示を許可する
プロフィール

雪陽炎

Author:雪陽炎
 PCやデジタル機器類いじりの他にも、あれやこれやと趣味を持つ器用貧乏な奈良県民。
 初心者向け兼自身の忘備録としてPC及びデジタル機器関連の情報をまとめてます。

参加ブログランキング

にほんブログ村 PC家電ブログ パソコン・周辺機器へ にほんブログ村 PC家電ブログ 家電・AV機器へ
にほんブログ村 PC家電ブログ PCオーディオへ
人気ブログランキングへ
人気ブログランキングへ
最新記事
スポンサ-ドリンク
最新コメント
最新トラックバック
Amazon
楽天
ブロとも申請フォーム

この人とブロともになる

関連記事Loader

[猫カフェ]futaha

スポンサードリンク
本館/別館サイト
カテゴリ
ブックマーク
最近のチェックリスト / PC関連
最近のチェックリスト / AV関連
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。