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

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

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

こだわりページを完成させよう

1つめの「こだわりの紹介」が完成したので、残りの2つを完成させましょう。
さきほどのソースコードをコピーして内容を書き換えればOKです。

ソースコードのコピーと貼り付け

step.1

さきほど作った1つ目の「こだわりの紹介」のソースコードをコピーしましょう。
<section>から</section>までのコードをコピーします。

内容をコピーしよう

step.2

コピーしたら、</section>の下に貼り付けを行いましょう。

ソースコードの貼り付け

step.3

もう1つ作成しましょう。
貼りつけた2つ目の</section>の下に、もう一度貼り付けを行います。

3つ目の貼り付け

step.4

これで合計3つ、「こだわりの紹介」が作成されました。

貼り付けの完了

あとは「2つ目」と「3つ目」の内容を書き換えていきましょう。
スタイルなどは共通なので、説明文と画像を書き換えればOKです。

一度ここでファイルを保存しておきましょう。

覚えておきたいポイント

コピー&書き換えでOK

2つ目と3つ目の「こだわりの紹介」はソースコードをコピーして書き換えればOKなので、とても簡単です。

内容を書き換えよう

コピーして作成した2つ目と3つ目の「こだわりの紹介」の、内容を書き換えていきましょう。
まずは2つ目の内容から書き換えます。

見出しの書き換え

今は「無農薬!おいしい有機野菜だけを使用しています」となっていますが、こちらを「契約農家から直接お店へ」と書き換えます。

[書き換え前]
<h3 class="midashi">無農薬!おいしい有機野菜だけを使用しています</h3>
[書き換え後]
<h3 class="midashi">契約農家から直接お店へ</h3>
[HTMLの記述例]
見出しを書き換えた図

参照画像とalt属性の書き換え

参照する画像と、alt属性の書き換えを行いましょう。
今は「yasai01.jpg」を参照していますが、「yasai02.jpg」を参照するよう書き換えます。
また、alt属性も書き換えましょう。

[書き換え前]
<img src="../img/yasai01.jpg" alt="有機野菜だけを使用">
[書き換え後]
<img src="../img/yasai02.jpg" alt="契約農家から直接お店へ">
[HTMLの記述例]
画像とaltを書き換えた画像

説明文の書き換え

最後に説明文の書き換えを行いましょう。

「<p>すべて無農薬!<br>自然のまま育てられた~~</p>」を、以下の文に書き換えます。

<p>使用する野菜や果物は、契約農家から直接当店へ運ばれてきます。<br>
その日の朝に収穫した、新鮮な野菜や果物ばかりです。</p>
<p>これをすぐに専用の冷蔵庫に入れ保存します。</p>
<p>その後、オーダーを受けてから取り出し調理します。</p>

[HTMLの記述例]
説明文の書き換え

それともう1つ、<p class="clear">の文章も書き換えましょう。

[書き換え前]
<p class="clear">だから安心・安全でおいしい料理をご提供することができます。</p>
[書き換え後]
<p class="clear">だからいつも新鮮フレッシュ!とれたて無農薬のおいしさを味わってください。</p>
[HTMLの記述例]
説明文の書き換え

これで2つ目の「こだわりの紹介」の書き換えは完了です。
ここで一度、ファイルの保存を行いましょう。

3つ目の「こだわりの紹介」の書き換え

3つ目の「こだわりの紹介」も書き換えましょう。
2つ目と同じように、「見出し」「画像参照先とalt属性」「説明文」を書き換えます。

[書き換え前]
<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>
[書き換え後]
<section>
<div class="contentsbox">
<h3 class="midashi">オーダーをうけてから、手作りしています</h3>
<div class="imgbox"><img src="../img/anshin.jpg" alt="全て手作りしています"></div>
<p>一番おいしい状態で召し上がっていただけるように、作り置きではなく、すべてオーダーをうけてからお作りしています。<br>だからいつも出来立て新鮮!</p>
<p>ピザはアツアツとろ~り。ジュースは搾りたて!</p>
<p class="clear">素材の良さを生かし、一番の食べごろでお出しします。</p>

</div>
</section>

赤字になっている部分を書き換えましょう。
間違いがないか確認し、問題がなければOKです。

[HTMLの記述例]
書き変える内容

なお、ここまでの状態を保存するのを忘れないようにしましょう。

覚えておきたいポイント

書き換える箇所

書き換える箇所は「見出し」「画像参照先とalt属性」「解説文」となります。
間違えて他の箇所を消したり、書き換えないように気をつけましょう。

ブラウザで確認

すべての作業が完了したら、ブラウザで確認を行いましょう。
間違いがなければ、以下の様に表示されます。

[ブラウザでの表示例]
ブラウザでの表示例

これで「こだわり」ページの完成です!
もし画像と違うように表示された場合、どこかが間違っている可能性があります。
もう一度よく確認してみましょう。

次は店舗案内ページを作成しましょう。

覚えておきたいポイント

隅々までチェックしよう

ブラウザで確認を行う場合は、デザインはもちろん説明文に誤字脱字・間違いがないかも確認しましょう。

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

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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