今回のテーマは『いんやんアイコンをもっと楽しく便利に活用しよう！』です（謎）


■サイズを変えたい場合。

画像のサイズはタグ文で変更できるわけですが、等倍で大きくしないと画像が汚くなります。

下のマリオのサイズは12×16です。つまり24×32にすればきれいに大きくなります。

↑ソース　<img src="mario01.gif" width="12px" height="16px">

↑ソース　<img src="mario01.gif" width="24px" height="32px">

GIFアニメも同じように変えられます。

↑ソース　<img src="making_02.gif" width="63px" height="9px">


↑ソース　<img src="making_02.gif" width="126px" height="18px">


↑ソース　<img src="making_02.gif" width="252px" height="36px">


↑悪い例
等倍でサイズ変更しないとこんなふうにガタガタになっちゃうのです。


　　
↑小さなレミングスもこんなに大きく！！

ちなみに逆もしかり。
うちはわりと本来16×16サイズのアイコンのサイズを32×32にしたがるのでちっこくしたい場合は半分にするだけ。


↑ソース　<img src="dq3_yu.gif" width="32px" height="32px">

↑ソース　<img src="dq3_yu.gif" width="16px" height="16px">


■向きを変えたい場合。

画像の向きを変えるにはスタイルシートのfliph()を使いましょう。ただ、ブラウザ次第ではちゃんと動作しない事もあるので注意が必要です。

やりかた１ ： imgタグに埋め込む

↑ソース　<img src="mario01.gif" width="12px" height="16px">

↑ソース <img src="mario01.gif" width="12px" height="16px" style="filter: fliph();">

やりかた２ ： divやspanで囲む

↑ソース　<img src="mario01.gif" width="12px" height="16px">
↑ソース　<div style="width:12px;filter:fliph();"><img src="mario01.gif" width="12px" height="16px"></div>
＊注意！！
divやspanで囲む場合はwidthを指定するか、 position:absolute;を指定しないとダメらしいです。面倒臭いことですな。

　　　　→　　　　
このように向かい合う事が出来るのです。

こんな感じで素材をもっと楽しく便利に活用しましょう。


てか、ごめんなさい。
ここに書いたスタイルシートのやり方とか本当に適当です。鵜呑みにしないで自分で調べてから使ってください。

スタイルシートのフィルターを使えば他にも色々できます。
画像をモノクロにしたり、半透明にしたり、色を反転させたり、etcetc...
その辺のやり方はググればすぐに出てくると思うので各自調べてみましょう。
以上！せば！！