MAJIDEKA.COM－HTMLの基本

　画像を貼りつけるには、<img>タグにsrc属性を指定します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<img src="xxx.gif">
　ブラウザにはこのように表示されます。

画像が表示されない原因とは

・画像を貼りつけたのにきちんと表示されないのには下記のような原因が考えられます

　・ファイル名が間違っている。
　・フォルダ名が間違っている。
　・src="ファイル名"あるいは"フォルダ名/ファイル名"になっていない。
　・GIFファイル、JPEGファイル、PNGファイル以外のファイルを指定している。
　・BMPファイルをファイル変換ソフトを使用せずに上記のファイルに名前だけ変更している。
　・画像ファイルをアップロードし忘れている。
　　　などの原因があげられます。

画像の大きさを知るには

・画像の大きさを知る方法

　画像の大きさ(横幅・高さ)を知るには、
　　1.画像ファイルを右クリックして[プロパティ]を選択してください。
　　2.[ファイル]を選択したら、[ファイルの概要]タブを選んでください。
　　3.[ファイルの概要]で大きさ(横幅・高さ)を確認してください。

▲ページトップへ

画像を隙間なく並べるには

・<img>タグの>と<との間に間隔をあけない方法

　画像を隙間なく並べるには、<img>タグの>と<との間に間隔をあけないようにします。
　ですから、imgとsrcの間など<と>との間では改行しないようにしましょう。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<img src="xxx.gif"><img src="yyy.gif"><img src="zzz.gif">
　ブラウザにはこのように表示されます。

画像の周りに余白をあけるには

・<img>タグにvspace属性とhspace属性を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　(<img src="xxx.gif" vspace="n" hspace"n">)

　画像の周りに余白をあけるには、<img>タグにvspace属性とhspace属性を指定します。
　余白の指定は"n"に数字を記入します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<img src="xxx.gif"><img src="xxx.gif"><imgsrc="xxx.gif"><br> <img src="xxx.gif"><img src="xxx.gif" vspace="20" hspace"20"><imgsrc="xxx.gif"><br> <img src="xxx.gif"><img src="xxx.gif"><imgsrc="xxx.gif"><br> <br> <img src="xxx.gif"><img src="xxx.gif"><imgsrc="xxx.gif"><br> <img src="xxx.gif"><img src="xxx.gif"><imgsrc="xxx.gif"><br> <img src="xxx.gif"><img src="xxx.gif"><imgsrc="xxx.gif">
　ブラウザにはこのように表示されます。

画像の上に文字を載せるには

・<table>タグにbackground属性を、<th>タグにはstyle属性を指定する方法。

　画像の上に文字を載せるには、<table>タグにbackground属性を、<th>タグにはstyle属性を指定します。
　background="xxx.gif"の""内には画像のURLを記入してください。
　色の指定は#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table width="150" height="200" background="xxx.gif"> <tr> <th style="color: #ff0000">MAJIDEKA.COM</th> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

画像の大きさを指定するには

・<img>タグにwidth属性とheight属性を指定する方法(<img src="xxx.gif" width="n" height="n")

　画像の大きさを指定するには、<img>タグにwidth属性とheight属性を指定します。
　width属性で画像の横幅を、height属性で画像の高さを指定します。
　大きさの指定は"n"に数字を記入します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<img src="xxx.gif" width="100" height="100"><br> <img src="xxx.gif" width="150" height="150">
　ブラウザにはこのように表示されます。

画像の枠線を変更するには

・<img>タグにborder属性を指定する方法。(<img src="xxx.gif" border="n")

　画像の枠線を変更するには、<img>タグにborder属性を指定します。
　枠線の指定は"n"に数字を記入します。　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<img src="xxx.gif" width="100" height="100" border="1"><br> <img src="xxx.gif" width="100" height="100" border="0">
　ブラウザにはこのように表示されます。

画像を半透明にするには

・<img>タグにstyle属性のfilter: alpha()を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　 (<img src="xxx.gif" alt="xxx" style="filter: alpha();")

　画像を半透明にするには、<img>タグにstyle属性のfilter: alpha()を指定します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　alpha()の()内のopacityには透明度(1(透明)～100(不透明))を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<img src="xxx.gif" width="100" height="100" border="0" style=":filter: alpha(opacity=20);"><br> <img src="xxx.gif" width="100" height="100" border="0">
　ブラウザにはこのように表示されます。

画像に代替テキストを設定するには

・<img>タグにalt属性を指定する方法(<img src="xxx.gif" alt="xxx">)

　画像に代替テキストを設定するには、<img>タグにalt属性を指定します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　alt属性には画像の説明文を記入してください。画像が表示されなかった場合に画像の説明となります。
　alt属性はHTML4.01で<img>タグに必須の属性と定義されています。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<img src="xxx.gif" alt="xxx" width="100" height="100" border="0"><br> <img src="xxx.gif" alt="yyy" width="100" height="100" border="0">
　ブラウザにはこのように表示されます。

▲ページトップへ

画像をウィンドウの中央部に表示するには

・JavaScriptを使用して画像をウィンドウの中央部に表示する方法

画像をウィンドウの中央部に表示するには、JavaScriptを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>画像をウィンドウの中央部に表示</title> <script type="text/javascript">  </script> </head> <body onload="func()" onresize="func()"> <layer name="img1"> <img src="xxx.gif" alt="xxx" name="img" id="img" style="position: absolute"> </layer> </body> </html>
　ブラウザにはこのように表示されます。

画像を指定した位置に表示するには

・<img>タグにstyle属性のposition: absoluteを指定する方法

　画像を指定した位置に表示するには、<img>タグにstyle属性のposition: absoluteを指定します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<img src="xxx.gif" alt="xxx" border="0" style="position: absolute; top: 100px; left: 250px;">
　ブラウザにはこのように表示されます。

▲ページトップへ

ボタンクリックで画像を指定した位置に表示するには

・JavaScriptを使用してボタンクリックで画像を指定した位置に表示する方法

ボタンクリックで画像を指定した位置に表示するには、JavaScriptを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script> <img src="xxx.gif" alt="xxx" border="0" id="string1" style="position: absolute; visibility: hidden; top: 100px; left: 250px;"> <form> <input type="button" onclick="klicken('string1')" value="Click"> </form>
　ブラウザにはこのように表示されます。

ボタンクリックで画像を別ウィンドウで表示するには

・JavaScriptを使用してボタンクリックで画像を別ウィンドウで表示する方法

ボタンクリックで画像を別ウィンドウで表示するには、JavaScriptを使用します。
　window.open<"xxx.gif"～)の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<html> <head> <title>画像を別ウィンドウに表示</title> <script type="text/javascript">  </script> </head> <body> <form> <input type="button" onclick="newwin()" value="Click"> </form> </body> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

画像を左右に動かすには

・<marquee>タグを使用して画像を左右に動かす方法(<marquee>～</marquee>)

　画像を左右に動かすには、<marquee>タグを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<marquee direction="right" behavior="alternate"> <img src="xxx.gif" alt="xxx" width="100" height="100" border="0"> </marquee>
　ブラウザにはこのように表示されます。

画像を自動的に動かすには

・ダイナミックHTMLを使用して画像を自動的に動かす方法

画像を自動的に動かすには、ダイナミックHTMLを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>自動的に動く画像</title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body onload="func()"> <ilayer id="n1"> <img src="xxx.gif" id="e1" alt="xxx" width="100" height="100" border="0" class="pa"> </ilayer> </body> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

画像をマウスで動かせるようにするには

・JavaScriptを使用して画像をマウスで動かせるようにする方法

画像をマウスで動かせるようにするには、JavaScriptを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　<span>～</span>の数だけ画像が表示されます。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>マウスで動く画像</title> <script type="text/javascript">  </script> </head> <body onload="doInit()"> <span style="position: absolute; top: 100px; left: 100px; width: 80px;""> <img src="xxx.gif" alt="xxx" width="100" height="100" border="0"> </span> <span style="position: absolute; top: 100px; left: 200px; width: 80px;""> <img src=".gif" alt="yyy" width="100" height="100" border="0"> </span> </body> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

ボタンクリックでスライドショーを実現するには

・JavaScriptを使用してボタンクリックでスライドショーを実現する方法

ボタンクリックでスライドショーを実現するには、JavaScriptを使用します。
　img[m++]="aaa.gif"や<img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script> <div"><img src="xxx.gif" name="img1" alt="xxx" border="0"></div> <form action="#"> <input type="button" onclick="prev()" value="< 前へ"> <input type="button" onclick="next()" value="次へ >"> </form>
　ブラウザにはこのように表示されます。

ボタンクリックで画像をフェードインさせるには

・JavaScriptを使用してボタンクリックで画像をフェードインさせる方法

ボタンクリックで画像をフェードインさせるには、JavaScriptを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script> <img src="xxx.gif" alt="xxx" id="img1" style="filter: revealTrans(duration=3.0, Transition=12); visibility: hidden;"> <button onclick="fadein('img1')">Click</button>
　ブラウザにはこのように表示されます。

▲ページトップへ

ボタンクリックで画像を非表示するには

・JavaScriptを使用してボタンクリックで画像を非表示にする方法

ボタンクリックで画像を非表示するには、JavaScriptを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script> <div id="t1"><img src="xxx.gif" alt="xxx" border="0"></div> <button onclick="kakusu()">Click</button>
　ブラウザにはこのように表示されます。

画像クリックで画像を変更するには

・JavaScriptを使用して画像クリックで画像を変更する方法

画像クリックで画像を変更するには、JavaScriptを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　JavaScript内のはじめに出てくる画像のURLが１度目の画像クリックによって表示される画像で、
　２番目に出てくる画像のURLが２度目の画像クリックによって表示される画像です。
　JavaScript外にある画像のURLがデフォルトの画像です。JavaScript内の画像と同じでも構いません。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script> <a href="javascript: changeImage()"><img src="xxx.gif" name="myimg" alt="xxx" border="0"></a>
　ブラウザにはこのように表示されます。

▲ページトップへ

ボタンクリックで画像を変更するには

・JavaScriptを使用してボタンクリックで画像を変更する方法

ボタンクリックで画像を変更するには、JavaScriptを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　JavaScript内のはじめに出てくる画像のURLが１度目のボタンクリックによって表示される画像で、
　２番目に出てくる画像のURLが２度目のボタンクリックによって表示される画像です。
　JavaScript外にある画像のURLがデフォルトの画像です。JavaScript内の画像と同じでも構いません。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script> <img src="xxx.gif" alt="xxx" name="img" border="0"> <form> <input type="button" onclick="flip()" value="Click"> </form>
　ブラウザにはこのように表示されます。

ランダムに画像を表示するには

・JavaScriptを使用してランダムに画像を表示する方法

ランダムに画像を表示するには、JavaScriptを使用します。
　var imgMax=n;のnにはセットする画像の枚数を記入してください。
　if (imgRand==n) document.write();はセットした画像の枚数分記述してください。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script>
　ブラウザにはこのように表示されます。

▲ページトップへ

画像を降らせるには

・JavaScriptを使用して画像を降らせる方法

画像を降らせるには、JavaScriptを使用します。
　var hanaflake="xxx.gif";の""内には画像のURLを記入してください。
　絶対にdocument.write();は改行することなく記述してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script>
　ブラウザにはこのように表示されます。

▲ページトップへ

Copyright (c) 2006～ MAJIDEKA.COM. All Rights Reserved.