超初心者のためのコピペできるタグ集

戻る   Java Script&APPLET編へ

第3章  コピペできるタグ

■基本編

 


  第3章 コピペできるタグ・基本編  
.1.文字編



・文字の大きさ

---------以下を<BODY>〜</BODY>の間にコピペする---------

<font size=数字>ここに文字を入れる</font>

--------------  ここまで  --------------

★結果は下記のようになります。


・罫線を破線で囲む

---------以下を<BODY>〜</BODY>の間にコピペする---------

<TABLE style="border:3px dotted #ff0099;background-color:#fffff0;" border="0" cellpadding="2">
<TBODY>
<TR>
<TD align="center" height="50">
<TABLE>
<TBODY>
<TR>
<TD width="352" height="200" bgcolor="#ffff99"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>

----------------ここまで---------------


★結果は下記のようになります。
カラーコードを変えると色が変えられます。

・罫線を破線にする

---------以下を<BODY>〜</BODY>の間にコピペする---------

<TABLE style="border:3px dotted #ff0099;background-color:#fffff0;" border="0" cellpadding="2">
<TBODY>
<TR>
<TD align="center" height="50"></TD>
</TR>
</TBODY>
</TABLE>

--------------  ここまで  --------------

★結果は下記のようになります。

カラーコードを変えると色が変えられます。





・文字をボールド(太字)にする

---------以下を<BODY>〜</BODY>の間にコピペする---------

<b>ここに文字を入れる</b>

--------------  ここまで  --------------

★太字は画像が無くても分かりますので割愛させていただきます。


・文字に取り消し線を入れる

---------以下を<BODY>〜</BODY>の間にコピペする---------

<s>ここに文字を入れる</s>

--------------  ここまで  --------------

★結果は下記のようになります。



・文字に影を付ける

---------以下を<BODY>〜</BODY>の間にコピペする---------

<SPAN STYLE="WIDTH:100%;HEIGHT:60;FONT-SIZE=15pt; font-family:arial black; color:#009933; filter:DropShadow(color=#cccc00, offX=10, offY=10, POSITIVE=1)">影のある文字</SPAN>

--------------  ここまで  --------------

★結果は下記のようになります。


・文字をイタリック体にする

---------以下を<BODY>〜</BODY>の間にコピペする---------

----------以下を<BODY>〜</BODY>の間にコピペする---------

<i>ここに文字を入れる</i>

--------------  ここまで  --------------

★結果は下記のようになります。



・文字にアンダーラインを引く

---------以下を<BODY>〜</BODY>の間にコピペする---------

<u>ここに文字を入れる</u>

--------------  ここまで  --------------

★結果は下記のようになります。


・文字に色を付ける

---------以下を<BODY>〜</BODY>の間にコピペする---------

<font color=色>ここに文字を入れる</font>

--------------  ここまで  --------------

★結果は下記のようになります。


・文字を動き回らせる

---------以下を<BODY>〜</BODY>の間にコピペする---------

<DIV align=center><MARQUEE behavior=alternate direction=up height=100 width=90%><MARQUEE behavior=alternate><FONT color=darkgreen>ここに文字を</FONT><BR><FONT color=blue>ここに文字を</FONT></MARQUEE></MARQUEE></DIV>

--------------  ここまで  --------------

★結果は下記のようになります。

ここをクリック


:ブラウザの戻るボタンで戻ってください。


・文字を真ん中に揃える

---------以下を<BODY>〜</BODY>の間にコピペする---------

<DIV align=center>ここに文字を入れる</DIV>

--------------  ここまで  --------------

★画像が無くても分かりますので割愛させていただきます。


・文字を左にスクロールさせる

---------以下を<BODY>〜</BODY>の間にコピペする---------

<marquee>文字</marquee>

--------------  ここまで  --------------

★結果は下記のようになります。

ここをクリック


:ブラウザの戻るボタンで戻ってください。


・文字を右にスクロールさせる

---------以下を<BODY>〜</BODY>の間にコピペする---------

<marquee direction=right width=70% scrollamount=5>ここに文字を入れる</marquee>

--------------  ここまで  --------------

★結果は下記のようになります。

ここをクリック

:ブラウザの戻るボタンで戻ってください。


・文字を左右にスクロールさせる

---------以下を<BODY>〜</BODY>の間にコピペする---------

<marquee behavior=alternate>ここに文字を入れる </marquee>

--------------  ここまで  --------------

★結果は下記のようになります。

ここをクリック


:ブラウザの戻るボタンで戻ってください。


・文字を下にスクロールさせる

---------以下を<BODY>〜</BODY>の間にコピペする---------

<marquee direction=down height=30%>ここに文字を入れる </marquee>

--------------  ここまで  --------------

★結果は下記のようになります。

ここをクリック


:ブラウザの戻るボタンで戻ってください。


文字を上下にスクロールさせる

---------以下を<BODY>〜</BODY>の間にコピペする---------

<marquee direction=up height=30%>ここに文字を入れる </marquee>

--------------  ここまで  --------------

★結果は下記のようになります。

ここをクリック


:ブラウザの戻るボタンで戻ってください。


・文字や画像を左に揃える

---------以下を<BODY>〜</BODY>の間にコピペする---------

<DIV align=left>ここに文字を入れる</DIV>

--------------  ここまで  --------------

★これも画像が無くても分かると思いますので、割愛させていただきます


・文字を右に揃える


---------以下を<BODY>〜</BODY>の間にコピペする---------

<DIV align=right>ここに文字を入れる</DIV>

--------------  ここまで  --------------

★これも画像が無くても分かると思いますので、割愛させていただきます

2.リンク編



・リンク別窓(新しいウィンドウ)で開く場合
---------以下を<BODY>〜</BODY>の間にコピペする---------

・よそのホームページへリンクする場合は、必ず設定すること)
<a  href="リンクURL" target="_blank">リンクしたい言葉</a>

--------------  ここまで  --------------

★これも分かると思いますので、割愛させていただきます



・文字に触れただけでジャンプする

---------以下を<BODY>〜</BODY>の間にコピペする---------

<a href="初心者のためのタグ講座" onMouseOver=location.href='URL'>ここに文字を入れる</a>

--------------  ここまで  --------------

★結果は下記のようになります。

ここに文字を入れる 

悪用禁止です(笑)

:ブラウザの戻るボタンで戻ってください


・画像にリンクを貼る

---------以下を<BODY>〜</BODY>の間にコピペする---------

<a href="リンク先のURL" target="_top"><img src="バナー(画像)のURL" border=0></a>

--------------  ここまで  --------------

★結果は下記のようになります。


クリックしてみてください


・画像に説明を付ける

---------以下を<BODY>〜</BODY>の間にコピペする---------

<img src="画像のURL" ALT="説明" ></a>

上記のように画像にリンクを貼って、さらに画像に説明をつけると・・・

<a href="http://femy.sakura.ne.jp/other/resizing1/kurohime/index.html" target="_top"><img src="coffee1.jpg" border=0 ALT=黒姫童話館でコーヒーブレイクなんてのはどう!?></a>

--------------  ここまで  --------------

★結果は下記のようになります。
マウスを置いてみてください。
黒姫童話館でコーヒーブレイクなんてのはどう!?




・ボタンでリンクさせる

---------以下を<BODY>〜</BODY>の間にコピペする---------

<form action=リンク先のURL><input type=submit value=ここに文字を入れる></form>

--------------  ここまで  --------------

★結果は下記のようになります。


:ブラウザの戻るボタンで戻ってください



・リンクボタンに色を付ける(1)

---------以下を<BODY>〜</BODY>の間にコピペする---------

<form action=リンク先のURL><input type=submit style=background-color:ボタンの色;color:文字の色;border-color:ボタンの左上(立体の部分)の色 border-colordark:ボタンの右下(影になる部分)の色 value=ここに文字を入れる></form>

--------------  ここまで  --------------

★結果は下記のようになります。


:ブラウザの戻るボタンで戻ってください



・リンクボタンに色を付ける(2)

---------以下を<BODY>〜</BODY>の間にコピペする---------

<form action=http://femy.sakura.ne.jp/tagreport/index.html><input type=submit value=コピペできるタグ集Topへ style=background-color:#ffccff;color:black;border-color:#339900></form>

--------------  ここまで  --------------

★結果は下記のようになります。


:ブラウザの戻るボタンで戻ってください


・選択リストでリンク(同一ウィンドウ内)

---------以下を<BODY>〜</BODY>の間にコピペする---------

<form><select onChange='location=this.options[this.selectedIndex].value'><option selected>最初に表示される文字<option VALUE='ここにURL'>リンク1<option VALUE='ここにURL'>リンク2<option VALUE='ここにURL'>リンク3</select></form>

--------------  ここまで  --------------

★結果は下記のようになります。

下向きの三角をクリックしてください。
:ブラウザの戻るボタンで戻ってください



・選択リストでリンク(外部へリンクする場合)

---------以下を<BODY>〜</BODY>の間にコピペする---------

<form><select onChange='top.location=this.options[this.selectedIndex].value'><option selected>最初に表示される文字<option VALUE='ここにURL'>リンク1<option VALUE='ここにURL'>リンク2<option VALUE='ここにURL'>リンク3</select></form>

--------------  ここまで  --------------

★結果は下記のようになります。





ページを開いたら自動でジャンプ(ホームページやブログを引越した時重宝)

数字を変えることで、何秒後にジャンプするか設定できます。
HTMLソースを開きmetaタグのところに貼り付けます。

---------以下を<BODY>〜</BODY>の間にコピペする---------

<meta http-equiv=refresh content=5;URL=ジャンプさせたいページURL>

--------------  ここまで  --------------

★結果は下記のようになります。

引越し先へジャンプ

:ブラウザの戻るボタンで戻ってください


・ページ内の特定の場所に移動させる

---------以下を<BODY>〜</BODY>の間にコピペする---------

クリックするところに(これはコピペしない)
<a href="#○○"></a>

リンクしたいところに(これはコピペしない)

<a name="○○"></a>

--------------  ここまで  --------------

注:#は半角、○○は同じ名前を入れて下さい

リンクしたい箇所の数行上に<a name=○○> </a>を
貼り付けます

★結果は下記で確認できます。

基本編へ戻ります

お気に入り追加ボタンへ移動します




・同一ウィンドウの違うページの特定の場所にリンク

---------以下を<BODY>〜</BODY>の間にコピペする---------

クリックするところに(これはコピペしない)

<a href="違うページのURL#○○"></a>

リンクしたいところに(これはコピペしない)

<a name="○○"></a>

--------------  ここまで  --------------

★結果は下記のようになります。

「タグを使いこなす前に」へジャンプします


3.メール編



・クリックするとメーラー起動

---------以下を<BODY>〜</BODY>の間にコピペする---------

<A HREF="mailto:メールアドレス">メールはこちらから!</A>

--------------  ここまで  --------------

★結果は下記のようになります。


メールはこちらから!




・画像にメールを設定する

---------以下を<BODY>〜</BODY>の間にコピペする---------

<A HREF="mailto:メールアドレス"><img src="画像のURL" BORDER=0></A>

--------------  ここまで  --------------

★結果は下記のようになります。



分からない事や間違いを発見された場合は、こちらからメールをお願いいたします。




・タイトルもあらかじめ設定したい時

---------以下を<BODY>〜</BODY>の間にコピペする---------

<A HREF="mailto:メールアドレス?subject=タイトルをここに">メールはここから!</A>

--------------  ここまで  --------------

★結果は下記のようになります。
メーラーによっては文字化けの可能性有り。


メールはこちらから!


4.クリックボタン



・お気に入りに追加ボタン

---------以下を<BODY>〜</BODY>の間にコピペする---------

<INPUT type="button" onclick="javascript:window.external.addfavorite('ここにぺーじのURL','ここはページのタイトル');" value="お気に入りに追加">

--------------  ここまで  --------------

★結果は下記のようになります。






・お気に入り追加ボタンに画像を使う

---------以下を<BODY>〜</BODY>の間にコピペする---------

<img src="ボタン画像のURL" onclick="javascript:window.external.addfavorite('ここにページのURL','ここはページのタイトル');" alt="お気に入りに追加">

--------------  ここまで  --------------

★結果は下記のようになります。

お気に入りに追加




・クリックボタン(改行するときは「\n」を使う)

---------以下を<BODY>〜</BODY>の間にコピペする---------

<input type=button value=ボタンの文字 onclick=alert('クリックすると出る文字');>

--------------  ここまで  --------------

★結果は下記のようになります。






・ボタンの色を変える

---------以下を<BODY>〜</BODY>の間にコピペする---------

<input type=button value=毎日いいお天気ですね style=background-color:#00cc00;color:black;border-color:#009999>

--------------  ここまで  --------------

#00cc00の部分ををお好きな色に変えます。
★結果は下記のようになります。