text-indentと改行コードの関係性について

質問

text-indentと改行コードの関係性について

こんにちわ。いつも皆様のご助言に感謝しております。
さて、表題の件ですが以前、HTMLのコーディングをしている際に<p>タグに対してCSS上でtext-indentの値を-9999pxとしました。
ただ、当該<p>タグに開業コードである<br/>タグを入れていたせいか、text-indentが効いていませんでした。<br/>タグを除去すると効いてしまいました。

この二つは何か関係するのでしょうか？
ご存知の方いらしたら教えてください。

回答No.2

metametamu · ベストアンサー

html、cssレベルであれば重さを感じることは無いです。
画像にwidth属性を指定した方が若干早くなるようですが、すでに無視できるレベルになっていますし。
せいぜい、cssのposition:absolute;を多用するとIEで重く感じるくらいでしょうか。
今ではcssでの画像置換はcss spriteという手法の利用が主で、アクセス数が非常に多いサイトのサーバーの負荷軽減に使うことが多いと思います。後は携帯に対応させるためにcssで表示する画像をコントロールしたい時でしょうか。

img要素でやった方がいいというのは、既にgoogleによってtext-indent:-9990px;の手法でスパムの評価を受けたサイトがあるため、使うのに多少なりともリスクがあるからです。text-indentだけでなく、cssでの画像置換は使い勝手が良い反面、それぞれ対等な文章と画像を用意する必要があります。

お礼

metametamu　様

お返事遅くなり申し訳ございませんでした。

>既にgoogleによってtext-indent:-9990px;の手法でスパムの評価を受けたサイトがある

これ、この間SEOのセミナーで講師の方がおっしゃってました！
今後気をつけたいと思います。ありがとうございました。

回答No.1

metametamu

text-indentは一行目の開始位置の字下げ指定です。
この時、text-indentを指定した要素が重要になります。
今回はp要素に指定されているので、p要素内の最初の一行目へ指定が反映されるため、br要素を含んだ場合は文章が二行に分かれてしまい一行目だけに結果が反映されます。

それとは別ですが、text-indent:-9999px;を利用した画像置換よりは素直にimg要素でマークアップされる方がいいですよ。

お礼

metametamu　様

ご返信ありがとうございます！

>それとは別ですが、text-indent:-9999px;を利用した画像置換よりは素直にimg要素で
>マークアップされる方がいいですよ。

すみません。バカの一つ覚えで「何でもCSSで」と思ってやってしまいました。
直接imgタグを埋め込むことでHTMLファイル自体の表示読込速度が鈍るなんてことはないですかね？
FLASHを多様している訳でもないので、昨今の家庭用PCはスペックがよいからそこをあまり意識する必要はないですかね？