前回Webサイトを作る準備が終わりました。
次は<body>内にタグを入れてWebサイトを実際に作ってみます。
目次
見出しを作ろう
まずは「Webサイトのロゴ部分」と「お知らせ欄」を作ってみます。
使うタグは見出しを宣言するタグ「h1」と「h2」です。
まずは前回保存したHTMLデータをAtomで開き<body>内に
「h1」に「おふとんしてたらまたねてた（前回決めたお店の名前です）」
「h2」に「お知らせ」と追記します。
<h2>お知らせ</h2>
追記して上書き保存後、Webサイトを見てみます。
Webサイトに文字がでてきました。
見出しは６レベルあり、ｈの後に１～６まで設定できます。
数字が大きくなるにつれて重要度がさがっていきます。
HTMLドキュメントに見出しが必要な場合は原則として<h1>から始めます。
お知らせにお知らせを載せてみよう
次にお知らせに３件ほど記載してみましょう。
記載するお知らせはコチラ。
4/1 開店記念！１０日まで開店記念セールを開催します！
4/1 インテリアショップ「おふとんしてたらまたねてた」開店しました！
この３つの記事をおしらせの下に追加し上書き保存してWebサイトを確認してみます。
テキストエディタで上書き保存して変更したとき
Webサイトに変更が適応されているか確認するのには
更新ボタンかF5ボタンでWebサイトを更新すると確認が楽です。
１行になってしまいました。
ここでテキストエディタと同じように改行するには
段落を指定するタグ<p></p>を使用します。
先程のテキストエディタ上の３行の文章にそれぞれ<p></p>を追記し
上書き保存してWebサイトを確認してみます。
<p>タグで段落をしたことでテキストエディタと同じように
Webサイト上でも３行になりました。
<p>タグ内で<p>タグをもう一度使って段落を作ることはできません。
またこのように<p>タグ内で使えないタグがあります。
<div>
特に意味を持たず、他の要素をまとめてグループ化する
<ol>
番号付きリスト
<ul>
番号無しリスト
<table>
表
ナビゲーションを作成してリンクを作ろう
ウェブサイト内の主要な他のページへのリンクや、ページ内リンクなどに
簡単に行き来できるようにナビゲーションを設定しておきます。
ナビゲーションは
他のページにリンクした箇所のすべてを<nav>～</nav>で囲む必要はなく
主要なナビゲーションとなるセクションのみを示すのに適しています。
この<nav>タグを<h1>タグの下に追記します。
次に<nav>タグの中にリンクテキストを作っていきます。
まずはリンクテキスト（Webサイトの名前）を５項目追記していきます。
新商品案内 new!
店舗情報
アクセス
お問い合わせ
この５項目をリスト化するために
番号無しリストを宣言する<ul>タグ、箇条書きを宣言する<li>タグを追記します。
その際にtabキーを使うことでスペースを作るのが簡単になります。
追記したら上書き保存してWebサイトを確認してみましょう。
<li>ホーム</li>
<li>新商品案内 new!</li>
<li>店舗情報</li>
<li>アクセス</li>
<li>お問い合わせ</li>
</ul>
次にリンクテキスト５つと大見出し（<h1>内）に
それぞれのページに移動できるようにリンクを設定していきます。
下の４つのページはまだ作ってはいませんが後で作ります。
まずはリンクテキストで移動するページの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」から選びます。
今回使う画像は大見出しで使う画像とサイト中央で使う画像の２種類です。
大見出しの画像
サイト中央で使う画像
この２種類を使います。
まずwebsiteフォルダ内に新規フォルダ「images」を作ります。
その中に上の画像を「top.jpg」、下の画像を「center.jpg」と名付けて保存します。
Webサイトに画像を表示するには<img>タグを使います。
それでは画像を入れて確認してみましょう。
img（画像の） src（情報源）=”ファイル名”/画像” alt（画像の代替となるテキスト情報）=”（ない場合無記入）”
画像が大きすぎましたね・・・
画像の大きさを変更してみましょう。
imgタグ内に「width=”幅” height=”高さ”」をピクセル数または％で追記します。
今回は５０％に指定してみます。
画像が縮小されました。
フッターを作ろう
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サイトをデザインしていこうと思います。
