ホームページ制作
■HTMLの基本
HTMLとは?
ブログが優秀?
初心者ミス・疑問
階層とファイル名
基本構成
改行と段落
文字の大きさ
強調/斜体/打消し
文字の色指定
中央寄せ
行揃え(段落)
行揃え
見出し
+-で文字指定
箇条書きリスト
順番有りリスト
ハイパーリンク
メールリンク
■メタタグ
説明文/キーワード

16進数色見本
色名で指定

■実践的
JavaScript・CSS
画面内で広告固定

■無料レンタル
HPスペース
アクセスランキング
アクセス解析
ブログパーツ
□R指定サイト可
掲示板
アクセスランキング
アクセス解析

■無料配布CGI
画像掲示板
1行掲示板

■CSS
px,em,%対応表

■無料ツール
構文チェック
HTML Validator
リンク切れチェック
リンク切れチェッカー

別ジャンルへ飛ぶ
別サイト(創作専門)
掲示板・ろだ
年齢制限/広告非表示
GoogleAds非表示
コピペ
スマホ向けページ有
忍者

interz
Google
忍者
点数の見方
殿堂入り 6点 殿
5点 5
4点 4
3点 3
2点 2
1点 1
評価不能
サイト名変更/移転
変更
サイト合併/休止
合併
サイト閉鎖/年齢指制限
閉鎖年齢制限
Amazon
Amazon
人気記事
ブログパーツ
Ads


■ リンクの基本
WEB上では他のページに移動することを「飛ぶ」と言います。その入口となるのが「リンク」となります。よく耳にする「相互リンク」とはお互いにリンクし合う同盟のような物です。
リンクは他のページに移動するだけではなく自分のサイト内を移動するにも使います。その場合はメニューを作り見やすくします。

□部分的リンクの色変え
何も設定しない場合はリンクは青地に下線が付きますが、1度行き履歴に残っている場所は紫になります。それは<A HREF="☆">~</A>の間に文字指定のタグを入れればそのリンクだけ色を変えることも可能です。

□相対パスと絶対パス
サイト内のリンクは「相対パス」か「絶対パス」で指定します。サイト外は「絶対パス」になります。そちらは別で解説しております。何度も実験し試して修正を繰り返せば簡単に理解できます。
HTMLの基本 | 階層とファイル名・HTMLの基本構成
<A HREF=""></A>
☆=ジャンプ先のファイル名(絶対リンク:相対リンク)
<HTML>

<HEAD>
<TITLE>

タイトルです
</TITLE>
</HEAD>

<BODY>

<center>

<a href="index.html">
[ENTER]
</a>

<br>

<b>
<font size="4">

<a href="index.html">
<font color="#FF3300">[ENTER]</font>
</a>
</font>
</b>
</center>

</BODY>

</HTML>

タイトルです



■ リンク先のウインドウを指定
<A HREF="" TARGET=""></A>
☆=ジャンプ先のファイル名(絶対リンク:相対リンク)

★=_self(同じ場所に表示する・指定無しの場合と同じ)
★=_top(ウインドウ全体に上書き・フレームも無くなる)
★=_blank(新しくウインドウを開き表示・元のウインドウは残る)
★=_parent(一番外のフレームは残す・2分割なら_topと同じ)
□_blank
<A HREF="☆" TARGET="★">~</A>はフレーム向けですね。その中で<A HREF="☆" TARGET="_blank">~</A>のみ頻繁に使いますが使い所が難しいです。_blankは新しいウインドウを開きますので、過去のウインドウを残します。よって多くのページを見て貰いたい場合は有効なのですが、ウインドウ数が増え嫌われる行為なので通常時は使わない方がいいでしょう。

本ウインドウを残し別に表示したい場合、例えばサンプル画像の拡大表示やメールフォーム、掲示板などでしょうか。Amazonの商品リンクなども_blankを使用しないと自分のページが閉じられAmazonに移動されてしまいます。

□_parent
_parentはちょっと分かりにくいですが、四角の中にはみ出さないように2本直線を書いてフレームを作って下さい。そうすると内側になる線(フレーム)がありますね、そこが消える訳です。


<HTML>

<HEAD>
<TITLE>

タイトルです
</TITLE>
</HEAD>

<BODY>

<center>
<a href="index.html" target="_self">
[ENTER1]
</a>
<br><br>
<a href="index.html" target="_top">
[ENTER2]
</a>
<br><br>
<a href="index.html" target="_blank">
[ENTER3]
</a>
<br><br>
<a href="index.html" target="_parent">
[ENTER4]
</a>
</center>

</BODY>

</HTML>

タイトルです


■ メールを送る
□HP上にメールアドレスを記載しない
メールアドレスをHP上に直接記載している人がいますが、スパムの餌食になり危ないので止めましょう。スパムはHPの文字列を探してきて「@」のあるメールアドレスと思われる文字列を拾ってきます。よって偽装する方もいます。これも広告や成りすましの餌食になり意味がありません。
管理人へのメール:○×△(アットマーク)interz.jp
管理人へのメール:○×△■interz.jp (■を@にしてください)

□mailto
mailtoはメール用のリンクです。クリックするとメールクライアントが立ち上がり宛先に☆部分の指定メールアドレスが記載されます。訪問者のメールアドレスはクライアントで標準設定している物が表示されますので、件名と本分のみの入力となります。リンク先をメアドにしますので、表示される物は手紙の画像でも「メール」や「お問い合わせ」などの文字でも構いません。



□メールフォームを使おう
最近のロボット検索エンジンは頭が良くソース内の文字列も拾ってきますので、<A HREF="mailto:☆">~</A>を使用し表面上にメールアドレスを記載しなくても拾われ意味がありません。このタグは使用しない方が良いでしょう。メールフォームを使いましょう。

<A HREF="mailto:"></A>
☆=メールアドレス
<HTML>

<HEAD>
<TITLE>

タイトルです
</TITLE>
</HEAD>

<BODY>

<center>
<b>
<font size="4">

<a href="mailto:○×△@interz.jp">
☆メールはこちら☆
</a>
</font>
</b>
</center>

</BODY>

</HTML>

タイトルです

■ オプション
□件名などを表示する
オプションで件名や本分を指定するタグがありますが日本語はFirefoxで文字化けしますし、ここまでするなら無料配布されているメールフォームのCGIや無料レンタルのメールフォームを使った方が良いです。
件名 subject <a href="mailto:○×△@interz.jp?subject=お問い合わせ">メール</a>
本文 body <a href="mailto:○×△@interz.jp?body=お問い合わせ内容">メール</a>
cc cc <a href="○×△@interz.jp?cc=○×△@interz.jp">メール</a>
bcc bcc <a href="○×△@interz.jp?bcc=○×△@interz.jp">メール</a>

□複数オプションは&で繋ぐ
HTMLから少し離れてしまってますね。
<a href="mailto:○×△@interz.jp?subject=お問い合わせ"&body=お問い合わせ内容>メール</a>

□使用できない文字はコードで
mailtoで使用できない文字があります。それらは文字はコードで代用できます。文字コードはパソコン上で割り当てられた文字それぞれの番号、呼び出し番号のようなものです。ここまですると初心者の手には負えませんので無理に手をだす必要も無いです。
改行 %0D%0A
半角スペース %20
? %3F


(2002年5月28日記載 2011年11月13日修正・追記)