文字を隠す

3種類の文字の隠し方

HTMLには文字を入れておきたいがレイアウト的には邪魔なので消しておきたい時に、背景と文字色を同色にして見えないようにするのは検索エンジンはマイナス評価をします。

ではどうすれば良いのでしょうか。

・visibility: hidden;    レイアウト領域を確保したまま文字を隠すことが出来ます。

・display: none;  レイアウト領域+文字を隠すことが出来ます。

・white-space: nowrap;      テキストの改行を無しにする。

 text-indent: 100%;   テキスト全体を右側へ移動させる。

 overflow: hidden;      はみ出た部分を隠す。

この3種類どれでも出来ます。

 

色々と注意すること(上とは関係なし)

#containerに背景画像を入れてはいけない理由

widthで幅を変えたときに画像の大きさまで変わってしまうため。#bodyに背景画像を入れよう。