[CSS]text-alignとtext-indexntを併用

CSSプロパティ[text-indexnt]で大量の負の値を指定し
bakucgroundに画像を挿入するSEO対策?がありますが、
「CSSプロパティ[text-align]を使用すると
CSSプロパティ[text-indexnt]が効かない」といった
現象が発生しました。
※まぁ、当たり前と言われればそれまでなのですが

ちょっと気になったので両プロパティについて
少し調べて見たのでメモしておきます。

まず、両プロパティの説明から
・text-indexnt
  一行目のインデント幅を指定する
参照URL : http://www.htmq.com/style/text-indent.shtml
・text-align
  行揃えの位置・均等割付を指定する
  参照URL : http://www.htmq.com/style/text-align.shtml
  => left
    基準点が左になる
  => center
    基準点が中央になる
  => rigth
    基準点が右になる

基本的に
①text-alignで指定した基準点に配置
②text-indexntの値分だけインデント幅を取る
の順序で動作するはずです。

ここまで調べてみて上司から
「text-alignがcenterでもずれるの?」と
聞かれたのでサンプルサイトを作って実験してみました。
結果としては
「text-alignがcenterでもずれる」でした。
下記に作ったサンプルサイトのURLを貼っておきます。
暇な方は見てみてください。
サンプルサイト:http://demo.kenmiya.info/2014-01-29/align-indent.html

結論として
個人的にはtext-indexntとtext-alignの併用はしないほうが楽できる


This entry was posted in: CSS. Bookmark the ➜ permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)