|
||
ＨＴＭＬ 初級編
--------------------------------------------------------------------------------
[→ ＨＯＭＥ ] 【体に良いもの見つけ隊】
--------------------------------------------------------------------------------
●目次
--------------------------------------------------------------------------------
・タグについて説明
・文章を改行したい
・他のページにリンクを張りたい
・文字の色を変えたい
・文字の大きさ（サイズ）を変更したい
・文字を太くしたい
・文字をセンタリング(中央揃え)したい
・文字を斜体で(ななめに傾けて)表示したい
・文字にアンダーライン(下線)をつけたい
・文字に取り消し線をつけたい
・文字をテロップのように動かして表示したい
・文字を点滅させたい
・表(テーブル)を書きたい
・あなたのサイトをお気に入りに追加できるリンクのソース
・サイトマップ
--------------------------------------------------------------------------------
●まず、タグについて説明
タグ（tag）は、「この部分をセンタリング！」とか、「ここは文字を大きく！」って命令するコマンドのこと。
ほとんどのタグは、開始タグ(「<****> 」と、終了タグ「 </****> 」のペアでひとつの命令になっています。
開始タグと、終了タグは半角英数で入力！（例）→<CENTER> </CENTER>
日本語文章は全角/ひらがな（H）で入力！（例）→この部分をセンタリング！
| タグ（半角英数）と日本語文章を組み合わせて入力→ | <CENTER>あいうえお！</CENTER> |
| 表示はこうなります→ | あいうえお！ |
通常のテキストファイルと違ってＨＴＭＬ文書は、通常の改行やインデントが関係ないので、
次のように書いても意味は同じになります。
<CENTER>
この部分をセンタリング！
</CENTER>
--------------------------------------------------------------------------------
●文章を改行したい
文章を改行したいところに半角英数で<BR>と入力
[HTMLタグ]は半角英数で入力
あいうえお<BR>
[完成例]
あいうえお<BR>
かきくけこ<BR>
と書くと...
あいうえお
かきくけこ
のように文字が表示されます。
--------------------------------------------------------------------------------
●他のページにリンクを張りたい
[ 表示例 ] 「Yahooジャパンへリンク」
[HTMLタグ]は半角英数で入力
<a href=”http://www.yahoo.co.jp/“>Yahooジャパン</a>
自分のホームページを他のホームページとリンクをさせたい時は、
<a href="リンク先のアドレス">リンク先のホームページの名前</a>
と書くと
文字をクリックして他のページにジャンプできるようになります。
(アドレスとは、Yahooジャパンの場合「http://www.yahoo.co.jp/」 のようにhttp://で始まるものをさします)
[完成例]
<a href="http://http://www.yahoo.co.jp/">Yahooジャパン</a>へジャンプ
と書くと...
Yahooジャパンへジャンプ
のようにYahooジャパンへジャンプ できるようになります。
--------------------------------------------------------------------------------
●文字の色を変えたい
[ 表示例 ] 文字の「色を」変える
[HTMLタグ]は半角英数で入力
<font color=”blue”>色</font>
色を変えたい文字を<font color="色名">と</font>でくくると、
文字の色を変えることができます。(red,blueなど)
※color="色名"の色の部分を変えると他の色にすることもできます。
↓のようにblueやgreenなど様々な色が使用できます。
| white | black | gray | blue |
| cyan | green | lime | khaki |
| yellow | orange | brown | red |
| pink | purple | violet | Aqua |
#FFFFFFのようにカラーパレットで指定することも可能です。
[完成例]
ここから先が <font color="blue"> 青く </font> なります。
と書くと...
ここから先が 青く なります。
のように文字が色をかえて表示されます。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
--------------------------------------------------------------------------------
●文字の大きさ（サイズ）を変更したい
[ 表示例 ] 文字を「大きく」表示させる
[HTMLタグ] は半角英数で入力
<font size=”7”>大きく</font>表示させる
大きさを変えたい文字を<font size="サイズ">と</font>でくくると、
文字の大きさを変えることができます。(１〜７まで)
※size="サイズ"の色の部分を1〜7の数字に変えると文字の大きさを変えることができます。
のように、1がもっとも小さく7がもっとも大きいサイズとなります。
※また、見出しの文字のサイズは<h1〜6>タグで変更することもできます。
この場合、サイズの指定は<h1>と</h1>がもっとも大きくなり、
<h6>と</h6>でくくった場合がもっとも小さくなります。
[完成例]
ここから先が <font size="7"> 大きく</font> なります。
と書くと...
ここから先が大きくなります。
のように文字がサイズを変えて表示されます。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
--------------------------------------------------------------------------------
●文字を太くしたい
[ 表示例 ] 文章を「太字で」表示する
[HTMLタグ] は半角英数で入力
<b>太字</b>で表示する
太くしたい文字を<b>と</b>でくくると、その文字を太く表示することができます。
[完成例]
ここから先が <b> 太く </b> なります。
と書くと...
ここから先が 太く なります。
のように文字が太くなって表示されます。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
--------------------------------------------------------------------------------
●文字をセンタリング(中央揃え)したい
[ 表示例 ] 文字を↓
「センタリングする 」
[HTMLタグ] は半角英数で入力
<center>センタリングする</center>
センタリングしたい文字を<center>と</center>でくくると、 文字をセンタリングすることができます。
[完成例]
<center>中央に表示されます。</center>
と書くと...
中央に表示されます。
のように文字が中央揃えになって表示されます。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
--------------------------------------------------------------------------------
●文字を斜体で(ななめに傾けて)表示したい
[ 表示例 ] 文章を「斜体で」表示する
[HTMLタグ] は半角英数で入力
<i>斜体で</i>で表示する
[完成例]
ここから先が <ｉ> 斜体に </i> なります。
と書くと...
ここから先が 斜体に なります。
のように文字が斜体になって表示されます。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
--------------------------------------------------------------------------------
●文字にアンダーライン(下線)をつけたい
[ 表示例 ] 文章に「アンダーライン」をつける
[HTMLタグ]
文字に<u>アンダーライン</u>をつける
アンダーラインしたい文字を<u>と</u>でくくると、
その文字にアンダーラインをつけられます。
[完成例]
ここから先が <u> アンダーラインに </u> なります。
と書くと...
ここから先がアンダーラインになります。
のように文字にアンダーラインがついて表示されます。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
--------------------------------------------------------------------------------
●文字に取り消し線をつけたい
[ 表示例 ] 文字に「取り消し線」をつける
[HTMLタグ]は半角英数で入力
<s>取り消し線</s>をつける
[完成例]
ここから先に <s> 取り消し線が </s> つきます。
と書くと...
ここから先に取り消し線がつきます。
のように文字に取り消し線がついて表示されます。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
--------------------------------------------------------------------------------
●文字をテロップのように動かして表示したい
[ 表示例 ] 文字を「テロップのように動かす」
[HTMLタグ] は半角英数で入力
<marquee>テロップのように動かす</marquee>
※このＨＴＭＬタグは、利用者の環境によっては正常に動作しない場合があります。
(Internet Explorerのみで動作し、Netscape Navigator では動作しません。)
[完成例]
<marquee>テロップのように動きます</marquee>
と書くと...
のように文字が動いて表示されます。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
--------------------------------------------------------------------------------
●文字を点滅させたい
[ 表示例 ] 文字を「点滅させる」
[HTMLタグ] は半角英数で入力
<blink>点滅させる</blink>
※このＨＴＭＬタグは、利用者の環境によっては正常に動作しない場合があります。
点滅させたい文字を<blink>と</blink>でくくると、 文字を点滅させて表示することができます。
[完成例]
<blink>文字を点滅させます</blink>
と書くと...
のように文字が点滅して表示されます。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
--------------------------------------------------------------------------------
●表(テーブル)を書きたい
[ 表示例 ]
| ショッピング | スポーツ用品 |
| ホームページ | Yahooジャパン |
[HTMLタグ] は半角英数で入力
<table>
<tr><td>ショッピング</td><td>スポーツ用品</td></tr>
<tr><td>ホームページ</td><td>Yahooジャパン</td></tr>
</table>
表を書くには<table>を使用します。<tr>と</tr>でくくられた横の部分が行となり
<td>と</td>でくくられた 部分が縦の列となります。
これらを<table>と</table>でくくると、表として表示されます。
※</table>などの終了タグを書き忘れた場合、ページが表示されない場合があるのでご注意ください。
<table>
<tr><td>１行目の１列目</td><td>1行目の２列目</td></tr>
<tr><td>２行目の１列目</td><td>２行目の２列目</td></tr>
</table>
2.上の文字を全て選択し、右クリックでコピーして、ページ作成などの入力画面にはりつければ
表を書くことができます。
※border="数字"の部分は表の線の太さになります。
[完成例]
<table border="1">
<tr>
<td>1行目の1列目</td><td>1行目の2列目</td><td>1行目の3列目</td>
</tr>
<tr>
<td>2行目の1列目</td><td>2行目の2列目</td><td>2行目の3列目</td>
</tr>
</table>
と書くと...
|
1行目の1列目 |
1行目の2列目 |
1行目の3列目 |
|
2行目の1列目 |
2行目の2列目 |
2行目の3列目 |
と表になります。
| ▲このページのＴＯＰへ | ▲ＨＯＭＥ |
------------------------------------------------------------------------------
●あなたのサイトをお気に入りに追加できるリンクのソース
[ 表示例 ]
お気に入りに追加
上の例のようにワンクリックであなたのサイトをお気に入りに追加できるリンクのソースを
以下に掲載しました。あなたのサイトのＵＲＬとタイトルを記入し、
サイトの表示したいところに貼り付けるだけでご利用いただけます。
「お気に入りに追加」HTMLソース
<a href="javascript:window.external.AddFavorite('http://サイトＵＲＬ','サイトのタイトル')">お気に入りに追加</a>
------------------------------------------------------------------------------
| ▲このページのＴＯＰへ |
▲ＨＯＭＥ |
| ■健康食品 |-酢 |-酸素 |-血液サラサラ |-フコイダン |-アガリクス、茸 |-きれいな水 |-コエンザイムQ10 |-アルファリポ酸 |-青汁 |
■化粧品、メイクアップ |-化粧水 |-ファンデーション |-美肌、お肌のお手入れ |
■フェイスケア |-シミ、くすみ |-シワ、たるみ |-にきび、毛穴 |-美白 |
■ボディケア |-石鹸、ソープ |-体臭 |-腸内の調整に |-腸内洗浄 |
■ヘアケア |-ムダ毛・脱毛・除毛 |-育毛、毛髪 |
| ■ダイエット食品 |-サプリメント |-麺類 |-飲料 |
■ダイエット用品 |-バストアップ |-ウエア、パンツ |-ヌーブラ |
■リラクゼーション |-癒しグッズ |-安眠、不眠症 |-マイナスイオン |-ゲルマ二ウム |
■レディス・ケア |-コンドーム |-パワーリングネオ |-ラブコスメ |-オリモノ対策 |
■メンズケア |-ＥＤ（勃起不全） |-サイズアップ |
| ■目 |-疲れ目、視力回復 |
■鼻 |-イビキ |-花粉対策 |
■口 |-禁煙 |-歯ブラシ |
■耳 |-耳鳴り |
■足 |-フットケア |
| ■香水 |-女性 |-男性 |
■その他 |-商品を安く買うウラ技 |-アマゾンカテゴリー |- |
■ビジネス |-情報起業最短コース |-ヤフオクで情報起業 |
［ このページのいちばん上へ ↑ ］ ［ → HOME ］ [ 日記・ブログ → 健康の架け橋 / 健康美隊 ]
------------------------------------------------------------------------------