ブログ作成に必要な基本的なＨＴＭＬタグについて説明してます！（ＨＴＭＬ フォント レイアウト リンク・画像 テーブルなど）

初心者のブログ作成 ＨＴＭＬタグ研究所！ サイト マップ お問い合せ LINK
HTMLタグの他にPC・インターネット関連用語集や便利なショートカットキー一覧 ・ 無料で利用できる便利なサイトも紹介してるのでゆっくり見て下さい！


リンク・画像タグ

画像に効果をつけるの説明と例

下記のHTMLタグを使います！

１．透明度

<Img Src="画像URL" Style="Filter:Alpha(Opacity=0〜100)">

２．画像効果（グラデーション）

<Img Src="画像URL" Style="Filter:Alpha(Style=0〜3)">

３．応用編（透明度＋画像効果）

<Img Src="画像URL" Style="Filter:Alpha(Opacity=0〜100,Style=0〜3)">

※ 初心者のブログ作成 ＨＴＭＬタグ 研究所！では簡単に説明しています。　詳しく知りたい場合は各自で調べて下さい！！
１．透明度
<Img Src="画像URL" Style="Filter:Alpha(Opacity=0〜100)">
表示例
透明度を100に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Opacity=100)">
透明度を80に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Opacity=80)">
透明度を60に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Opacity=60)">
透明度を40に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Opacity=40)">
透明度を20に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Opacity=20)">
透明度を10に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Opacity=10)">
※ 透明度を0にすると完全に見えなくなります！

スポンサード　リンク
２．画像効果（グラデーション）
<Img Src="画像URL" Style="Filter:Alpha(Style=0〜3)">
表示例
画像効果0に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Style=0)">
画像効果1に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Style=1)">
画像効果2に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Style=2)">
画像効果3に設定した場合



この画像のHTMLタグ表示
<Img Src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" Style="Filter:Alpha(Style=3)">

スポンサード　リンク
３．透明度＋画像効果の合わせ技
<Img Src="画像URL" Style="Filter:Alpha(Opacity=0〜100,Style=0〜3)">
表示例
※ 解りやすくするために透明度はすべて75に設定しています。
透明度75＋画像効果0に設定した場合



この画像のHTMLタグ表示
<IMG src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" style="Filter:Alpha(Opacity=75,Style=0)">
透明度75＋画像効果1に設定した場合



この画像のHTMLタグ表示
<IMG src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" style="Filter:Alpha(Opacity=75,Style=1)">
透明度75＋画像効果2に設定した場合



この画像のHTMLタグ表示
<IMG src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" style="Filter:Alpha(Opacity=75,Style=2)">
透明度75＋画像効果3に設定した場合



この画像のHTMLタグ表示
<IMG src="http://pub.ne.jp/htmltag/image/user/1185725317.jpg" style="Filter:Alpha(Opacity=75,Style=3)">


HTMLタグを使う場合の注意点！

HTMLタグを使う場合の入力方法は半角英数字です。　基本となるHTMLタグはコピー・貼り付けで構いませんがサイズ・カラーコード・アドレスなどの数字や文字を入力する場合に半角英数字以外の文字で入力すると正しく表示されないので注意して下さい！

また、HTMLタグを入力する際は半角英数字ですが大文字と小文字の区別は無いので気にしないで下さい。

HTMLタグには開始タグと終了タグがあります。

例）<Font Size="1〜7">〜</Font>　最初の<Font Size="1〜7">が開始タグで後の/スラッシュが付いた</Font>が終了タグになります。　終了タグを入れ忘れた場合ページのレイアウトが崩れることがあるので気をつけましょう！

その他に、基本のHTMLタグの<>←カッコ、"←ダブル クォーテーションやHTMLタグ内の記号・文字・数字などを消したり、スペースを空けたり・くっつけたり、改行したりするとHTMLタグが正しく表示されないので注意して下さい。

上記のミスが非常に多いので作成の際はPCのメモ帳などを利用してHTMLタグの見直しをして下さい。

また、正しく表示できない場合も基本のHTMLタグやここで説明した内容を確認してみて下さい！

HTMLタグは最初は見なれない文字や記号が多いので意味が解らないと思いますが使用しているうちになれて読めるようになります。　少しずつ落ち着いて作業して下さい！
ページトップ
Copyright (C) 初心者のブログ作成 ＨＴＭＬタグ研究所！ All Rights Reserved. |