htmlで「index.html」を作る

ホームページ作成3日目:メインページを作る(index.html)

ホームページのメインページとなる「index.html」を作る

レンタルサーバーと独自ドメインを取得したら、次にホームページデータを作っていきます。 まず必要になるのがメインページとなる「index.html」のデータ。このデータだけでもあればページは表示されます。

メインページのデータはテキストエディタで作る

indexファイルを作成するにはテキストエディタを使います。「秀丸エディタ」や「Notepad++」など様々な種類がありますので、 自分が好きなエディタをダウンロードして使いましょう。 実はWindowに付属している「メモ帳」も簡易エディタなので、メモ帳でも作れないことはありませんが、いろいろ問題があるので なにかのテキストエディタを落としましょう。

テキストエディタ一覧
visualstudio Microsoftが提供する高機能なテキストエディタ。無料で使えます。
サクラエディタ 日本製で無料で使えるテキストエディタ。
Notepad++ 海外製の無料テキストエディタで人気。最近日本語化に対応になったようです。
秀丸エディタ 有料のエディタながら人気があるテキストエディタ。年間ライセンスは4000円ほどになります。

日本では有料ながら秀丸エディタが人気のイメージを持ちます。無料のエディタでいくと「visualstudio」や「サクラエディタ」。 より高機能なエディタもありますが、初めての場合はとっつきやすいこのあたりのエディタを選んだほうが良い気がします。

どんなデータを作ればいいのかは右リックで「ページのソースを表示」で確認できる

実際にエディタでどんなデータを作るのかは「ページのソースを表示」で確認することができます。 実際にこのページのソースを見てみましょう。

このようなデータを作っていくことになります。これだけを見ると難しいように思えますが、 全部1から作るのではなく、テンプレートなども使っていくことで少しでも簡単に作っていくのもコツです。

人気のHTMLテンプレートはこちらで紹介しています。

実際に自分で作っていくのは <body></body>といって、 ページとして表示されるところのHTMLになります。

<body>タグ以外の部分は だいたいが定型化できる部分になりますので、基本的には各ページ同じものを使いまわしています。 一部だけを修正していくようなイメージで私は作成しています。

まずはカンタンなページから作ってみましょう。

indexファイルを作る際に、いきなり難しいものを作るのではなく、 1行だけでもいいのでかんたんな物を作ってみて表示させてみましょう

次のhtmlをコピペするだけでページが作成できます。

indexに限らずhtmlファイルを作るときには様式が決まっています。タグと呼ばれるものがあり、 <html></html> のように2つセットで使っていくことが基本になります。

例えばタイトルを表示させるタグは<title></title>となり、 このタグで囲んだ部分がページのタイトルとなります。

かんたんに1行だけ表示させてみる。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3.  <head> ←赤文字の部分が「ヘッダー」部分となりページのタイトルや重要キーワードなどを記入する部分になります。ここはページとしては表示されません。
  4.   <meta charset="UTF-8">
  5.   <title>ページタイトル</title>
  6.  </head>
  7.  <body> ←青文字の部分がボディータグとなり、この中身が実際のページとして表示されます。
  8.   <h1>見出し</h1>
  9.   <p>Pタグには文章を書きます。ここに文章を書きます。</p>
  10.  </body>
  11. </html>

わずか10行ほどのコードになっていますが、このデータを使えば「このように表示されることになります

文字だけのページとなっていますが、この状態からスタイルシートを使って文字の色や大きさ、 余白などデザインを指定していく形になります。

bodyタグの中を作りこんでいく

このHTMLで実際にページに表示されるのは<body>タグで囲まれた部分になります。 <h1>~</h1>などは見出しのタグ。
<p>は文章を入力する部分になります。

見出しも<h1>~</h1>、<h2>~</h2>、<h3>~</h3>とあって大見出し、中見出し、小見出しとわかれます。 単純にhtmlファイルに記載しただけでは、大きな文字が表示されるだけですが、これをスタイルシートで指定をかけて デザインしていくことになります。

  1.  <body>
  2.   <h1>見出し</h1>
  3.   <p>Pタグには文章を書きます。ここに文章を書きます。</p>

  4.   <h2>HTMLを作っていく</h2>
  5.   <p>H2タグのように見出しにも順番があります。</p>
  6.   <p>H1タグのしたに来る見出しはH2として使いましょう。</p>

  7.   <h3>見出し</h3>
  8.   <p>Pタグには文章を書きます。ここに文章を書きます。</p>
  9.  </body>

作ったデータを「index.html」として保存する

まずは、テキストエディタにデータを作ってみて、名前を付けて保存で「.html」形式で保存しましょう。

保存は「index.html」で。

保存するときのネーミングは「index.html」としてください。なぜならメインページとして認識されるには「index.html」とする必要があるからです。 保存ができた時点で、まずはhtmlファイルは完成になります。

次のページで説明するスタイルシートのファイルを作ることで、色や大きさや余白などを整えていきます。 当ページでも見出しがありますが、スタイルシートで全部デザインの指定を行っています。

→4日目スタイルシートを作る