【補足】20秒間隔でメッセージのスタイルを変更する方法

◆方法1 3種類の見出しタグを使う

<style>
h3 { font-size:120% ; line-height:200% ; color : white }
h4 { font-size:120% ; line-height:200% ; color : navy }
h5 { font-size:120% ; line-height:200% ; color : maroon }
</style>
 
if ( byo>=0 && byo<=19 )
  document.write("<h3>こんにちは</h3>");
if ( byo>=20 && byo<=39 )
  document.write("<h4>おはようございます</h4>");
if ( byo>=40 && byo<=59 )
  document.write("<h5>お元気ですか</h5>");

上記の方法でも可能であるが、3種類の見出しタグを使うため、改行幅が微妙に上下にずれてしまう。


 ↓↓↓改善案↓↓↓


◆方法2 同一の見出しタグを使い、クラスを3種類用意する

<style>
.iro1 { font-size:120% ; line-height:200% ; color : white }
.iro2 { font-size:120% ; line-height:200% ; color : navy }
.iro3 { font-size:120% ; line-height:200% ; color : maroon }
</style>
 
if ( byo>=0 && byo<=19 )
  document.write("<h3 class='iro1'>こんにちは</h3>");
if ( byo>=20 && byo<=39 )
  document.write("<h3 class='iro2'>おはようございます</h3>");
if ( byo>=40 && byo<=59 )
  document.write("<h3 class='iro3'>お元気ですか</h3>");

方法2では、見出しタグが同一なので改行幅が固定され、文字の色だけが変化する