このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

ウェブサイトの“書き方”(4)~ホームページを作る

記事June 6th,2015
Feb.26th,2021
メモ帳を使って簡単なウェブサイトを作る方法を紹介していきます。ウェブサイトのホームページを作ります。

“ホームページ”

今回は“ホームページ”を作っていきます。

一つ目の記事でも触れましたが、“ホームページ”は“トップページ”などとも呼ばれ、ウェブサイトの中で一番最初に見てもらう“ウェブページ”です。ホームページはウェブサイトの“表紙”であるとともに、ウェブサイトのほかのコンテンツへの入口のとなります。

まず、ホームページになるHTMLファイルを作成しますが、この時に保存するHTMLファイルの名前は“index.html”にします。

index.html

前の記事で試しに作ったHTMLファイルが残っていれば名前を変更して利用したり、コピーして利用しても構いません。右クリックして「プログラムから開く」からメモ帳を選択することでHTMLファイルが編集できます。

メモ帳でHTMLファイルを開く

“index.html”とは?

たとえば以下のようなURLのウェブサイトがあるとします。

https://www.example.com

よくある形のウェブサイトのURLですが、実はこのURLはホスト名、一般的にはウェブサイトを配信しているサーバーの名前で、正確には見ているウェブページを指しているものではありません。

https://www.example.com/content.html

ウェブサイトのホームページからほかのページに遷移するとスラッシュ(“/”)の後に文字列が追加されますが、通常はこの文字列がその時見ているウェブページを作っているファイルの名前を表しています。

なぜ一つ目の例のURLでもウェブページが表示されるかというと、通常はURLにファイル名が含まれない場合にどのファイルを表示するかがあらかじめ決められているからです。

ブラウザがファイル名が含まれないURLを表示しようとすると、まず最初にサーバーは“index.html”をブラウザに送って表示させます。なので多くの場合ホームページのHTMLファイルの名前は“index.html”にします。

ホームページを作る

何度も取り上げているHTML文書の基本の形です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書のタイトル</title>
</head>
<body>

文書の内容

</body>
</html>
最初のHTMLファイル

まずはウェブページのタイトルを書きます。“<title>”と“</title>”の間がウェブページのタイトルです。ホームページとなるウェブページのタイトルはウェブサイト自体の名前とすることが一般的です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>

文書の内容

</body>
</html>

次に“<body>”と“</body>”の間に実際に表示される部分を書いていきます。

まずは文字だけ書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>

果物を食べる
美味しいフルーツについて紹介していきます。

メニュー
りんご
もも
バナナ
マンゴスチン
リンク
連絡先

&copy; copyright 2015 Frouts wo taberu

</body>
</html>

次に、HTMLタグでどの部分がどのような機能を持つのか“目印”をつけていきます。

<h1>果物を食べる</h1>
美味しいフルーツについて紹介していきます。

<h2>メニュー<h2>
りんご
もも
バナナ
マンゴスチン
リンク
連絡先

&copy; copyright 2015 Frouts wo taberu

<h1>”と“<h2>”は見出しを示すタグです。

<h1>”、“<h2>”、“<h3>”と続き、“<h6>”まであります。

見出しはランク付けすることができ、“<h1>”が一番上のランクの見出し、数字が増えるほどランクが下がります。一般的に文章には章、節、項などというように見出しが付けられますが、HTMLで示す見出しも同様にランクが下の見出しはその前にある上位の見出しに関係する見出しになります。

上の例では最上位の見出しをウェブサイトの名前にしています。

続いて、ウェブサイトのコンテンツの一覧になる部分を、リストを表す“<ul>”で示します。

<h1>果物を食べる</h1>
美味しいフルーツについて紹介していきます。

<h2>メニュー<h2>
<ul>
<li>りんご</li>
<li>もも</li>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>リンク</li>
<li>連絡先</li>
</ul>

&copy; copyright 2015 Frouts wo taberu

<ul>”はリスト全体を表し、リストの一つ一つの項目は“<li>”で表します。

最後に、“<p>”を使います。“<p>”は“段落”を表しますが、大きな文章のまとまりだけでなくちょっとした文も“<p>”ほとんどの場合囲まれます。

<h1>果物を食べる</h1>
<p>美味しいフルーツについて紹介していきます。</p>

<h2>メニュー<h2>
<ul>
<li>りんご</li>
<li>もも</li>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>リンク</li>
<li>連絡先</li>
</ul>

<p>&copy; copyright 2015 Frouts wo taberu</p>
出来上がったHTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>

<h1>果物を食べる</h1>
<p>美味しいフルーツについて紹介していきます。</p>

<h2>メニュー<h2>
<ul>
<li>りんご</li>
<li>もも</li>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>リンク</li>
<li>連絡先</li>
</ul>

<p>&copy; copyright 2015 Frouts wo taberu</p>

</body>
</html>

これで最低限の形ができたのでブラウザで表示してみます。

出来上がったHTMLファイル

特にホームページはこういう形にしなければならないといった決まりはないので他のウェブサイトのホームページを見るなどして良いホームページの形を作っていくのが良いでしょう。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク