トップページ 利用規約 掲示板 サーバー紹介 レンタル紹介 素材屋紹介 リンクする 相互リンク
アフィリエイト 初心者 HTML TABLEタグ スタイルシート 色の見本 タグ練習 タグ辞典


HTMLタグの紹介
htmlタグとはホームページを作っている文字を表します。ホームページを作るときにはかかせないもので、ホームページはこのタグの集まりによってできています。タグは「 < 」 「 > 」←このようなカッコで囲まれており、このカッコの中に間に下のような字を入れることによって効果が反映されます。
■ 全体 <body>
■ タイトル <title>
■ 改行 <br>
■ 段落 <p>
■ 横罫線 <hr>
■ センター <center>
■ 範囲 （部分） <span>
■ 範囲 （1行） <div>
■ 見出し <h数>
■ リンクする <a href=" ">
■ 画像表示 <img src=" ">
■ メール <a href=" ">
■ コメント <!--　　-->
■ 字を太字 <b>
■ 字をイタリック <i>
■ 字を等幅 <tt>
■ 字に下線 <u>
■ 字に取消し線 <s>
■ 字を上付き <sup>
■ 字を下付き <sub>
 ■ 字を強調 <strong>
■ 字を大きく <big>
■ 字を小さく <small>
■ 字の大きさ <font size=" ">
■ 字の色 <font color=" ">
■ 字の種類 <font face=" ">
■ 表 <table><tr><td>
■ 表背景に画像 <table>
■ マークリスト <ul><li>
■ 数字リスト <ol><li>
■ 説明リスト <dl><dt>
■ 1行フォーム <input type=" ">
■ パスワード <input type=" ">
■ 送信、リセット <input>
■ テキストエリア <textarea>
■ ラジオボタン <input type=" ">
■ チェックボタン <input type=" ">
■ メニュー <select>
■ リストボックス <select>
画像表示 <img src="画像名">

イラストや写真などの画像を配置する
タグ <img src="画像名">
画像
解説<img src="画像名"> の「画像名」の所に表示したい画像の名前を入れてください。　ファイル名が「hiyoko」で、写真画像なら　<img src="hiyoko.jpg"> 　「.jpg」は画像の種類（拡張子）です。大体写真は「jpg」で、単純なイラストなどは「gif」だと思います。わからない場合は画像のファイルを選び、右クリックして「プロパティ」の「ファイルの種類」という所を見てみて下さい。このタグは閉じる必要はありません。
「hiyoko.jpg」というファイルが、作ってるサイトのファイルと違うフォルダにあるときは、
<img src="./フォルダ名/hiyoko.jpg"> と記述してください。
「hiyoko.jpg」というファイルが、作ってるサイトのファイルの上の親フォルダにあるときは、
<img src="../hiyoko.jpg"> と記述してください。

画像に枠をつける
タグ <img src="画像名" border="数">
数=1
数=5
解説<img src="画像名"> に border="数"を付け加え、「数」の所に線の太さを数字で指定すると、画像の周りに指定した太さの線がつきます。
例：<img src="画像名" border="1">　（上の「数は1」が見本）

画像を使ってリンクする
タグ <a href="リンク先"><img src="画像名"></a>
画像
解説リンクタグで画像タグを囲むことによって画像がリンクになります。クリックするとリンク先のアドレス、又は指定ファイルに飛びます。 リンクの細かいことは、前の項目の「リンクする」を見てください。

画像のリンク枠線の太さを変える
タグ <a href="リンク先"><img src="画像" border="0"></a>
普通
結果
結果
解説 border="0" を付け足すことによって、画像をリンクすると、自動でつく枠が見えなくなります。borderが「0」の幅になったから見えなくできるということです。 border="5" と、逆に数字を増やすと、上の見本のように線が太くなります。この線の色を変える場合は全体リンク色を変える必要があります。<body>を参考

画像の横の文字位置
タグ <img src="画像名" align="top">ここに文字
topここに文字
middleここに文字
bottomここに文字
解説<img src="画像名" align="top"> の「top」が画像の横に文字が来ると上付きになります。「middle」に変更すると上の見本の用に真ん中になります。「bottom」は下付きです。 このやり方は 画像の横には1行しか書けません。

画像の横に文章を書く
タグ <img src="画像名" align="left">ここに文字
leftようこそいっらしゃいました。是非是非「無料HPテンプレの素材屋」の素材をご利用ください。もしよかったらリンクお願いします。
rightようこそいっらしゃいました。是非是非「無料HPテンプレの素材屋」の素材をご利用ください。もしよかったらリンクお願いします。
解説画像の横には普通1行しか書けませんが、これを使うことにより 画像の横に文章が書けます。
<img src="画像名" align="left"> の align="left" が「left」だったら画像が左になり、右に文章がかけます。「right」だったらその逆。

画像と文章の間のスペースを増やす
タグ <img src="名" align="left" vspace="数" hspace="数">
縦の余白
vspace="10"		あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

<img src="画像名" align="left" vspace="10">
横の余白
hspace="10"		あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

<img src="画像名" align="left" hspace="10">
縦横の余白
hspace="10"
hspace="10"		あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

<img src="画像名" align="left" vspace="10" hspace="10">
解説画像と文章などの間に余白を上下左右に数で指定できます。vspace="数"が上下の余白。hspace="数"が左右の余白です。両方すれば上下左右にスペースを空けれます。

画像の縦と横の長さを変更する
タグ <img src="画像名" height="数" width="数">
普通
結果1
height="70"
解説 height="数" width="数" で、画像の縦幅と横幅を伸び縮みさせることができます。
★「結果1」は「height="70"」にしてみました。そしたら縦が70の大きさになりました。横幅は指定していないので自動的に縦に合わせて小さくなりました。これは見た目は画像が小さいですがデータ容量は同じなので注意。余り大きすぎる場合は加工ソフトで小さくしておこう。
結果2
height="200" width="100"
解説 ★「結果2」は「height="200"」「weight="100"」 縦200、横100 なので長細い画像になりました。上に引っ張られた感じになってます。
結果3
height="100" width="200"
解説 ★「結果3」は「height="100"」「weight="200"」と縦横の比率を変えてみたので、横に画像が引っ張られた感じになりました。
結果4
width="100%"
解説 ★「結果4」は「weight="100%"」と「％」を使って表示しました。横が100％なので横に伸びるだけ伸びて、縦の指定がないので横の大きさに自動的に合わされました。ぴったり収めたいときになど便利ですが、画像が大きくなればなるほど画質も悪くなります。

画像の代理文字
タグ <img src="画像名" alt="説明など">
結果おにぎりくん
結果おにぎりくん
解説 alt="説明" を付け加えると、画像の上にマウスでカーソルを持っていったときに、少しそのままにしていると 「alt="説明"」 の説明に書かれた部分が表示されます。上の画像が出ている方の結果で試してみて下さい、「おにぎりくん」と表示されると思います。
下の方の結果はわざと画像が見つからないようにしています。通常、画像が見当たらないときや、ネットが混み合ってて中々画像が表示されないときになどによく「画像がありませんよ」という意味の「×マーク」が出ます。その×マークの所に「おにぎりくん」と表示されると思います。これも「alt="説明"」の効果です。

▲上に移動