ウェブサイトオープンの流れ3
最終更新日 2013/3/16
各ページを作成する準備が整ったので、index.html を複製します。
メモ帳で開いた index.html は、一旦閉じておきます。
index.html を右クリック／コピー／デスクトップを右クリック／貼り付けを行うと、デスクトップに index.html が複製されます。
デスクトップの index.html のファイル名を、メニューに入力したファイル名に変更します。
今回は合計 5ページなので、同じ作業を 4回繰り返します。
上の画像のように、各ページが作成されました。
スポンサーリンク
ファイルの拡張子（.html／.css）が表示されているのは、表示／ファイル名拡張子にチェックを入れて、拡張子を表示しているためです。通常は、ファイル名だけ表示されているかと思います。
作成したページをドラッグ＆ドロップで website フォルダに移動します。
次は、各ページの内容を編集します。
index.html をメモ帳で開きます。
タイトルと説明を編集
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BaseBall Circle 公式サイト</title>
<meta name="description" content="BaseBall Circle は、Sample大学の在学生が作った野球チームです。">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
赤字が編集箇所です。
各ページの内容に合ったタイトルと説明（description）を入力します。
見出しとコンテンツ（内容）を編集
<article class="content">
<h1>最新の試合結果</h1><!-- コンテンツの見出しです。 -->
<p>2013/3/12 にサンプル大学と試合をしました。</p>
<p>試合結果は、5対3 で Sample大学の勝利でした。</p>
<p>沢山の応援をありがとうございました！</p>
</article>
赤字が編集箇所です。
h1 タグには、コンテンツの見出しを入力します。
p タグ（段落タグ）には、文章や画像といったコンテンツを入力します。
ファイル／上書き保存をクリックします。
index.html を右クリック／プログラムから開く／ブラウザを選択します。
上の画像のように、編集内容が表示されたことを確認できます。
残りの 4ページも、タイトル／説明／見出し／コンテンツを編集して保存します。
フォトギャラリー（photo.html）に写真を掲載
<article class="content">
<h1>フォトギャラリー</h1><!-- コンテンツの見出しです。 -->
<p>皆で海に旅行に行った時の写真です。</p>
<p><img src="images/sea.jpg" alt="海の写真" /></p>
</article>
赤字が編集箇所です。
写真を載せたい場合は、
<img src="images/写真のファイル名.jpg" alt="写真の説明" />
という書き方をします。
写真のファイル名は、半角英数字にして下さい。
写真は、images フォルダに保存して下さい。
写真の説明には、簡潔な写真の説明を入力します。
ブラウザで確認すると、上の画像のように写真が表示されます。
横幅が大きな写真でも、自動的に横幅が調整されるので、テンプレートの枠からはみ出すことはありません。（ブラウザの横幅を狭めると、動作を確認できます）
しかし、大きな写真はファイルサイズも大きいので、スマートフォンで閲覧するとユーザーの負担になるかもしれません。
沢山の写真を掲載したい場合は、ペイント（Windows アクセサリ）などで小さくしてから掲載されることをお勧めします。
ペイントを起動して、写真をペイントにドラッグ＆ドロップします。（ファイル／開くから写真を選択しても構いません）
ホームタブ／サイズ変更／ピクセル／任意の値を入力／OK をクリックします。（ここでは、水平方向の値を 500 と入力しました）
ファイル／名前を付けて保存／website の images フォルダを選択／ファイル名を入力して保存をクリックします。
以上のように、ペイントで写真のサイズを変更することができます。
全てのページを編集したら、ウェブサイトをオープンします。
スポンサーリンク