◆文字を上下左右に反転させてみよう!◆

上下反転

&

左右反転

このページの文字は上下左右に反転して見えますね?

画像やプラグインなどを使用せずに、HTMLだけでこのような効果を出すことができるのです。

<SPAN STYLE="width:480;height:64;font-size:96px;
font-weight:bold;font-family:Arial;color:#004080;
Filter:FlipV">
上下反転</SPAN>

<font size="7" color="#FF8080">
&amp;</font>

<SPAN STYLE="width:450;height:32;font-size:72px;
font-weight:bold;font-family:Arial;color:#FFA477;
Filter:FlipH">
左右反転</SPAN>
<SPAN></SPAN>はそれ自体は意味を持たないものですが、部分的なスタイルシートの指定に使用されるタグです。

<SPAN>タグの中にあるFilterというオプションはその名の通り、<SPAN></SPAN>のタグで囲まれた文字列にフィルターをかけるものです。

このフィルター機能を使用して文字を上下に反転させるには、Filter:FlipVと指定してやれば良いのです。

左右に反転させるにはFilter:FlipHと指定します。

つまり縦方向ならFlipV、横方向ならFlipHになります。

HTMLにCha☆llengeへ戻ります