

前回Webサイトを作る準備が終わりました。
次は<body>内にタグを入れてWebサイトを実際に作ってみます。
目次
見出しを作ろう
まずは「Webサイトのロゴ部分」と「お知らせ欄」を作ってみます。
使うタグは見出しを宣言するタグ「h1」と「h2」です。
まずは前回保存したHTMLデータをAtomで開き<body>内に
「h1」に「おふとんしてたらまたねてた(前回決めたお店の名前です)」
「h2」に「お知らせ」と追記します。
<h2>お知らせ</h2>
追記して上書き保存後、Webサイトを見てみます。


Webサイトに文字がでてきました。
見出しは6レベルあり、hの後に1~6まで設定できます。
数字が大きくなるにつれて重要度がさがっていきます。
HTMLドキュメントに見出しが必要な場合は原則として<h1>から始めます。
お知らせにお知らせを載せてみよう
次にお知らせに3件ほど記載してみましょう。
記載するお知らせはコチラ。
4/1 開店記念!10日まで開店記念セールを開催します!
4/1 インテリアショップ「おふとんしてたらまたねてた」開店しました!
この3つの記事をおしらせの下に追加し上書き保存してWebサイトを確認してみます。
テキストエディタで上書き保存して変更したとき
Webサイトに変更が適応されているか確認するのには
更新ボタンかF5ボタンでWebサイトを更新すると確認が楽です。


1行になってしまいました。
ここでテキストエディタと同じように改行するには
段落を指定するタグ<p></p>を使用します。
先程のテキストエディタ上の3行の文章にそれぞれ<p></p>を追記し
上書き保存してWebサイトを確認してみます。


<p>タグで段落をしたことでテキストエディタと同じように
Webサイト上でも3行になりました。
<p>タグ内で<p>タグをもう一度使って段落を作ることはできません。
またこのように<p>タグ内で使えないタグがあります。
<div>
特に意味を持たず、他の要素をまとめてグループ化する
<ol>
番号付きリスト
<ul>
番号無しリスト
<table>
表
ナビゲーションを作成してリンクを作ろう
ウェブサイト内の主要な他のページへのリンクや、ページ内リンクなどに
簡単に行き来できるようにナビゲーションを設定しておきます。
ナビゲーションは
他のページにリンクした箇所のすべてを<nav>~</nav>で囲む必要はなく
主要なナビゲーションとなるセクションのみを示すのに適しています。
この<nav>タグを<h1>タグの下に追記します。

次に<nav>タグの中にリンクテキストを作っていきます。
まずはリンクテキスト(Webサイトの名前)を5項目追記していきます。
新商品案内 new!
店舗情報
アクセス
お問い合わせ
この5項目をリスト化するために
番号無しリストを宣言する<ul>タグ、箇条書きを宣言する<li>タグを追記します。
その際にtabキーを使うことでスペースを作るのが簡単になります。
追記したら上書き保存してWebサイトを確認してみましょう。
<li>ホーム</li>
<li>新商品案内 new!</li>
<li>店舗情報</li>
<li>アクセス</li>
<li>お問い合わせ</li>
</ul>


次にリンクテキスト5つと大見出し(<h1>内)に
それぞれのページに移動できるようにリンクを設定していきます。
下の4つのページはまだ作ってはいませんが後で作ります。
まずはリンクテキストで移動するページのHTMLファイル名を決めます。
ホーム →index.html
新商品案内new! →new.html
店舗情報 →about.html
アクセス →access.html
お問い合わせ →contact.html
次にそれぞれのリンクテキストにリンクを設定していきます。
リンク設定に使うのは<a>タグです。
<a href=”リンク先のパスまたはURL”>リンクテキスト</a>のように設定します。
→<a href=”index.html”>おふとんしてたらまたねてた</a>
ホーム →<a href=”index.html”>ホーム</a>
新商品案内new! →<a href=”new.html”>新商品案内new!</a>
店舗情報 →<a href=”about.html”>店舗情報</a>
アクセス →<a href=”access.html”>アクセス</a>
お問い合わせ →<a href=”contact.html”>お問い合わせ</a>
上部のテキストをそのままコピー&ペーストしても
リンクがうまく機能しないことがあります。
Webサイト上での「”」がAtom上だと別のものと認識されている可能性があるためです。
うまくいかない場合「”」を消して手動で入力しなおしてみてください。



画像を挿入してみよう
次にWebサイトに画像を入れてみましょう。
今回使う画像はフリー写真素材サイト「Pixabay」から選びます。

今回使う画像は大見出しで使う画像とサイト中央で使う画像の2種類です。
大見出しの画像

サイト中央で使う画像
この2種類を使います。
まずwebsiteフォルダ内に新規フォルダ「images」を作ります。
その中に上の画像を「top.jpg」、下の画像を「center.jpg」と名付けて保存します。


Webサイトに画像を表示するには<img>タグを使います。
それでは画像を入れて確認してみましょう。
img(画像の) src(情報源)=”ファイル名”/画像” alt(画像の代替となるテキスト情報)=”(ない場合無記入)”


画像が大きすぎましたね・・・
画像の大きさを変更してみましょう。
imgタグ内に「width=”幅” height=”高さ”」をピクセル数または%で追記します。
今回は50%に指定してみます。


画像が縮小されました。
フッターを作ろう
Webサイトの一番下に©Copyright mataneteta. All rights reservedを
お知らせの後に追記します。
色んなサイトでよく見る「©Copyright~」というヤツですね。
Atomでは文字実体参照を使わなくても©を表現することができます。

CSS適応のためにHTMLを整理しよう
次にindex.htmlの、HTML内の部分ごとに要素をまとめていきます。
まとめ方は
- 大見出しとナビゲーション部分を「<header class=”○○”>」で囲む
- 大見出し<h1>にclass属性を追記する → <h1 class=”○○”>
- ナビゲーション<nav>にclass属性を追加する → <nav class=”○〇”>
- キービジュアルを「<div class=”○○”>」で囲む
- おしらせとおしらせ記事を「<main>」で囲む
- フッターを「<footer class=”○○”>」で囲む
- 全体をまとめるため<body>内全部を「<div class=”○○”>」で囲む
を追記していき、後にCSSを追記するとき適応させるために設定します。
class属性はCSSをでスタイルを適用するために設定するものなので
CSSを適用させたい場所が出てきたら設定しましょう。


今回のまとめ
HTMLを使った基本的なサイト構築は一旦ここで終了です。
今回作ったWebサイトがこちら。

]
次回は今回作ったindex.html(メインページ)をさらにそれっぽいサイトにするために
CSSでWebサイトをデザインしていこうと思います。
