超初心者でも簡単！あなたもできるHP作成！− Make easily  
||　トップページ　||　HTML　||　Style Sheet　||　リファレンス　||　Web素材　||　Contact Us　||　サイトマップ　||　初めての方　||　
HP作成
はじめに HP作成に必要なもの HTMLについて HTML作成の基本 実際に作ってみよう！ ファイルの保存方法 タグの基本 見出しの書き方 表示位置を変える 段落・改行を入れる 画像を表示する 文字サイズと色の変更 テーブル(表)の基本 セルに文字を入れる セルの統合 セル内の配置を変える 文字の太さを変える リスト番号をつける リンクって何？ リンクを張ってみよう サーバって何？ HPを公開しよう！

見出しの書き方

見出しを指定するタグは、 <h*>　</h*>　を使います。

*には、1から6までの数字が入ります。
<h1>見出し1</h1> のように書きます。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

それぞれ見出しの大きさは次のようになります。

見本の文字の大きさを見る

実際に見出しを書いて見ましょう

先ほど作ったファイルを開いてください。

＜例題1で保存したファイル＞
<html>
<head>
<title>タイトル</title>
</head>

本文

<body>

</body>
</html>

まず、<title>　と　</title>、<body>　と　</body>　の「本文」の文字を　「MY HOMEPAGE」　に書き換えます。
すると、以下のようになります。
（MY HOMEPAGE　の部分は何でもかまいません。好きな題名をつけてください。）

ソース内の半角スペース及びタブ、改行は無視されますので、適当に改行をして見やすくしてください。

＜例題2＞
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

MY HOMEPAGE

</body>
</html>

では、ブラウザで確かめて見ましょう。

ファイルを上書き保存して、閉じてからファイルをダブルクリックしてみてください。下の図のようになりましたか？

上記のように表示出来たら、「MY HOMEPAGE」の部分をh1タグで囲んで見ましょう。

フラウザは閉じずにそのまま、ブラウザのメニューバーの表示から「ソース」を選択してソースを表示してください。

すると、メモ帳でソースが開きます。

では次に、「MY HOMEPAGE」を <h1>　</h1>タグではさんでください。

＜例題3＞
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

<h1>MY HOMEPAGE</h1>

</body>
</html>

上記のように書き込んで上書き保存をしたら、ブラウザの更新ボタンを押します。

すると、情報が更新されて以下のように表示されます。

どうですか？
うまく表示できましたか？


表示位置を変えてみましょう

では次に、見出しを真中に移動させましょう。（センタリングと言います）

センタリングするためには、　 <center>　</center>　ではさむと、タグではさまれた部分がすべてセンタリングされます。

では、先ほどの <h1>MY HOMEPAGAE</h1>を<center>　</center>ではさんでみましょう。

＜例題4＞
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

<center>
<h1>MY HOMEPAGE</h1>
</center>

</body>
</html>

そして、ファイルを上書き保存したあとブラウザの更新ボタンを押すと、 以下のように題名がセンタリングされました。


段落・改行をする

画像をタイトルの下に表示させるために段落を入れます。
段落を入れるには、
　<p>　
と書くと一段下がって、段落を入れることができます。

HTMLの場合、段落に終了タグがなくても表示には問題ありません。
終了タグを入力する場合は<p> と　</p>ではさみます。

段落ではなく、改行をする場合には
　<br>　
と書くと改行をすることができます。 改行タグには終了タグはありません。


画像を表示させてみよう

では、画像を貼り付けてみましょう。

画像を表示させるには、次のように書くと画像を表示させることができます。

　<img src="ファイル名">　
ファイル名には拡張子まで書きます。（ .jpg や .gif などです）

見本画像の写真のファイル名は「cake.jpg」なので、ソースには

　<img src="cake.jpg">　
と書きます。

もしも、画像のファイルを別のフォルダにおいている場合は、

　<img src="フォルダ名/cake.jpg">　
となります。

では、先ほどのソースにタイトルで改行をして、画像を追加してみましょう。

＜例題5＞
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
</center>

</body>
</html>

ファイルを保存してブラウザを更新してください。
下のように表示できましたか？

▲このページのトップに戻るTop

Tips

タグは「入れ子」にならないように気をつけましょう！

＜入れ子の状態＞
<font size="4"><b>文字</font></b>

＜正しい記述＞
<font size="4"><b>文字</b></font>

どうです。わかりましたか？