ここでは、ページに関する問い合わせ先や作者の連絡先などを表示する〈address要素〉の表示を変更してみる。
要素を非表示にする
連絡先を書き込むでは、〈address要素〉を使ってページの作者の名前を表示するようにした。そのとき、〈hr要素〉を使って、ページの本文と作者名との間に区切りの線(水平の罫線)を入れた。しかし、ここではスタイルシートstyle sheetを使って本文との区切り線を表示したいので、〈hr要素〉は不要である。
ただ、HTMLから〈hr要素〉を削除した場合、ブラウザWWW browserでスタイルシートが無効になっていたりすると、区切りの線が表示されなくなってしまう。スタイルシートを使って〈hr要素〉を非表示にすることができれば、HTMLから〈hr要素〉を削除するよりも便利である。
スタイルシートを用いて、特定の要素の表示/非表示を切り替えるには、「displayプロパティ」を使う。"displayプロパティ"は、
display: [指定する値] ;
と記述する。ここで、"displayプロパティ"の値に「none」を指定すると、その要素は表示されなくなる。たとえば、
hr {
display: none;}
と書けば、〈hr要素〉を非表示にすることができる。
〈address要素〉の表示を変更する
〈address要素〉の表示を変更するには、スタイルシートを使ってスタイルを指定すれば良い。例えば、次のように書けば、ページとの区切り線を表示することができるだろう。
address {
border-top: thin solid black ;}
〈address要素〉の表示(border, background-color, color, text-alignなど)を好みのものに変更してみよう。その場合、ページの本文との間隔(margin-top)や区切り線との間隔(padding-top)にも注意すること。