HTML小技集

画像をイメージとして貼り付ける場合、タグで出来る小技を紹介します！
これなら画像を編集出来ない、又はソフトを持っていない方々もタグだけで画像に変化を与えられます。

■枠の大きさ指定　　　　　　　　　　　　　　　 ■色の反転■
■画像の大きさ指定(ピクセル)　　　　　　　■影を付ける■
■画像の大きさ指定(パーセント)　　　　　　■ｸﾞﾗﾃﾞｰｼｮﾝ＆半透明■
■半透明
■ぼかし効果
■グレーカラー
■左右反転
■上下反転
■X線効果
■波型効果
■波型効果２

■枠の大きさ指定■　画像に枠をつける

手始めに初心者向けの簡単なタグからイメージを貼り付けるHTML
<img src="画像の絶対パス、又は相対パス" border="0">

border="0"とは、画像を囲う枠の幅の指定です。

このサンプル画像のURLはこうなっています
<img src="http://homepage3.nifty.com/wind_mill/iruka2.jpg" border="0">

border="0"

border="1"

border="5"

戻る

■ピクセルでサイズを指定します■
<img src="画像の絶対パス、又は相対パス" border="0" width="120" height="110">
幅120px　高さ110px　

　幅150px　高さ140px　

　　幅180px　高さ170px　

戻る

■パーセントでサイズを指定します■
<img src="画像の絶対パス、又は相対パス" border="0" width="30%" height="50%">

元のサイズに対して幅30%　高さ50%　　　　　　　　　　　　　幅40%　高さ50%　

　　

戻る

■画像を半透明に表示する■ 半透明　アルファー５０　　　　　　　　　　　　　　　　　　半透明　アルファー３０

画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■ぼかしやぶれの効果をつける■　direction=方向(４５度単位)

わかりやすいようにサンプル画像を変えます。

元画像　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　direction=45　　　　　　　　　　　　　　　　　　　　　　　　　　　　　direction=135

画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■グレーカラー効果■

原画　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　グレーカラー効果
　
画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■左右反転■

元画像　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　左右反転

画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■上下反転■

元画像　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　上下反転

画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■Ⅹ線効果■

元画像　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Ⅹ線効果

画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■波形効果１■

　　　
元画像　　　　　　　　　　　　　　　　　波形効果(波の数＝３／強度＝５)　　　波形効果(波の数＝２／強度＝１)

freq=2 (波の数０～)　　　strength=5　(強度０～)

画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■波形効果２■

freq=2 (波の数０～)　　　strength=5　(強度０～)　　　lightstrength=30（強度０～１００）

元画像　　　　　　　　　　　　　　　　波形効果(波の数＝２／強度＝１０,強度＝３０)　　　　　　　　波形効果(波の数＝３／強度＝５,強度＝１０)　

画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■色の反転■

色を補色に反転させるタグです

元画像　　　　　　　　　　　　　　　　　色補色　　　　　　　　　　　　　　　　　　　　　元画像　　　　　　　　　　　　　　　　　　　　　色補色

　画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■影を付ける■

文字や画像に影を付けます。color=#666666（影の色は１６進行で）direction=135（影の方向／４５度単位）

影付き　　

画像のサイズを元の大きさのまま表示したい場合は width="100" height="100"の部分を削除して下さい！下記からコピー＆ペーストしてね

戻る

■ｸﾞﾗﾃﾞｰｼｮﾝ＆半透明■

部分的に半透明にして、背景となじませる効果

作品例です♪

戻る