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

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

こだわりページの組み立て[前編]

こだわりページを組み立てよう

それでは、こだわりページを組み立てていきましょう。
「kodawari.html」を開きます。

1つ目の「こだわりの紹介」を作成する

上から順に「こだわりの紹介」を作成していきましょう。
まずは「無農薬!おいしい有機野菜だけを使用しています」を作成します。

[作成する箇所]
作成する1つ目の「こだわり」

step.1

まずはじめに、<div id="contents">と</div>の間に、<div class="contentsbox"></div>を入力します。

<div id="contents">

<div class="contentsbox">
</div>

</div>

step.2

次に見出しを入力しましょう。
<div class="contentsbox">と</div>の間に<h3 class="midashi">無農薬!おいしい有機野菜だけを使用しています</h3> を入力します。

<div id="contents">

<div class="contentsbox">
<h3 class="midashi">無農薬!おいしい有機野菜だけを使用しています</h3>
</div>

</div>

step.3

解説用の画像を挿入します。
先ほどの見出しの下に、「imgbox」スタイルを使って画像を挿入するコードを入力しましょう。

<div class="imgbox">で「imgbox」スタイルを呼び出し、<img src="../img/yasai01.jpg" alt="有機野菜だけを使用">で画像を挿入します。このとき、alt属性を付けるのも忘れないようにしましょう。
最後に</div>で閉じればOKです。

<div id="contents">

<div class="contentsbox">
<h3 class="midashi">無農薬!おいしい有機野菜だけを使用しています</h3>
<div class="imgbox"><img src="../img/yasai01.jpg" alt="有機野菜だけを使用"></div>
</div>

</div>

step.4

説明文を入力しましょう。
誤字脱字がないよう気をつけましょう。
また、<br>で改行されている箇所もあるので見落とさないようにしましょう。

<div id="contents">

<div class="contentsbox">
<h3 class="midashi">無農薬!おいしい有機野菜だけを使用しています</h3>
<div class="imgbox"><img src="../img/yasai01.jpg" alt="有機野菜だけを使用"></div>
<p>すべて無農薬!<br>
自然のまま育てられた新鮮な野菜・果物だけを仕入れています。</p>
<p>もちろん安心の国内産。<br>
日本各地から様々な食材を取り寄せています。</p>
<p>例えばキャベツは福岡県、トマトは熊本県、チーズや玉ねぎは北海道、レタスは長野県。</p>
</div>

</div>

step.5

もう1つ説明文を入力します。
「imgbox」で指定されている回り込みを解除するために、<p class="clear">を付けて解説文を入力します。

<div class="contentsbox">
<h3 class="midashi">無農薬!おいしい有機野菜だけを使用しています</h3>
<div class="imgbox"><img src="../img/yasai01.jpg" alt="有機野菜だけを使用"></div>
<p>すべて無農薬!<br>
自然のまま育てられた新鮮な野菜・果物だけを仕入れています。</p>
<p>もちろん安心の国内産。<br>
日本各地から様々な食材を取り寄せています。</p>
<p>例えばキャベツは福岡県、トマトは熊本県、チーズや玉ねぎは北海道、レタスは長野県。</p>
<p class="clear">だから安心・安全でおいしい料理をご提供することができます。</p>
</div>

</div>

step.6

最後に文書構造要素を追加しましょう。
<div class="contentsbox"> と </div> を囲むように、 <section> を追加します。

<section>
<div class="contentsbox">
<h3 class="midashi">無農薬!おいしい有機野菜だけを使用しています</h3>
<div class="imgbox"><img src="../img/yasai01.jpg" alt="有機野菜だけを使用"></div>
<p>すべて無農薬!<br>
自然のまま育てられた新鮮な野菜・果物だけを仕入れています。</p>
<p>もちろん安心の国内産。<br>
日本各地から様々な食材を取り寄せています。</p>
<p>例えばキャベツは福岡県、トマトは熊本県、チーズや玉ねぎは北海道、レタスは長野県。</p>
<p class="clear">だから安心・安全でおいしい料理をご提供することができます。</p>
</div>
</section>

</div>

これで1つ目の「こだわりの紹介」の完成です。
一度ここで保存しておきましょう。

すべて入力が完了すると、下記画像のようなソースコードになります。

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

入力内容に間違いがないか、よく確認しましょう。

覚えておきたいポイント

こまめに保存しよう

入力する量が多いので、こまめに保存しながら作業しましょう。
また入力ミスなどにも気をつけましょう。1文字でも間違った箇所があると、うまく表示されない可能性があります。

文字の間隔の調整する方法

完成したら、ブラウザで確認を行いましょう。
下画像と違うように表示された場合、どこか間違っている可能性があります。
もう一度よく見なおしてみましょう。

ブラウザで確認した図

次のページでは、その他の「こだわりの紹介」の作成・組み立てを行いましょう!

覚えておきたいポイント

ブラウザによる表示の違い

使っているブラウザの種類やバージョンによっては、お手本の画像と表示が微妙に異なる場合があります。

こだわりページの組み立て[後編]
« 前のページへ こだわりページの確認

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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