ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

他ページへのリンク

他のページへリンクを貼ってみよう

次は、他のページへ移動するリンクを作ってみましょう!
よく見かける「○○はこちら」や「○○さんのサイト(ブログ)へ」みたいな、アレです。

ちなみに、リンクを設定することを「リンクを貼る」と言ったりもします。

リンクを設定するには

リンクを設定するには<a>タグを使います。

[入力例]
<a href=""></a>

<a href="">と</a>の間にテキストを入れ、””の間にURLを入れることによりリンクすることができます。

試しに私が管理している「さきちん絵はがき」へ、リンクを貼ってみましょう!
</body>の上に、以下のコードを追加します。

<h2>他ページへのリンク</h2>

<p>下の文字をクリックすると、さきちん絵はがきへ移動します。</p>

<a href="http://www.tadahagaki.com">さきちん絵はがきへ</a>

[記述例]

<html>

<head>

<meta charset="utf-8">

<title>ホームページの勉強中</title>

</head>

<body>

<h1>簡単なページの制作</h1>

<ol>

 <li>文字の入力について</li>

 <li>他ページへのリンク</li>

 <li>画像の挿入・表示</li>

</ol>

<h2>文字の入力について</h2>

<p>HTMLの文字の入力</p>

<p>タグを使わずに文字を入力することも可能ですが、文法的には間違いです。<br>文字を入力する際は、必ず適切なタグで囲むよう気をつけましょう。</p>

<h2>他ページへのリンク</h2>

<p>下の文字をクリックすると、さきちん絵はがきへ移動します。</p>

<a href="http://www.tadahagaki.com">さきちん絵はがきへ</a>

</body>

</html>

入力が完了したら、保存してブラウザで確認してみましょう。
以下のように表示されるとOKです。
※試しにリンク先をクリックしてみましょう!さきちん絵はがきへ移動すると思います。

リンクが設定された画像

問題なく移動できたでしょうか?
基本的には、このような方法でリンクを作成します。

別ウィンドウや別タブでリンクを開きたい場合

ちなみに、先ほどは同じウィンドウでリンクが行われましたが、別ウィンドウで開いてリンクしたい!なんて時もあると思います。
そんなときは、URLの後ろにtarget="_blank"を付け加えます。

<a href="http://tadahagaki.com" target="_blank">さきちん絵はがきへ</a>

この状態でクリックすると、別ウィンドウでリンク先ページが開きます。

自分のホームぺージ内へのリンクの場合は同じウィンドウで。
他の人のホームページや異なるコンテンツ(ブログ)などの場合は違うウィンドウで開く場合が多いです。

この辺りは、使い勝手やリンク先への配慮を考えて使い分けるといいと思います。

覚えておきたいポイント

ページの移動以外にもOK

<a>タグはページの移動だけではなく、ファイルであれば全てリンクすることができます。例えばzipを指定した場合はダウンロードが開始されます。

リンクに関するマナー

他の方のホームページへリンクする場合には、なるべく許可を得ることが望ましいです。(無断リンクを嫌う人もいますので…)。
リンクフリーなどの記載がある場合は許可を得る必要はありません。
もちろん、このさきちんWEBもさきちん絵葉書も全てリンクフリーです。じゃんじゃんリンクOKです!

画像の挿入・表示
« 前のページへ リストの表示

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。