日文文書処理

ウェブページの作成

連絡先の表示を変更する

ここでは、ページに関する問い合わせ先や作者の連絡先などを表示する〈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)にも注意すること。

ページの先頭へ↑
←ひとつ前に戻る
目次へ
トップページへ