since 10th.JUN.2002  ラストりにゅっ 

最初に一番最後にあるはじめにを読んでください

掲 示 板 書 き 込 み 用 の タ グ

©「もっと書き込み隊」準拠

     

 

  文字の大きさと色 段落・文字の位置 画像を貼る 文字や絵を動かす 絵文字 カラーコード


  文字の大きさと色、または強調 (タグをトリプルクリックしてコピーするべし!)

タグ(この列をコピーする) 実際の表示 効果 解説
HimAWArI HimAWArI ------------ タグ無しの表示
<font size="5">HimAWArI</font> HimAWArI 文字のサイズが「5」になる 左の2つが同じ大きさに見えるのはIEの初期値が3だからです。実際の掲示板ではフォントサイズが4になってる場合もある。
<font size="+2">HimAWArI</font> HimAWArI 文字のサイズが2つ大きくなる(初期値が3のときは5)
<font size="-2">HimAWArI</font> HimAWArI サイズが2段小さくなる  
<big>HimAWArI</big> HimAWArI サイズが1段大きくなる <big><big>〜</big></big> というふうに2個で囲むと2個分大きくなります
<small>HimAWArI</small> HimAWArI サイズが1段小さくなる
<font color="plum">HimAWArI</font> HimAWArI 文字色がプラム色になる  
<font face="times new roman,serif">HimAWArI</font> HimAWArI フォントを変える

2コ指定してるけど、相手のPCに最初んがなかったときに、2コ目のが使われます

<b>HimAWArI</b> HimAWArI 文字をBold体(太字)にする

<b><b>〜</b></b> というふうに2個で囲んでも倍の太さにはなりません。<i><i>で2倍斜めになればいいのに!

<i>HimAWArI</i> HimAWArI 文字をItalic体(斜体)にsる
Him<sup>AWArI</sup> HimAWArI 上付文字にする Hey3   とかの表示は  

Hey<sup><font size="-2">3</font></sup>

Him<sub>AWArI</sub> HimAWArI 下付文字にする

H2O   とかの表示は

H<sub><font size="-2">2</font></sub>
Him<s>AWArI</s> HimAWArI  訂正線  
Him<u>AWArI</u> HimAWArI  下線  
<xmp>Him<big>AW</big>ArI</xmp> Him<big>AW</big>ArI タグを無視するタグ

xmpで囲まれた中のタグを無視して入力したとおりに表示します

<ruby>城東小学校<rt>じょうとうしょうがっこう</rt></ruby> 城東小学校じょうとうしょうがっこう ルビをふる

ルビって英語だったのね(笑)
いつも漢字で書いてた(爆)
※ネスケでは使えません※

  文字の大きさと色 段落・文字の位置 画像を貼る 文字や絵を動かす 絵文字 カラーコード


 段 落 や 文 字 の 位 置
タグ 表示 効果 説明
<hr>
区切り線を表示する
  
<hr width="70%">
長さが70%
<hr wideth="70%" size="10" color="hotpink" >
 
長さが70% 太さが10ピクセル 色はホットピンク
<center>I WILL</center>
I WILL
イメージや文字をセンター揃えにする
 
<aligne="right>I WILL</aligne>
I WILL
イメージや文字を右揃えにする
 
       
タグ タグ有り タグ無し
解説

<tt>
┌──────┐
│Think │
│of Me │
└──────┘</tt>

┌──────┐
│Think │
│of Me │
└──────┘
┌──────┐
│Think │
│of Me │
└──────┘

文字をすべて同じ幅に表示させる

但し、書くときもワープロやEDITOR等で等倍フォントを用いて書いたものをコピーしてください。そうしないと空白の量がわからんって!実際に使うのは難しいよ!

  文字の大きさと色 段落・文字の位置 画像を貼る 文字や絵を動かす 絵文字 カラーコード


  画 像 を 貼 る   "URL" は "http://〜〜" で指定する
<img src="URL">

画像をページに貼り込む

URLは「http//:〜 」で指定する

閉じるタグは不要です(大きいサイズは貼らない事)
<img src="URL" width="50" height="50">

表示サイズを指定する

(50pixel×50pixel)

大きい画像はこのタグを使って小さくする
<img src="URL" width="70" height="40"> 表示サイズを指定する

こんな事もできる。。ていうか拡大縮小は縦横比を元の画像と同じにしなきゃ!

<img src="URL" border="3">

 

画像に3ピクセルの枠をつける

数値はピクセルです

<img src="URL" align="left">画像を左に配置して文字を回り込ませる

 

画像を左に配置して文字を回り込ませる 画像を左に配置して文字を回り込ませる  
<img src="URL" align="right">画像を右に配置して文字を回り込ませる 画像を右に配置して文字を回り込ませる 画像を右に配置して文字を回り込ませる  
<img src="URL" align="right" vspace="20" hspace="20" >画像の上下にそれぞれ20ピクセルの余白をつける 画像の上下にそれぞれ20ピクセルの余白をつける  画像の上下にそれぞれ20ピクセルの余白をつける  
<img src="URL" align="top">位置関係 位置関係

画像に対する上下の位置関係

文字列が上に来ます

枠からはみ出た文字は下に表示されます

<img src="URL" align="center">位置関係 位置関係
<img src="URL" align="bottom">位置関係 位置関係
<align〜>を省略した場合と同じです
<a href="URL2">こちらです</a> こちらです

[文字にリンクを貼る]

「こちらです」の文字をクリックするとURL2のページが表示されます。

※ ©「書き込み隊」の掲示板は自動リンクなのでURLをそのまま入れれば「こちら」の文字が表示されます。
<a href="URL2" target="blank"><img src="URL"></A>

[イメージにリンクを貼る]

(URL)の画像をここに貼って、画像をクリックすると(URL2)のページが別窓で開きます。

 

  文字の大きさと色 段落・文字の位置 画像を貼る 文字や絵を動かす 絵文字 カラーコード


  文 字 や 絵 を 動 か す   ※注意※--NetScapeでは表示されません(IEのみです)
<marquee direction="left">(*^_^*)</marquee> (*^_^*) 右から左
<marquee direction="right">(*^_^*)</marquee> (*^_^*) 左から右

<marquee direction="right" behavior="slide">(*^_^*)</marquee>

(*^_^*) 左から右へ行って止まる(もう一度みたければF5を押して!)
<marquee behavior="alternate">(*^_^*)</marquee> (*^_^*) 左右を繰り返す
<marquee behavior="scroll" loop="3">(*^_^*)</marquee> (*^_^*) 3回だけ繰り返す(もう一度みたければF5を押して!)
<marquee behavior="scroll" loop="infinite" scrollamount="20" scrolldelay="2">(*^_^*)</marquee> (*^_^*)

スクロールする距離が2ピクセルずつ動く(数字が少ないと滑らかに動く)

<marquee behavior="scroll" loop="infinite" scrolldelay="50">(*^_^*)</marquee> (*^_^*)

50(msec)

scrolldelayを指定しないときは100msecになります

<marquee behavior="scroll" loop="infinite" scrolldelay="200">(*^_^*)</marquee> (*^_^*)

200(msec)

 

<font color="#993355"><marquee direction=up height=50 scrollamount=5><br>
123<br>
456<br>
</marquee></font>


123
456

上へスクロールする(高さは50ピクセル)

<font color="#993355"><marquee direction=down height=50 scrollamount=5><br>
123<br>
456<br>
</marquee></font>


123
456

下へスクロールする(高さは50ピクセル)

<marquee bgcolor="#dddddd" behavior=SCROLL direction=UP loop=infinite height=70 width=200 scrollamount="1">

  す
    ぺ
      く
        と
</marquee>



  す
    ぺ
      く
        と

上へスクロールする
スクロール窓は
高さ70ピクセル
幅350ピクセル
%で指定もできます

scrollamount=1だからゆっくりなめらかにスクロールする

<marquee behavior=alternate direction=up height=100 width="100%">
<marquee behavior=alternate><font color=red>
 ∧_∧
<font color=blue> ( ・∀・)</font></font></marquee></marquee>

 ∧_∧
( ・∀・)
斜め上にスクロールする
<marquee direction=up height=100 width="100"><marquee behavior="alternate"><font face=symbol color=deeppink size=4>ゥ</font></marquee></marquee> 斜め上にスクロールする
<marquee bgcolor="#cc33ff">(*^_^*)</marquee> (*^_^*) 背景に色を付ける
<marquee bgcolor="#dddddd" width="150" height="18" hspace="20" vspace="20">(*^_^*)</marquee> (*^_^*)

上下左右に20ピクセルの余白をつけた

<marquee><img src="URL"></marquee>

画像を動かす

"URL"は
"http://〜〜"で指定する

  文字の大きさと色 段落・文字の位置 画像を貼る 文字や絵を動かす 絵文字 カラーコード


 絵 文 字 (HTML4.0で定義された文字) 
&#9835 ♫    <font size="5">&#9835</font>
&#9829   <font size="5" color="deeppink">&#9829</font>
&#9830   <font size="5" color="deeppink">&#9830</font>
&#9824   <font size="5">&#9824</font>
&#9827   <font size="5">&#9827</font>
&#9787 ☻    <font size="5" color="orange">&#9787</font>
  &#8224   <font size="5">&#8224</font>
&#9786 ☺    <font size="5">&#9786</font>
&#169 ©   <font size="5">&#169</font> ©
  &#9837   <font size="5">&#9837</font>

※マークはネスケでは表示されないときがあります

以下はWindowsのマシンにしか見えません
 絵 文 字  必殺トリプルクリック★ → ★お試し板にドラッグ★
<font face=symbol color=deeppink size=4>ゥ</font>
<font face=Wingdings size=6>A</font> A
<font face=Wingdings size=4>*</font> *
<font face=Wingdings size=4>&</font> &
<font face=Wingdings size=5>J</font> J
<font face=Wingdings size=5>(</font> (
<font face=Wingdings size=5>K</font> K
<font face=Wingdings size=5>:</font> :
<font face=Wingdings size=5>!</font> !
<font face=Wingdings size=5>Q</font> Q
<font face=Wingdings color=#000000 size=6>M</font> M
<font face=Wingdings size=6></font>
<font face=Wingdings color=#6ACAFD size=5>S</font> S
<font face=Wingdings size=6>チ</font>
<font face=Wingdings color=#000000 size=5>N</font> N
<font face=Wingdings size=6>ョ</font>
<font face=Wingdings size=4>"</font> "
<font face=symbol color=black size=4>ェ</font>

※印のフォントは一部の環境では表示されなかったことがあります
絵文字はずっとそのうち増やします。(しないと思う)

  文字の大きさと色 段落・文字の位置 画像を貼る 文字や絵を動かす 絵文字 カラーコード


  主なカラーネームとカラーコード   

色の指定はカラーネームでもカラーコードでもおっけぇです。例:<font color="black">と<font color="#000000">は同じです
好きなカラーネームを6コくらい覚えると掲示板の文字には困りません

実際の色
カラーネーム
16進数
 
実際の色
カラーネーム
16進数
           white #FFFFFF              pink #FFC0CB
           ivory #FFFFF0              hotpink #FF69B4
           lightgray #D3D3D3              deeppink #FF1493
           gray #808080              tomato #FF6347
           darkslategray #2F4F4F              red #FF0000
           black #000000              crimson #DC143C
           aqua #00FFFF              brown #A52A2A
           skyblue #87CEEB              darkred #8B0000
           deepskyblue #00BFFF              khaki #F0E68C
           royalblue #4169E1              yellow #FFFF00
           blue #0000FF              gold #FFD700
           indigo #4B0082              orange #FFA500
           navy #000080              lightgreen #90EE90
           plum #DDA0DD              greenyellow #ADFF2F
           violet #EE82EE              lime #00FF00
           magenta #FF00FF              yellowgreen #9ACD32
           mediumpurple #9370DB              green #008000
           purple #800080              olive #808000

 

#FFFFFF
#DDDDDD
#BBBBBB
#999999
#777777
#555555
#333333
#111111
------
#DDFFFF
#BBFFFF
#99FFFF
#77FFFF
#55FFFF
#33FFFF
#11FFFF
------
#FFDDFF
#FFBBFF
#FF99FF
#FF77FF
#FF55FF
#FF33FF
#FF11FF
------
#FFFFDD
#FFFFBB
#FFFF99
#FFFF77
#FFFF55
#FFFF33
#FFFF11
#FF0000
#DD0000
#BB0000
#990000
#770000
#550000
#330000
#110000
#00FF00
#00DD00
#00BB00
#009900
#000770
#005500
#003300
#001100
#0000FF
#0000DD
#0000BB
#000099
#000077
#000055
#000033
#000011
#FFDBC9
#FF9872
#FF6928
#FF4F02
#E6FFE9
#93FFAB
#43FF6B
#00FF3B
#D7EEFF
#8EF1FF
#46EEFF
#00ECFF
#D9E5FF
#8EB8FF
#4689FF
#005FFF
#EAD9FF
#C299FF
#9057FF
#5507FF
#FFD5EC
#FF97C2
#FF5192
#FF0461
#CEF9DC
#86F9C5
#4DF9B9
#00F9A9
#F3FFD8
#E4FF8D
#D0FF43
#B6FF01

  文字の大きさと色 段落・文字の位置 画像を貼る 文字や絵を動かす 絵文字 カラーコード


「  は  じ  め  に  」

タグの基本ルール  掲示板での使い方

<このHTMLをデスクトップ等に保存して,(又はOn Lineで)書き込むときにタグをコピぺ(マウスでコピーして貼り付け)してお使い下さい>

<別窓の「お試し板」でテストができます>
<まちがってお試し板を閉じてしまった場合はこのページを再読み込みするか一番上のボタンで開いてください>

<「お試し板」はenterキーで改行されません。詳しいことがわからな人は、複数行のテストは練習用掲示板を使ってね>

・タグとは、「<」と「>」とで囲まれた半角の英数字です。

・開始タグと終了タグが対になってるのが原則です(例外は<IMG><HR>などで単独で使えます) 

・対になってるのは必ず終了タグ</〜>で閉じる習慣をつけてください(終了タグがないと、たとえば大きいフォントを指定して、閉じなかったら、以後に書き込んだ人の文章が全部大文字になってしまいます。・・・さすがに今はそんな掲示板はないですね。うっかりさんの為にちゃんと自動で閉じるようにプログラミングされてます。

・タグは大文字でも小文字でもおっけ〜です。普通は大文字で書かれる事が多いです。

・属性値の「””」(double quotation)は省略してもかまいません。 が、解説書とかは省略しない事が多いですね。

・タグの中身は全部半角です。スペースも半角のスペースです。←これ大事

・掲示板によってはいくつかのタグは禁止しています。掲示板によって違うよ。

・<BODY>や<TD>などは普通つかえませんが、たまに使えちゃったりして(汗)、使うと掲示板が壊れてしまうところもあります。もちろんそんなデンジャラスなタグはここでは紹介してません。

・閲覧する人のブラウザによってタグが効果のある場合とない場合が有ります。

    (<marquee>はよく使いますがIEの4.0以後は表示されますが、ネットスケープではタグがそのまま表示されスクロールもしません)

・閲覧する人の機種によっては文字が表示されません(機種依存文字を使用した場合)

    (Windowsのはーと文字はマックでは表示されません。マックにはWingDingFontが無いので、同様に、マックの電話マークもWindowsでは表示されません)

・タグの多用は掲示板を見苦しくする場合もあるので気をつけましょう。

・その場でのノリで盛り上がってるときはじゃんじゃん使おう!

・タグを使用するときは絶対削除キーは忘れるな!!! 

・書き込み隊の掲示板でイッキレスモードでタグを使うときは一度送ったあとに、タグを使ったレスにひとつづつEDITTモードで入ってそのままSubmitするとタグが生きてきます。

・このHTMLは随時私の都合で改造・変更します。また気分次第でなくなりもします。

・ここで書いてるタグや文章は間違いとかあるかもしれませんが。各自の責任で使用してください。(間違い指摘大歓迎!)

 

 

★インターネットエクスプローラで使うワンポイントテク★

 

「便利な使い方(Windows+IEの場合)」


●「お試し板」でためしてみる●

  1 使いたい、試したいタグの上に、マウスを重ねる。

  2 クリックを、3回、(タグが、反転し選択される)
    (ネスケの人は、ふつうにタグの先頭から、一番後ろまで、ドラッグ)
    「Ctrl+C」を押す(「Ctrl」キーを押しながら「C」を押す)

  3 マウスで反転されたところをクリックして「タグのお試し板」の窓にドラッグする文章や数値を修正する

  4 ボタンを押して表示を確かめる

  5 おっけ〜だったら窓の中を全部コピペで発言する掲示板に貼り付ける

 

●いきなり掲示板に書き込む●

  1 使いたい、試したいタグの上に、マウスを重ねる。

  2 クリックを、3回、(タグが、反転し選択される)
    (ネスケの人は、タグの先頭から、一番後ろまで、ドラッグ)
    「Ctrl+C」を押す(「Ctrl」キーを押しながら「C」を押す)

  3 書き込む掲示板の発言欄にカーソルを持っていく
    「Ctrl+V」を押す(「Ctrl」キーを押しながら「V」を押す)
    

  4 発言欄に目的のタグが、貼りついてる(^.^)

     <これを、有名な「コピー&ペースト」(通称コピペ)といいます。

  5 このまま、発言して、目的のタグが、表示されれば、大成功!

 


-----ネットの U^ェ^U ワンポイント!

★再読み込みはF5が便利!(Windows)

★文字が小さくて読みにくいときは「Ctrl」キーを押しながらマウスのスクロールキーを下へ!(Windows且つIEの場合)。ネスケのときは「Ctrl」+「」」だったかな?

★先に見たページにイッキに戻るときは「Shift」キーを押しながらマウススクロールキーを下へ回すのが便利!

★フレーム使ってるページや、今見てるページはそのままで別窓でリンクページを見たいときは「Shift」キーを押しながらマウスでクリックする。ディスプレィが小さいときは便利です。

●変なページにひっかっかったときとか、新しいウィンドウがバンバン開く(ブラクラと言います)ページに行っちゃったときは「Alt」+「F4」を押し続けるとウィンドウがバンバン閉じます。

●ヤバそうなページを見るときはIEのプルダウンメニューから「ツール」〜「インターネットオプション」〜「セキュリティ」タブでレベルを最高にあげて見に行ってください。(それでも悪質なウィルスに感染したHPはだめですけど)