ＨＴＭＬタグ集



●　基本文法
●　ＧＩＦアニメ、文字、画像を行ったり来たり往復させる
●　ＧＩＦアニメ、文字、画像を左から右へ動かす
●　ＧＩＦアニメ、文字、画像を右から左へ動かす
●　モーションスピード１０のＧＩＦアニメ、文字、画像の動き
●　文章にリンクを貼る
●　文章の前にＧＩＦアニメ、画像を入れる
●　文章を中央揃えにする
●　バナーを貼る
●　リンクに触れた時に、文字を動かす
●　更新履歴テキストスクロールボックス
●　マウスカーソルから花びらを散らせる
●　オンマウスで画像を変化させリンクさせる
●　リンクの色を変える
●　文字の色を変えて、リンクの色を変える
●　タグ関係リンク集
●　テーブル設置
●　テキストエリアボックスの設置
●　テーブル設置２
●　インラインフレームの設定
●　サイトを開くたびに画像をランダムに表示させる
●　横分割のホームページトップページを作成する





●　基本文法
<img src="画像のアドレス">
<DIV ALIGN="center"></DIV>
<span style="font-size:8pt;"></span>
<a href="リンク先のアドレス"></a>
<marquee onmouseover=this.stop() onmouseout=this.start()></marquee>
<marquee scrollamount="10"></marquee>
<br>
<span style="color: #00FF00"><body link="#000000" alink="#000000" vlink="#000000">
<a href="リンク先のアドレス"><img src="バナーの画像のアドレス"></a>
<TEXTAREA cols="横幅" rows="行数" name="名前">〜</TEXTAREA>
<TEXTAREA name="名前" readonly>〜</TEXTAREA>
<!-- 〜 -->
<H5>〜</H5>
<A href="#17">●　テーブル設置</A> <A name="#17">●　テーブル設置</A>
<a href="http://www.youtube.com/watch?v=enflGi-mN_Y&NR" target="_blank">
<iframe src="表示するページアドレス" frameborder="0" marginwidth="0" marginheight="0" width="160" height="100">〜</iframe>

●　ＧＩＦアニメ、文字、画像を行ったり来たり往復させる


<marquee scrollamount="5" behavior="alternate"width="400">
<imgsrc="画像のアドレス"></marquee>

scrollamount="5"　モーションスピード（１〜）　　　　behavior="alternate"いったりきたりさせる　　　　　　width="400"　往復させる幅



●　ＧＩＦアニメ、文字、画像を左から右へ動かす


<marquee direction="right" width="500">
<img src="画像のアドレス" ></marquee>

モーションスピードは省略も可能　　　direction="right"　右からモーションさせる。省略すると左から


●　ＧＩＦアニメ、文字、画像を右から左へ動かす


<marquee><img src="画像のアドレス" /><img src="画像のアドレス" >
<img src="画像のアドレス" /></marquee>

marquee以下は省略も可能　省略すると上のモーションのようになる



●　モーションスピード１０のＧＩＦアニメ、文字、画像の動き

<marquee scrollamount="10"><img src="画像のアドレス" ></marquee>

モーションスピード１０にしたときの動作



●　文章にリンクを貼る

文章

<DIV ALIGN="center"><span style="font-size:8pt;"><a href="リンク先のアドレス">文章</a></span></DIV>

DIV ALIGN　中央揃え　　　　span style　文字スタイルと大きさ



●　文章の前にＧＩＦアニメ、画像を入れる

文章

<img src="画像" >文章



●　文章を中央揃えにする

<center>文章</center>

文章を中央揃えにする



●　バナーを貼る

<DIV ALIGN="center"><a href="リンク先のアドレス"><img src="バナーの画像のアドレス"></a></DIV>

DIV ALIGN　これは省略も可能

バナーの画像の手に入れ方は、欲しい画像を見つけたら右クリックで名前を付けて画像を保存をクリックして保存する。
手に入れた画像を自分のサーバーにアップする。プロバイダによりアップの方法は異なります。
アップしたらその画像を開き、URLをコピーして上記のバナーの画像のアドレスの部分に貼り付ける。

●　リンクに触れた時に、文字を動かす

文章

以下をＨＴＭＬが貼れるところにそのままコピーして貼る
（どこか一つに貼ればすべてに影響するみたいです。私はマイリストのメモに貼りました）

<style type="text/css">
<!--
a:link {text-decoration:none;color:blue;}
a:visited {text-decoration:none;color:blue;}
a:active {text-decoration:none;color:red;}
a:hover {text-decoration:none;position:relative;top:2px;left:2px;}
-->
</style>

説明

<style type="text/css">
<!--
a:link {text-decoration:none;color:リンクの文字色;}
a:visited {text-decoration:none;color:訪問済みのリンクの文字色;}
a:active {text-decoration:none;color:クリックされた時の文字色;}
a:hover {text-decoration:none;position:relative;top:下に動く距離;left:右に動く距離;}
-->
</style>

参考　Ｗebページの作りの勉強　こちらを参考にしました。
　　　　HTMLクイックリファレンス　色のサンプルはこちらを参考にしてね。

●　更新履歴テキストスクロールボックス

◆What's New◆

２００６．１１．５
ブログ開始 。みなさん、
よろしくお願いします。
２００７．１．８
ブログを飾る方法追加
ＧＩＦ アニメ、音楽、リンク
の方法を載せました
２００７．１．１4 ２００７．１．１５
1万カウント達成
お気に入りブログ追加（１１）

以下をマイリストのメモに貼り付け

説明
width="150" height="75"　テキストボックスの横幅と縦幅
<marquee onmouseover=this.stop() onmouseout=this.start()　オンマウスでスクロールを停止。離すと開始
scrollamount="1"　テキストスクロールの速度
<span style="font-weight:bold;">２００６．１１．５</span>　数字のところに日付を入れる
<br>　改行
<a href="リンク先のアドレスl">文章</a>　文章にリンクをつける　リンクをつけないときは文章だけ入れる

参考　Ｗｅｂページ作りの勉強　こちらを参考にしました
　　　　オンマウスでスクロール停止の参考はこちら

●　マウスカーソルから花びらを散らせる

以下をマイリストのメモに貼り付ける



この上までをコピーして張り付ける。プログラムの詳細はわかりません。汗

参考　マウス効果　こちらを参考にしました


●　オンマウスで画像を変化させリンクさせる

<marquee onmouseover="this.stop()" onmouseout="this.start()"><a href="リンク先のアドレス">
<img src="最初に表示する画像のURL" onmouseover="this.src='マウスが重なった時に表示する画像のURL'" onmouseout="this.src='マウスが離れた時に表示する画像のURL'"></marquee><p></p>

説明

marquee　モーション。指定ないので右から左へ動かす
onmouseover="this.stop()" onmouseout="this.start()"　オンマウスでモーションストップ
<a href="リンク先のアドレス">　クリックでリンク先へリンク

●　リンクの色を変える

<body link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF">

body要素の link属性  alink属性  vlink属性 の３つで、リンクの色を変えることができます。
属性値には、色名（redやblackなど）や１６進数カラーコードを指定します。
link属性 はまだ訪れていない（押していない）リンクの色を、 
alink属性 は押した瞬間のリンクの色を、 
vlink属性 は、すでに訪れているリンクの色をそれぞれ指定できます。
上の例は背景が白の場合、透明に見えます。

やさしいホームページ入門を参照

●　文字の色を変えて、リンクの色を変える

<span style="color: #00FF00"><body link="#000000" alink="#000000" vlink="#000000">

●　タグ関係リンク集

ＨＴＭＬタグ一覧

掲示板で使えるタグ

インラインフレームのサイズ指定

●　テーブル設置

ここに文字を入れて下さいませ。

以下をマイリストのメモに貼り付ける

<table cellspacing="0" cellpadding="0" border="0">
<tr><td><img src="http://blog90.fc2.com/y/yuazahaita/file/t11y.gif"><td background="http://blog90.fc2.com/y/yuazahaita/file/tb11.gif"><td><img src="http://blog90.fc2.com/y/yuazahaita/file/t12y.gif"></td></tr>
<tr><td background="http://blog90.fc2.com/y/yuazahaita/file/tb12.gif">
<td><table width="***" height="***" align="center">
<td>ここに文字を入れて下さいませ。</td>
</table>
<td background="http://blog90.fc2.com/y/yuazahaita/file/tb13.gif"></td></tr>
<tr><td><img src="http://blog90.fc2.com/y/yuazahaita/file/t13y.gif"><td background="http://blog90.fc2.com/y/yuazahaita/file/tb14.gif"><td><img src="http://blog90.fc2.com/y/yuazahaita/file/t14y.gif"></td></tr>
</table>

説明

<table cellspacing="0" cellpadding="0" border="0">
<tr><td><img src="http://blog90.fc2.com/y/yuazahaita/file/t11y.gif">上部左の画像アドレス
<td background="http://blog90.fc2.com/y/yuazahaita/file/tb11.gif">上部真ん中の画像アドレス
<td><img src="http://blog90.fc2.com/y/yuazahaita/file/t12y.gif">上部右の画像アドレス
</td></tr>
<tr><td background="http://blog90.fc2.com/y/yuazahaita/file/tb12.gif">中央部左の画像アドレス
<td><table width="***" height="***" align="center">このままでも大きさは文字にあわせて自動調整
<td>ここに文字を入れて下さいませ。</td>
</table>
<td background="http://blog90.fc2.com/y/yuazahaita/file/tb13.gif">中央部右の画像アドレス
</td></tr>
<tr><td><img src="http://blog90.fc2.com/y/yuazahaita/file/t13y.gif">下部左の画像アドレス
<td background="http://blog90.fc2.com/y/yuazahaita/file/tb14.gif">下部真ん中の画像アドレス
<td><img src="http://blog90.fc2.com/y/yuazahaita/file/t14y.gif">下部右の画像アドレス
</td></tr>
</table>

●　テキストエリアボックスの設置

以下をマイリストのメモに貼り付ける

<textarea rows="6" cols="26" STYLE="color:#CCCCCC
;background-color:#000000"
style="scrollbar-arrow-color:#00FF00;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#00FF00;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-darkshadow-color:#00FF00;
color:#FFFFFF;
border-style:none;
background:#000000;
font-size:7pt" name="textarea6">
テキストエリア
</textarea>

説明

<textarea rows="6" cols="26" STYLE="color:#CCCCCC
;background-color:#000000"
style="scrollbar-arrow-color:#00FF00;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#00FF00;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-darkshadow-color:#00FF00;
color:#FFFFFF;
border-style:none;
background:#000000;
font-size:7pt" name="textarea6">
テキストエリア　テキストエリアではタグは使えない。
</textarea>

●　テーブル設置２

     
 

welcome

テキスト

  
     


以下をマイリストのメモに貼り付ける


説明
<table width="320" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50" background="http://ze-tayuazahaita.cocolog-nifty.com/FC2/topl_parl01_aq.
上部左画像アドレス
jpg">&nbsp;</td>
<td width="220" background="http://ze-tayuazahaita.cocolog-nifty.com/FC2/topc_parl01_aq.jpg"
上部真ん中画像アドレス
>&nbsp;</td>
<td width="50" height="50" background="http://ze-tayuazahaita.cocolog-nifty.com/FC2/topr_parl01_aq.
上部右画像アドレス
jpg">&nbsp;</td>
</tr>
<tr>
<td width="50" background="http://ze-tayuazahaita.cocolog-nifty.com/FC2/centerl_parl01_aq.jpg"
センター左画像アドレス
>&nbsp;</td>
<td width="220" background="http://ze-tayuazahaita.cocolog-nifty.com/FC2/centerc_parl01_aq.jpg"><p
センター真ん中画像アドレス
align="center"><img src="http://ze-tayuazahaita.cocolog-nifty.com/FC2/parl01_infor_bl.gif" alt="welcome"
テキスト部分文字画像アドレス
></p>
<p style="color:#003366; line-height:20px;">テキスト</p></td>
<td width="50" background="http://ze-tayuazahaita.cocolog-nifty.com/FC2/centerr_parl01_aq.jpg"
センター右画像アドレス
>&nbsp;</td>
</tr>
<tr>
<td width="50" height="50" background="http://ze-tayuazahaita.cocolog-nifty.com/FC2/bottoml_parl01
下部左画像アドレス
_aq.jpg">&nbsp;</td>
<td width="220" background="http://ze-tayuazahaita.cocolog-nifty.com/FC2/bottomc_parl01_aq.jpg"
下部真ん中画像アドレス
>&nbsp;</td>
<td width="50" height="50" background="http://ze-tayuazahaita.cocolog-nifty.com/FC2/bottomr_parl01
下部右画像アドレス
_aq.jpg">&nbsp;</td>
</tr>
</table>


●インラインフレームの設定

インラインフレームとは
テキストエリアボックスでもこの表現方法はできるが、このやり方だとリンクを貼り付けることが不可。
リンクを貼りたい場合、インラインフレームというものを利用する。
インラインフレームとは、サイズ指定したフレーム内に別サイトを表示する手法。
なので、フレーム内に表示するサイトを別に用意しておく必要がある。


ちなみに上記の例（私のブログで使用）のタグをそのまま貼り付けると以下のようになる。

<iframe src="http://homepage3.nifty.com/yuazahaita/newpage13.html" frameborder="0" marginwidth="0" marginheight="0" width="160" height="100">ブログ履歴</iframe>

説明
iframe src="表示させたいページのアドレス"
frameborder="0"　０が枠なし。１にすると枠あり。
marginwidth="0" marginheight="0"　フレーム内のサイトの表示位置
width="160" height="100"　フレームサイズの指定
frameborder="0" marginwidth="0" marginheight="0" は省略可能

参考　インラインフレームのサイズ指定
　　　　インラインフレームのこまかい設定

インラインフレーム内のページのリンク先を別ウインドウで表示するには　こちら　を参照
リンク先の表示。ターゲットを指定しないとフレーム内でサイトへリンクします。
<a href="リンクアドレス" target="_blank">表示する文字</a>　が一般的に使いやすいと思います。
インラインフレーム内に表示するページのリンク先の指定例　こちら　のようなページを別に用意しておく。

●　サイトを開くたびに画像をランダムに表示させる

<SCRIPT LANGUAGE="JavaScript">

var imgArray = new Array("http://homepage3.nifty.com/yuazahaita/migimuki.gif", "http://homepage3.nifty.com/yuazahaita/ukabukiiroitorikaitenn.gif", "http://homepage3.nifty.com/yuazahaita/kiiroitoriasemabataki.gif");
var imageFile = imgArray[Math.floor(Math.random()*3)];
document.write("<IMG SRC = \"", imageFile , "\">");
document.write("<BR>");

</SCRIPT>

説明
var imageFile = imgArray[Math.floor(Math.random()*3)]　数字を画像の数にあわせる
var imgArray = new Array("画像アドレス", "画像アドレス"〜くりかえし

参考　絵コントロール技　ランダム表示

●　横分割のホームページトップページを作成する

ホームページのindexページに以下のタグを貼り付ける
<HTML>
<HEAD>
<TITLE>ホームページトップページ</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">

<FRAME src="左フレームに表示するサイトのファイル名又はアドレス">
<FRAME src="右フレームに表示するサイトのファイル名又はアドレス">
</FRAMESET>

</HTML>

参考　横に分割したフレームを作る
　　　　フレームを使ったページのリンク

説明
右フレームにリンク先を表示するにはindexページでネームを付けておく
<FRAME src="右フレームに表示するサイトのファイル名又はアドレス"　name="migi">とする

左フレームのリンクボタンに以下のターゲットを付け加える
<A href="リンク先アドレス" target="migi">リンクする文章<A>




戻る