すぐに使えるタグ一覧

ｐａｒｔ　１

　　　　　　　　●　すぐに使えるタグ（一部スタイル、JavaScript） をまとめてみました。
　　　　　　　　●　掲示板では、タグの使えないところ、タグの種類が限定されている
　　　　　　　　　　　ところがあります。
　　　　　　　　　　　各掲示板のヘルプをご覧ください。
　　　　　　　　●　IEのみでしか使用出来ないタグ欄には、””のマークを入れております。
　　　　　　　　●　特殊文字､機種依存文字などは、ＯＳによって文字化けの原因になります。
　　　　　　　　●　タグは大文字・小文字どちらでも構いませんが、半角英数を使用して下さい。
　　　　　　　　●　画像、音楽等は他の方の迷惑にならないように、常識の範囲内で使用するように
　　　　　　　　　　　してください。
　　　　　　　　●　フリーソフトの「かきこみさん」を使うと、一部の文字タグが自動的に挿入出来たり、
　　　　　　　　　　グラデーションを作成したり、掲示板と同じ状況で表示確認できます。

ｐａｒｔ １ 文字飾り 画像貼付
ｐａｒｔ ２ リンク リスト スクロール ＭＩＤＩ ボタン
ｐａｒｔ ３ 特殊文字 特殊文字　(windowsフォント)
ｐａｒｔ ４ 特殊文字　(HTML4.01等)
ｐａｒｔ ５ 他 １
ｐａｒｔ ６ 他 ２　（ＣＳＳ、JavaScript）


■　文字飾り

　※　オレンジ色部分のところで設定し、青色部分で文字を記載してください。

設定したい内容 タグの使用方法　（コピー＆ペースト） プラウザ表示状態
文字の大きさ <font size="5">大きな文字。</font>

<font size="2">小さな文字。</font>

文字サイズは１〜７まで指定出来ます。		 大きな文字。

小さな文字。
太文字 <b>太い文字</b> 太い文字
斜体 <i>abcd</i> abcd
文字色 <font color="#0000ff">青色</font>
または、
<font color=red>赤色</font>		 青色

赤色
文字の色・大きさ <font color="green" size="4">文字の色・大きさ</font> 文字の色・大きさ
アンダーライン <font style="text-decoration : underline">アンダーライン</font>

<u>アンダーライン</u>		 アンダーライン

アンダーライン
取り消し線 <font style="text-decoration : line-through">取り消し線</font>

<s>取り消し線</s>		 取り消し線


取り消し線
水平線 <hr>

<hr color=red>

水平線　幅６０％ 幅を６0％にした
<HR WIDTH="60%">
水平線です。 		幅を６0％にした
水平線です。
上下に水平線 <hr>上下に水辺線<hr>
上下に水辺線
改行 改行<br>すると

※　HTMLソースの中で改行してもブラウザ上では反映されません
このタグで強制的に改行させます
単独で使用でき終了タグは使いません。		 改行
すると
右揃え <p align="right">右揃え</p>

右揃え
中央揃え <p align="center">中央揃え</p>

中央揃え
両端揃え <blockquote>
ここに書いた長い文書が両端にスペースが入り、両端が揃えられて表示されますます。ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ
</blockquote>
ここに書いた長い文書が両端にスペースが入り、両端が揃えられて表示されますます。 ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ
上付き文字 文字<sup>上付き文字</sup>

♪♪<sup>♪♪<sup>♪♪<sup>♪♪</sup>♪♪</sup>♪♪</sup>♪♪</sup>		 文字上付き文字

♪♪♪♪♪♪♪♪♪♪♪♪♪♪
下付き文字 文字<sub>下付き文字</sub> 文字下付き文字
マウスカーソルを載せると説明文を表示 <font title="説明文を表示">説明文字</font> 説明文字
マーカー <span style="background-color: #0066ff">マーカー色</span>

<span style="background-color: #c0c0c0; font-size: 32px">背　景　色</span>

<span style="background : #000000; color : #ffff00">背景色と文字色の設定</span>		 マーカー色

背　景　色


背景色と文字色の設定
文字廻りに枠を表示 <span style="border-style : solid; border-width : 1px">文字のまわりに枠を表示します</span>

　・solid ： 実線、double ： 二重線、dotted :点線
　・※px : 枠の幅(ピクセル、1ドット幅)		 文字のまわりに枠を表示します
文字の上下に線 <span style="text-decoration: underline overline; font-size: 24px">上下線付け</span> 上下線付け
　文字のぼかし <span style="width:80%; filter:blur(strength=10); font-size: 24px">文字のぼかし</span> 文字のぼかし
　文字の反転 <span style="width:80%; filter:mask(color=black); font-size: 24px">文字の反転</span> 文字の反転
上記のフォントサイズの１〜７より大きな文字 <span style="font-size: 200px">亜</span>
または
<div style="font-size: 200px">亜</span>
※　「ｄｉｖ」は１行に一つしか指定できません。		 　※　大きすぎて表示させられません。
　ルビをつける <ruby>ルビをつける文字列<rp>■</rp><rt>ルビ</rt>
<rp>■</rp></ruby>		 一日一膳■いちにちいちぜん ■
マウスポインタを乗せると文字色が変化 <font onmouseover=this.color="マウスを乗せた時の文字色"; onmouseout=this.color="マウスが離れた時の文字色">この上にオンマウス</font> この上にオンマウス


■　画像貼付

　※　オレンジ色部分のところにＵＲＬ or 設定、青色部分で文字を記載してください。

※　画像を貼り付けると重たくなって、ダイヤル接続等の方は掲示板が表示されるのに
　　 時間がかかり、掲示板に迷惑がかかる場合があります。
　　 小さい画像等で表示させて、画像クリックでＪＰＥＧ画像等を表示させる方が良いでしょう。

　　　　
設定したい内容 タグの使用方法　（コピー＆ペースト） プラウザ表示状態
画像の貼付 画像を<img src="画像ＵＲＬ">貼付ます。 画像を貼付ます。
画像を中央揃え <div align="center"><img src="画像ＵＲＬ"></div>
画像を右寄せ <div align="right">
<img src="画像ＵＲＬ">
</div>
左画像+右文字廻込み <img src="画像ＵＲＬf" align="left">
画像は左寄せです。<br>
文字は画像の右側に配置されます。<br>
<br clear="left">		 画像は左寄せです。
文字は画像の右側に配置されます。
右画像+左文字廻込み <img src="画像ＵＲＬ" align="right">
画像は右寄せです。<br>
文字は画像の左側に配置されます。<br>
<br clear="right">		 画像は左寄せです。
文字は画像の右側に配置されます。
文字廻込み解除 <img src="画像ＵＲＬ" align="left">
← 画像左、文章右廻込み<br><br>
<img src="画像ＵＲＬ" align="right">
画像右、文章左廻込み →
<br clear="all">
文字廻込みを解除。		 ← 画像左、文章右廻込み

画像右、文章左廻込み →
文字廻込みを解除。
左画像+文字右上 <img src="画像ＵＲＬ" align="top">
文字が右上に。<br>		 文字が画像の右上に。
左画像+文字中央 <img src="画像ＵＲＬ" align="middle">
文字が中央に。<br>		 文字が画像の中央に。
左画像+文字右下 <img src="画像ＵＲＬ" align="bottom">
文字が画像の右下に。<br>		 文字が画像の右下に。
マウスカーソルを乗せると、説明文を表示 <img src="画像ＵＲＬ" alt="牛" title="だっちゅーの！"> 牛
画像を縮小表示 <img src = "画像ＵＲＬ" width=150 height=100></a>

※　縮小表示させても、元の画像を読み込み
　　 ますので、元画像の容量に関係します。
画像を縮小表示、
クリックで拡大する		 (一つの同じ画像を縮小表示)

<a href="画像ＵＲＬ"><img src = "画像ＵＲＬ" width=150 height=100></a>

※　縮小表示させても、元の画像を読み込み
　　 ますので、元画像の容量に関係します。
(貼付ける画像は画像ソフトで縮小させて、
　掲示板に表示)

<a href="画像ＵＲＬ"><img src = "縮小画像ＵＲＬ" ></a>
(貼付ける画像は画像ソフトで縮小させて、
　掲示板に表示、画像廻りの枠を付けない)

<a href="画像ＵＲＬ"><img src = "縮小画像ＵＲＬ" border="0"></a>
（上記の設定で、別プラウザで表示）

<a href="画像ＵＲＬ" target="_blank"><img src = "縮小画像ＵＲＬ" border="0"></a>
　色の反転 <img src="画像ＵＲＬ" alt="色の反転" border="0" style="filter:invert()"> 色の反転
　グレイ効果 <img src="画像ＵＲＬ" alt="グレイ効果" border="0" style="filter:gray()"> グレイ効果
　左右反転 <img src="画像ＵＲＬ" alt="左右反転" border="0" style="filter:fliph()"> 左右反転
　上下反転 <img src="画像ＵＲＬ" alt="上下反転" border="0" style="filter:flipv()"> 上下反転
　ぼかし効果 <img src="画像ＵＲＬ" alt="ぼかし効果" border="0" STYLE="filter:Blur(strength=20)"> ぼかし効果
　半透明 <img src="画像ＵＲＬ" alt="半透明" border="0" style="filter:alpha(opacity=50)"> 半透明

　　※　ＨＰの作成時は、上記のように「画像ＵＲＬ」を
　　　　 絶対パス（ http://******/+++.jpg ）でなくても、相対パスでＵＲＬを指示できます。
　　　　 ｈｔｍｌ文書と同じフォルダに画像ファイルがある場合は、
　　　　　　　　　　<img src="*****.jpg">
　　　　 ｈｔｍｌ文書と同じフォルダにフォルダを作成して画像ファイルを入れた場合は、
　　　　　　　　　　<img src="フォルダ名/*****.jpg">