HP上で文字を上下逆に表示する方法

今日はＷＥＢ上で文字を上下反転させる方法を紹介しますね・・・

• どのようにするのか・・・
  1. 先ず、普通に文字を創ります・・・
     通常購入価格4200円
     
  2. 上の文字は以下のように記述してます・・・
     
     <SPAN style="width:300;height:0;font-size:24pt;color:lightgrey">
     通常購入価格4200円
     </SPAN>
  3. この文字を上下逆転させたい訳です
  4. filterプロパティを使用します・・・filter:flipv();
  5. これをSPANタグの中に記述するだけです・・・
     
     <SPAN style="width:300px;height:0px;font-size:24pt;color:lightgrey;filter:flipv();">通常購入価格4200円</SPAN>
  6. これでグレーの文字は上下反転してますがこのブログでは表示できません。
  
  
  
• これを実際どのように使用するのか・・・
  • 例えば、下の図のような場合・・・
    1. 例えば、定期購入の単価4000円・・・
       定期購入価格4000円
       
    2. 通常購入単価4200円・・・
       通常購入価格4200円
       
    3. この通常購入単価の文字を上下逆転させて表示すれば、下の図のように表示される訳です。
       ※このブログでは表示できませんので、下の図をクリックして別窓で開くページで確認して下さい
       　　　　

今日の小技は如何でしたか？