ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

サイドナビの組み立てと確認

サイドナビを完成させよう

必要なスタイルはすべて揃ったので、HTMLファイルを編集してサイドナビを完成させましょう!
まずはテキストエディタで「index.html」を開きます。

「ご案内」の作成

はじめに「ご案内」の文字を表示させましょう。
<div id=”sidenavi”> と </div> の間に、以下のソースコードを入力します。

[入力するコード]
<div id=”sidenavi”>
<h2 id=”goannai”>ご案内</h2>
</div>

<h2>に、前ページで作成した「#goannai」スタイルを適用します。

[HTMLの記述例]
HTMLの記述例

入力が完成したら、「index.html」を保存してブラウザで確認しましょう。
図のように表示されていれば成功です。

ブラウザでの表示例

バナー画像の入力と表示

次は「.sidebox」スタイルを使って、バナー画像の表示を行いましょう。

挿入する画像ファイルは「img」フォルダ内の、「menusyoukai.jpg」「new.jpg」「kodawari.jpg」「tenpoannai.jpg」の4つとなります。

挿入する画像ファイルの一覧

<h2 id=”goannai”>ご案内</h2>の下に、以下のコードを入力しましょう。

[HTMLの記述例]
<div class="sidebox"><img src="img/menusyoukai.jpg" alt="メニューのご紹介"></div>
<div class="sidebox"><img src="img/new.jpg" alt="新メニュー追加のお知らせ"></div>
<div class="sidebox"><img src="img/kodawari.jpg" alt="さきちんカフェのこだわり"></div>
<div class="sidebox"><img src="img/tenpoannai.jpg" alt="店舗案内"></div>

<img src="画像名.jpg" alt="altテキスト"> を入力し、<div class="sidebox"></div>で囲みます。これを画像名だけ変えて、4つ作成しましょう。
その際、読み込む画像ファイルやaltテキストに間違いがないように気をつけましょう。

[HTMLの記述例]
画像を挿入するHTMLの記述例

入力が完成したら、「index.html」を保存してブラウザで確認しましょう。
図のように表示されていれば成功です。

ブラウザでの表示

「ご予約やお持ち帰りもOK!」の作成

最後は「ご予約やお持ち帰りもOK!」のエリアを作成しましょう。

「ご予約や~」のエリア

さきほど入力した<div class="sidebox"><img src="img/tenpoannai.jpg" alt="店舗案内"></div>の下に数行空けて、以下のコードを入力します。

[入力するコード]
<h2>ご予約やお持ち帰りもOK!</h2>
<p>できたてホカホカ!お電話でのご注文も承っています。ご予約やテイクアウトにどうぞ!詳しくは各店舗までお電話ください。</p>

<h2>を使い「ご予約やお持ち帰りもOK!」を入力し、その下に<p>でテキストを入力しましょう。

[HTMLの記述例]
HTMLの記述例

入力が完成したら、「index.html」を保存してブラウザで確認しましょう。
図のように表示されていれば成功です。

ブラウザで確認した図

覚えておきたいポイント

サイドナビの構築

前のページで作ったスタイルを使用して、サイドナビを組み立てましょう。
サイドナビは大きく3つのエリアに分けることができます。「ご案内」「バナー画像」「ご予約やお持ち帰りもOK!」のそれぞれのエリアを順に作成していきましょう。

文書構造要素の追加

仕上げに文書構造要素を追加しましょう。

サイドナビ全体を <section> で囲み、「ご予約やお持ち帰りもOK!」エリアを <aside> で囲みます。

サイドナビ全体を<section>で囲む

まずはサイドナビ全体を <section> で囲んであげましょう。
<div id=”sidenavi”> の上に <section> を入力し、最後の </div> の下に </section> を入力します。

[入力するコード]

<section>
<div id="sidenavi">
<h2 id="goannai">ご案内</h2>
<div class="sidebox"><img src="img/menusyoukai.jpg" alt="メニューのご紹介"></div>
<div class="sidebox"><img src="img/new.jpg" alt="新メニュー追加のお知らせ"></div>
<div class="sidebox"><img src="img/kodawari.jpg" alt="さきちんカフェのこだわり"></div>
<div class="sidebox"><img src="img/tenpoannai.jpg" alt="店舗案内"></div>

<h2>ご予約やお持ち帰りもOK!</h2>
<p>できたてホカホカ!お電話でのご注文も承っています。ご予約やテイクアウトにどうぞ!詳しくは各店舗までお電話ください。</p>
</div>
</section>

[HTMLの記述例]
HTMLの記述例

<aside>の追加

次は「ご予約やお持ち帰りもOK!」エリアに <aside> を追加しましょう。
※ <aside> を忘れてしまった場合は「aside要素」を見て思い出しましょう。

[入力するコード]

<section>
<div id="sidenavi">
<h2 id="goannai">ご案内</h2>
<div class="sidebox"><img src="img/menusyoukai.jpg" alt="メニューのご紹介"></div>
<div class="sidebox"><img src="img/new.jpg" alt="新メニュー追加のお知らせ"></div>
<div class="sidebox"><img src="img/kodawari.jpg" alt="さきちんカフェのこだわり"></div>
<div class="sidebox"><img src="img/tenpoannai.jpg" alt="店舗案内"></div>

<aside>
<h2>ご予約やお持ち帰りもOK!</h2>
<p>できたてホカホカ!お電話でのご注文も承っています。ご予約やテイクアウトにどうぞ!詳しくは各店舗までお電話ください。</p>
</aside>

</div>
</section>

[HTMLの記述例]
HTMLの記述例

これで文書構造要素の追加は完了です。
ちなみに、上記の状態はブラウザやGoogle、Yahooなどの検索エンジンからは下記のように見られています。

文書構造の状態

覚えておきたいポイント

文書構造要素の追加

適切なHTML構造とするために、文書構造要素を追加しましょう。思い出せない場合は「文書構造要素の一覧」を開いて復習しましょう。

ブラウザで確認する

すべての入力が完了したら、もう一度入力した内容に間違いがないか確認しましょう。

下画像のように表示されていれば成功です。

[ブラウザでの表示例]
サイドナビの完成図

とってもホームページっぽくなってきましたね!
あとはフッターを作成するとトップページの完成です。
頑張りましょう!

覚えておきたいポイント

文書は見やすく、読みやすく

もし見本の画像と違うように表示される場合は、どこかが間違っている可能性があります。
もう一度よくソースコードを見なおして、間違いがないか確認しましょう。

フッターの作成
« 前のページへ サイドナビの構成スタイルを作成

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。