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

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

メインコンテンツの組み立てと確認

メインコンテンツを完成させよう

必要なスタイルは全て揃ったので、「index.html」ファイルを編集してメインコンテンツを完成させましょう!

メインコンテンツの作成

まずは更新情報エリアから組み立てます。

更新情報エリアの組み立て

前ページで作成した「#newsbox」「#newsbox p」「.midashi」を使って、見出しと更新情報エリアを作成していきましょう。

「index.html」ファイルをテキストエディタで開いて、<div id="contents">と
</div> の間に以下のコードを入力します。

[入力するコード]
<div id="newsbox">
<h3 class="midashi">What’s New!</h3>
<p>○○年/○○月/○○日|福岡天神店がオープンしました。</p>
<p>○○年/○○月/○○日|季節限定メニューを追加しました。</p>
<p>○○年/○○月/○○日|産地情報を更新しました。</p>
</div>

step.1

はじめにdivを使って「#newsbox」を呼び出し、更新情報エリアの枠を作成します。

step.2

次にh3に「.midashi」を適用し、見出しを作成しましょう。

step.3

最後に<p>タグを使い、更新情報のテキストを入力したら完成です。

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

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

ブラウザで確認した図

コンテンツエリアの組み立て

次はコンテンツエリアの組み立てを行いましょう。

こちらも前ページで作成したスタイル「.contentsbox」「.imgbox」「.clear」を使って組み立てます。

コンテンツエリアの組み立て

以下のコードをさきほどの更新情報エリアの下に入力しましょう。

[入力するコード]
<div class="contentsbox">
<h3 class="midashi">安心・安全の素材</h3>
<div class="imgbox"><img src="img/anshin.jpg" alt="全て手作りしています"></div>
<p>すべてオーダーを受けてから1つ1つ手作りしています。<br>
素材は契約農家から直接仕入れた、安心・安全の国産素材だけを使用!</p>
<p class="clear">詳細ページへ</p>
</div>

step.1

divを使って「contentsbox」を呼び出し、コンテンツエリアの枠を作成します。

step.2

次にh3に適用する「.midashi」を呼び出し、見出しを作成します。

step.3

divで「.imgbox」を呼び出し、<img src="">を使って「img」フォルダ内の「anshin.jpg」を挿入しましょう。
alt属性も忘れないようにしましょう。

step.4

すべてオーダーを受けてから~・・・のテキストを入力します。

step.5

最後に <p class=”clear”> を使って、「詳細ページへ」とテキストを入力しましょう。ここで「.imgbox」の回り込みを解除しています。

[HTMLの記述例]
index.htmlの記述例

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

ブラウザで確認した図

2つめのコンテンツエリアの作成

コンテンツエリアは2つあるので、もう1つ作成する必要があります。

なお、入力する画像やテキストが違うだけで後は全て同じです。
先程作成したコンテンツエリアをコピーして、中身だけ書き換えてしまいましょう。

先ほどのコンテンツエリアの下に、以下のソースコードを入力します。

[入力するコード]
<div class="contentsbox">
<h3 class="midashi">店舗案内</h3>
<div class="imgbox"><img src="img/maps.jpg" alt="店舗案内"></div>
<p>あなたの近くのさきちんカフェはどこ?<br>
さきちんカフェの店舗案内・情報です。</p>
<p class="clear">詳細ページへ</p>
</div>
[HTMLの記述例]
コンテンツエリアの作成図

こちらも入力が完了したらブラウザで確認しましょう。問題なく表示されていれば成功です。

ブラウザで確認した画像

覚えておきたいポイント

工数が多いので注意しよう

このページも作業する内容が多く、複雑になりがちです。
こまめに保存することを意識して、間違いのないように入力していきましょう。

徐々にホームページっぽく

ここが完成すると、これまでよりもずっとホームページっぽくなります。
あとはサイドナビとフッターを完成させればトップページは完成。頑張りましょう!

文書構造要素と<h2>の追加

コンテンツエリアが完成したら、文書構造要素を追加しましょう。
※文書構造要素が思い出せない場合は「文書構造要素の一覧」を開いて復習しましょう。

セクション要素の追加

まずは先程作成した更新情報エリアとコンテンツエリアにセクション要素を追加しましょう。
この3つは「段落、章など、文章の塊を示すセクション要素」に分類することができます。

セクション要素の追加

これらのコンテンツを<section> で囲んであげましょう。

[入力するコード]

<section>
<div id="newsbox">
<h3 class="midashi">What’s New!</h3>
<p>○○年/○○月/○○日|福岡天神店がオープンしました。</p>
<p>○○年/○○月/○○日|季節限定メニューを追加しました。</p>
<p>○○年/○○月/○○日|産地情報を更新しました。</p>
</div>
</section>

<section>
<div class="contentsbox">
<h3 class="midashi">安心・安全の素材</h3>
<div class="imgbox"><img src="img/anshin.jpg" alt="全て手作りしています"></div>
<p>すべてオーダーを受けてから1つ1つ手作りしています。<br>
素材は契約農家から直接仕入れた、安心・安全の国産素材だけを使用!</p>
<p class="clear">詳細ページへ</p>
</div>
</section>

<section>
<div class="contentsbox">
<h3 class="midashi">店舗案内</h3>
<div class="imgbox"><img src="img/maps.jpg" alt="店舗案内"></div>
<p>あなたの近くのさきちんカフェはどこ?<br>
さきちんカフェの店舗案内・情報です。</p>
<p class="clear">詳細ページへ</p>
</div>
</section>

[HTMLの記述例]
sectionを追加した図

なお、それぞれの <h3 class=”midashi”> は各セクションのタイトルとして理解されます。

これで、「What’s New!」「安心・安全の素材」「店舗案内」が1つの「文章の塊、もしくは章、段落」として理解されるようになりました。

article要素の追加

次は「article」と<h2>の追加を行います。

<article>は、例えばブログの記事のように「その文章が独立していても意味が通る」もしくは「その内容だけを取り出した場合に、独立したコンテンツとして成り立つ」ような箇所を示す場合に使います。

「さきちんカフェ」だと、下図の部分が「article」に該当します。

articleの範囲

これらの該当範囲を「article」で囲ってあげましょう。
また、「article」の下に<h2>を使いテキストを入力します。

[入力するコード]

<article>
<h2>契約農家から直接仕入れた新鮮な素材だけを使い、1つ1つ丁寧に手作りしています。</h2>

<div id="mainimg">
<img src="img/mainimg.jpg" alt="さきちんカフェ、メイン画像">
</div>

<div id="contents">
<section>
<div id="newsbox">
<h3 class="midashi">What’s New!</h3>
<p>○○年/○○月/○○日|福岡天神店がオープンしました。</p>
<p>○○年/○○月/○○日|季節限定メニューを追加しました。</p>
<p>○○年/○○月/○○日|産地情報を更新しました。</p>
</div>
</section>

<section>
<div class="contentsbox">
<h3 class="midashi">安心・安全の素材</h3>
<div class="imgbox"><img src="img/anshin.jpg" alt="全て手作りしています"></div>
<p>すべてオーダーを受けてから1つ1つ手作りしています。<br>
素材は契約農家から直接仕入れた、安心・安全の国産素材だけを使用!</p>
<p class="clear"><a href="page/kodawari.html">詳細ページへ</a></p>
</div>
</section>

<section>
<div class="contentsbox">
<h3 class="midashi">店舗案内</h3>
<div class="imgbox"><img src="img/maps.jpg" alt="店舗案内"></div>
<p>あなたの近くのさきちんカフェはどこ?<br>
さきちんカフェの店舗案内・情報です。</p>
<p class="clear"><a href="page/tenpoannai.html">詳細ページへ</a></p>
</div>
</section>

</div>
</article>

<h2>は「article」のタイトルとなります。
なお、この<h2>には前ページで作成した<h2>のスタイルが適用されます。

articleを入力した図

入力が完了したら、間違いがないか確認して保存しておきましょう。

ちなみに、ブラウザやGoogle、Yahooなどの検索エンジンからは上記のソースコード構造は以下のように見られています。

HTML文書構造を視覚化した図

これで、「article」で囲んだ範囲が「その文章が独立していても意味が通る」もしくは「その内容だけを取り出した場合に、独立したコンテンツとして成り立つ」として理解されます。

覚えておきたいポイント

文書構造要素について

文書構造要素はキチンと解説すると、それだけで1つのホームページが作れてしまうくらい奥が深いです。
当サイトではザックリと大雑把に、基礎的な部分しか解説していません。
より深く学習したいかたは、書店などに専門書がありますのでそちらをご覧ください。

ブラウザで確認

すべて入力に間違いがなければ、ブラウザで確認してみましょう。
下図のように表示されていれば成功です。

ブラウザで確認した図

文書構造要素は「文書構造をより明確化するための要素」なのでブラウザ上では表示されません。
確認するためには「HTML 5 Outliner」などのツールを使う必要があります。
※余裕があったら使ってみてください。構造が視覚的に確認できて、とっても便利です!

ソースコードに間違いがないかよく確認し、問題がなければ次の「サイドナビのスタイルを作成」に移りましょう。

覚えておきたいポイント

確認のためのツール

文書構造を確認するツールは「HTML 5 Outliner」以外にも様々な種類があります。
ブラウザの拡張機能などで提供されているものもありますので、自分に合ったツールを使ってもOKです。

サイドナビの構成スタイルを作成
« 前のページへ メインコンテンツのスタイルを作成

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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