HTML 入門トップページ

---

目次

1. ホームページ作成はじめの一歩
2. HTMLの基礎
3. 基礎的なタグをマスターしよう
   1. 段落を作る
   2. 改行する
   3. 見出しの設定
   4. 文字スタイルの変更（太字 | 斜体 | 文字サイズ | 文字の色 | フォント | 複数のスタイル）
   5. 箇条書き
   6. 表を配置する
   7. 画像を配置する
   8. リンクを設定する
   9. 特殊文字を表示する
4. HTML 文書を検証してみよう
5. スタイルシート
6. フォームを使ってみよう
7. 参考サイト

---

基礎的なタグをマスターしよう

リンクを設定する

リンクを設定するには <a> タグを使います．この a は anchor の略です．

外部サイトへのリンクを設定する

外部サイトへリンクを設定するには <a> タグの中にリンク先のURLを記述します．例えば，神戸学院大学のトップページや，経営学部の教員紹介ページにリンクを設定するには次の通り記述します．さらに，target="_blank" を指定すれば，別のウインドウでリンクを開くこともできます．

index.html（抜粋）コピー
<p>
  例えば，<a href="https://www.kobegakuin.ac.jp/">神戸学院大学</a>の
  トップページへリンクを設定しました．
  また<a href="https://kobegakuin-biz.jp/staff/" target="_blank">教員紹介</a>を別ウインドウで開きます．
</p>

相対リンクを設定する

自身のサイトの別のページへのリンクを設定するには，同じフォルダにファイルがあればファイル名だけを指定します．例えば，編集中のファイルと同じフォルダに 2-01-html.html があると仮定すれば，次の通り記述すれば良い．

index.html（抜粋）コピー
<p>
  例えば，<a href="2-01-html.html">HTML の雛形</a>へのリンクです．
</p>

次に，フォルダを含んだリンクについて考えます．例えば，下図のように，このファイル（3-08-link.html）と同じ階層には「index.html」と「1-01-network.html」「2-01-html.html」があり，「abc」フォルダの中に「link.html」があるとしよう．

このファイル（3-08-link.html）から link.html にリンクするには abc フォルダの中の link.html を参照すれば良いので，abc/link.html と指定します．このようにフォルダの区切りはスラッシュ（/）で記述します．また，一つ上の階層は ../ で指定することを覚えておこう．例えば，link.html から 3-08-link.html へリンクするには，一つ上の階層に移動する必要があるので，../3-08-link.html で指定できる．さらに ../../ で2つ上の階層に移動したり，../フォルダ名/ のように，一つ上の階層に移動してその階層にある別のフォルダに移動するなど，様々な組み合わせで利用できます．（これらの方法が理解できたら，別のフォルダに保存した写真を表示することもできるようになるでしょう．）

index.html（抜粋）コピー
<p>
 abcフォルダの中にある，<a href="abc/link.html">link.html</a>へのリンクです．
</p>

ページ内リンクを設定する

同じページの別の場所にリンクを設置することも可能です．例えば，このページの目次部分に戻るためのリンクを設定する手順を示します．まず，目次部分の <h3>に id を指定します．この id は他と重複しない名前を設定する必要があります．次の例では toc という名前の id を付けました．

index.html（抜粋）コピー
<h3 id='toc'>目次</h3>

上のように id を付けたら，その id にリンクを設置できるようになります．リンクを作成するときには指定したい id の直前に # を追加します．なお，下のリンクを辿ると目次の箇所に戻ることができますが，ブラウザに表示される URL の最後には #contens が付いていることに注意してください．さらに，別のページの特定の箇所にリンクを設置することも可能です．

index.html（抜粋）コピー
<p>
 このページの<a href="#toc">目次</a>に戻ります
</p>
<p>
  <a href="3-05-list.html">箇条書きページ</a>の<a href="3-05-list.html#list">箇条書き</a>や<a href="3-05-list.html#orderd_list">番号付き箇条書き</a>にリンクします．
</p>

---