TOPにもどる
JavaScript 情報

全体 <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>

全体 <body>

ホームページのメイン
タグ <body>ホームページの内容</body>
見本 <html>
<head>
<title>ホームページタイトル</title>
</head>
<body>
ここから文章や画像などが表示されます
</body>
</html>
解説 <body> は、ホームページのメインの場所です。ここにタグや文章や画像などを入れていきます。上の見本のような形がホームページの基本です。これだけの文字だけでもホームページは完成しています。後はいろんなタグや画像を入れていくだけです。
</body> と、タグはきちんと最後に閉じてください。

全体の基本的な文字の色を指定
タグ <body text="#色を指定">
見本 <html>
<head>
<title>ホームページタイトル</title>
</head>
<body text="#色を指定">
ここから文章や画像などが表示されます
</body>
</html>
解説 text="#色を指定" は、全体の基本的な文字の色を指定できます。「色を指定」の所に好きな色を入れてください。何も書かなければ黒色の文字になってます。白にする場合は「ffffff」といれてください。 赤は「ff0000」、青は「0000ff」、緑は「00ff00」
色の見本や詳しい説明は色見本を見てください。

全体のリンク色を変更する
タグ <body link="#色" vlink="#色" alink="#色">
見本 <html>
<head>
<title>ホームページタイトル</title>
</head>
<body link="#色を指定" vlink="#色を指定" alink="#色を指定">
ここから文章や画像などが表示されます
</body>
</html>
解説 link="#色を指定" は、リンクしたときの色を指定できます。「色を指定」の所に好きな色を入れてください。
link="#色を指定" = リンクしたときの色
vlink="#色を指定" = 一度 訪問したことあるリンクの色
alink="#色を指定" = クリックしたときのリンクの色
色の見本や詳しい説明は色見本を見てください。

全体の背景の色を指定
タグ <body bgcolor="#色を指定">
見本 <html>
<head>
<title>ホームページタイトル</title>
</head>
<body bgcolor="#色を指定">
ここから文章や画像などが表示されます
</body>
</html>
解説 bgcolor="#色を指定" は、全体の背景の色を指定できます。「色を指定」の所に好きな色を入れてください。 何もしなければ白色になります。
色の見本や詳しい説明は色見本を見てください。

全体の背景に画像を使用する
タグ <body background="画像名">
見本 <html>
<head>
<title>ホームページタイトル</title>
</head>
<body background="画像名">
ここから文章や画像などが表示されます
</body>
</html>
解説 background="画像名" は、全体の背景一面に指定した画像を並べて表示できます。「画像名」の所に用意した画像ファイルの名前を指定してください。 全体の背景の色は指定画像の背景になるので見えなくなります。
★ サンプル1   ★ サンプル2

全体の上下左右の余白をなくす
タグ <body topmargin="0">
見本 <html>
<head>
<title>ホームページタイトル</title>
</head>
<body topmargin="0">
ここから文章や画像などが表示されます
</body>
</html>
解説 ホームページには ある程度上下左右スペースがあります。 topmargin="0" とすると、上の部分のスペースをなくせます。 横をなくす場合は leftmargin="0" としてください。
★ サンプル1

▲目次へ

タイトル <title>

タイトルをつける
タグ <title>ホームページタイトル</title>
 <html>
<head>
<title>ホームページタイトル</title>
</head>
<body>
<br><br><br><br>
ようこそ<br>
ホームページへ
</body>
</html>
解説 タイトルタグを書くときは必ず <head> から </head> の間にお書きください。(上参照)
ホームページの名前をインターネット見てる画面(ブラウザ)の左上の所に出せます。(下の図を参考)  今 見ているこのサイトの左上にも「画像のない素材屋」と出てると思います。

 ホームページタイトル ←ここに表示される
ようこそ
ホームページへ
インターネット画面
▲目次へ

改行 <br>

改行する
タグ ここに<br>文字
通常ここに文字
結果ここに
文字
解説このタグは一番よく使う改行するタグです。 タグは大体閉じる必要がありますが、このタグは <br> と書くだけで大丈夫です。

▲目次へ

段落 <p>

段落をつける
タグ ここに<p>文字
通常ここに文字
結果ここに

文字

解説このタグは単体で使うと改行タグの2つ分あります。但し、<p> は複数書いても1つ分しか改行されません。たくさん改行するときは <br> を何個も書いてください。

段落タグで囲む
タグ ここに文字<p>ここに文字</p>ここに文字
通常ここに文字ここに文字ここに文字
結果ここに文字

ここに文字

ここに文字
解説このタグを閉じて使うとこんな感じになります。 <p>タグで囲った字の上下に1段落空きます。

段落して横の位置を指定
タグ ここに文字<p align="center">ここに文字</p>ここに文字
通常ここに文字ここに文字ここに文字
結果ここに文字

ここに文字

ここに文字
解説真ん中に表示させます。上と下に1段空きます。 上と下に1段空けないで真ん中に表示したいときは センター を使ってください。
align="center" の「 center 」が真ん中に表示するということです。 左にしたい場合は「 left 」、右にしたい場合は「 right 」と入れてください。


▲目次へ

横罫線 <hr>

一本線をひく
タグ ここに<hr>文字
通常ここに文字
結果ここに
文字
解説このタグは横に一本線を引きます。自動的に一行分使いますので 改行しなくても勝手に改行されます。長さは指定してなければ、端から端まで伸びれるだけ伸びます。長さをしていしたい場合は width="数" を指定します。色や太さも指定できます。

一本線の長さを変える
タグ長さの指定
<hr>
<hr width="10">
<hr width="50">
<hr width="100">
<hr width="200">
<hr width="50%">
<hr width="90%">
<hr width="100%">
解説「 % 」で指定すると伸びれる範囲内で、指定された割合の長さになります。何もしない場合は100%両端に伸びます。

一本線の太さを変える
タグ太さの指定
<hr size="1">
<hr size="5">
<hr size="10">
<hr size="15">

一本線を塗りつぶす
タグ塗りつぶし
<hr size="1" noshade>
<hr size="5" noshade>
<hr size="10" noshade>
<hr size="15" noshade>
解説「 noshade 」を書くと灰色に塗りつぶされます。色を指定しても塗りつぶせます。

一本線に色をつける
タグ色の指定
<hr color="#000000">
<hr color="#ff0000">
<hr color="#00ff00">
<hr color="#0000ff">
<hr color="#999999">
解説6桁の色を表している字を指定すれば色を変更できます。説明は 「 色の見本 」を参考にしてください。  長さとか太さを指定すれば、色つきで組み合わせて使用できます。

一本線の位置を指定
タグ位置の指定
<hr width="200" align="left">
<hr width="200" align="lright">

▲目次へ


センター <center>

中心に表示する
タグ <center>ここに文字</center>
通常ここに文字
結果
ここに文字
解説何でも真ん中に表示させます。全体を中心に揃えたいときはこのタグで全部囲ってしまおう。(body内で)

▲目次へ

範囲(部分) <span>

部分的に使用する
タグ <span>ここに</span>文字
通常ここに文字
結果ここに文字
解説<span> は単独では何も意味はないみたいです。スタイルシートなどを部分的に使うときに少し便利です。

スタイルシートを利用
タグ <span style="font-size:25px;">ここに</span>文字
通常ここに文字
結果ここに文字
解説上の結果はスタイルシートの字を大きくするのを利用しました。 その他いろんなスタイルシートを活用できます。スタイルシートは、今 紹介している いろんな「htmlタグ」を、より便利にする機能があります。

▲目次へ

範囲(1行) <div>

1行分使用する
タグ <div>ここに</div>文字
通常ここに文字
結果
ここに
文字
タグ <div align="center">ここに</div>文字
結果
ここに
文字
タグ <div align="right">ここに</div>文字
結果
ここに
文字
解説<div> で囲むと1行分使用します。囲まれたもの意外は次の段に移動しましす。align="center"を付け足すと、その段の真ん中に表示されます。align="right"にすれば右に寄せれます。このタグもスタイルシートを活用するといろいろと便利です。

▲目次へ

見出し <h数>

見出しをつける
タグ ここに文字<h数>ここに文字</h数>ここに文字
通常ここに文字ここに文字ここに文字
数=1ここに文字

ここに文字

ここに文字
数=2ここに文字

ここに文字

ここに文字
数=3ここに文字

ここに文字

ここに文字
数=4ここに文字

ここに文字

ここに文字
数=5ここに文字
ここに文字
ここに文字
数=6ここに文字
ここに文字
ここに文字
解説<h数>ここに文字</h数> の「数」の所に1〜6の数字をいれると、上の真ん中の文字のように大きさが変わり、上下に1段落分スペースが空きます。

▲目次へ

リンクする <a href="リンク先">

リンクをする
タグ <a href="リンク先">ここに文字</a>
通常ここに文字
結果ここに文字
解説<a href="リンク先">の「リンク先」の部分をリンク先アドレス、もしくはファイル名などを指定するとそのページに飛びます。
上の見本の「結果」をクリックするとyahooのホームページに飛びます。これは「リンク先」の所に「http://www.yahoo.co.jp/」とyhooのホームページアドレスを入れたからです。自分のサイトの違うページに行くときはファイル名「○○○.html」という風に記入します。「○○○」はファイル名で「.html」は種類(拡張子)です。

リンクの色を変える
解説 <body> タグの所で全体のリンク色を変えれます
スタイルシートを使えば部分的なリンク色も変えれます。

ターゲットを指定する
タグ <a href="リンク先" target="_top">ここに文字</a>
通常ここに文字
_topここに文字
_blankここに文字
解説 フレームがあるサイトは他のフレームがが残ってしまうときがあります。これは表示されているページしか リンク先にいけていないということです。 なので、 リンクタグに target="_top" を付け加えます。 するとフレームで分かれているメニュー画面を含めて全体がリンク先に飛びます。 target="_blank" とすると新しいウィンドウでリンク先を開きます。target="フレーム名" と、フレーム名で指定することも可能です。 フレーム名はフレームを作るときに名前をつけれます。

同じページ内にリンク
タグ <a name="名前"></a>
結果ここに文字
解説 上のリンクをクリックすると同じページの一番上に戻ります。
同じページ内で、 <a name="名前"></a> と書いた場所に移動ができます。 まず「名前」の所に適当に名前を書いておきます(下図の赤文字) そして、リンクするためにリンクタグのリンク先を書く所に「#」と、決めた名前をいれて (下図の青文字)、リンクタグで囲ってる「上に戻る」をクリックすると 指定した場所に移動できます。
違うページの指定した場所に移動するには <a href="ページ名#AAA">リンク</a> と、「#」の前にページ名を足してください。
見本:<a href=M02.html#1>リンク</a>
結果:リンク

 ホームページタイトル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<a name="AAA"></a>
<br>
<br>
ここから文章が表示されます
<br>
<br>
<a href="#AAA">上に戻る</a>
</body>
</html>

▲目次へ

画像表示 <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ようこそいっらしゃいました。是非是非「画像のない素材屋」の素材をご利用ください。もしよかったらリンクお願いします。
rightようこそいっらしゃいました。是非是非「画像のない素材屋」の素材をご利用ください。もしよかったらリンクお願いします。
解説画像の横には普通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="説明"」の効果です。

▲目次へ

メール <a href="mailto:メールアドレス "> 文字 </a>

メールのリンク
タグ <a href="mailto:tggt4@hotmail.com">tggt4@hotmail.com</a>
通常tggt4@hotmail.com
結果tggt4@hotmail.com
解説メールを送れるリンクタグです。普通のリンクタグと違うのは「mailto:」があることです。「mailto:アドレス」を書くことによってアドレス先にメールが送れるようになるみたいです。クリックするとメールソフトが起動して、あて先が「mailto:アドレス」のアドレスになっています。
<a href="mailto:tggt4@hotmail.com">ここに文字</a>
「ここに文字」の所は何の文字でも構いません。アドレスをそのまま書いてもいいし、メールとだけ書くのもいいし、画像にすれば画像を選ぶとメールを送れます。
ちなみに上のサンプルのメールは管理人のフリーメールです。返事をしないでいいのなら試しに送って頂いてもいいです。ご用件がある方はお返事します。けど、簡単な用件は掲示板にお願いします。

▲目次へ

コメント <!- -  - ->

編集にコメントを入れる
タグ <!--ここに文字-->
通常見えない
結果編集画面でしか使わない
解説このコメントのタグは、ネットでは閲覧できない文字です。 ホームページを作る編集画面でしか見られません。なので編集する人意外は関係ありません。編集する人は注意書きなどわかりやすくするために書いたりします。 ここの「画像のない素材屋」の素材もわかりやすくするため始めと終わりに、このタグを使っております。邪魔だと感じたら消してください、何も支障はないです。

 ホームページ
<html> <!--htmlの始まり-->
<head> <!--headの始まり-->
<title>ホームページ</title> <!--タイトル-->
</head> <!--headの終わり-->

<body> <!--bodyの始まり-->

ここから文章が <!--ここに文章書きます-->
表示されます

</body> <!--bodyの終わり-->
</html> <!--htmlの終わり-->

▲目次へ

TOPにもどる



お役立ちリンク集: sozai-R 素材NAVI イラスト素材プチッチ HP作成無料 ホームページ制作会社 ジェバアーツ 格安ホームページの制作屋