ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
１つめの「こだわりの紹介」が完成したので、残りの2つを完成させましょう。
さきほどのソースコードをコピーして内容を書き換えればOKです。
さきほど作った1つ目の「こだわりの紹介」のソースコードをコピーしましょう。
<section>から</section>までのコードをコピーします。
コピーしたら、</section>の下に貼り付けを行いましょう。
もう１つ作成しましょう。
貼りつけた2つ目の</section>の下に、もう一度貼り付けを行います。
これで合計3つ、「こだわりの紹介」が作成されました。
あとは「2つ目」と「3つ目」の内容を書き換えていきましょう。
スタイルなどは共通なので、説明文と画像を書き換えればOKです。
一度ここでファイルを保存しておきましょう。
2つ目と3つ目の「こだわりの紹介」はソースコードをコピーして書き換えればOKなので、とても簡単です。
コピーして作成した2つ目と3つ目の「こだわりの紹介」の、内容を書き換えていきましょう。
まずは2つ目の内容から書き換えます。
今は「無農薬！おいしい有機野菜だけを使用しています」となっていますが、こちらを「契約農家から直接お店へ」と書き換えます。
[書き換え前]
参照する画像と、alt属性の書き換えを行いましょう。
今は「yasai01.jpg」を参照していますが、「yasai02.jpg」を参照するよう書き換えます。
また、alt属性も書き換えましょう。
最後に説明文の書き換えを行いましょう。
「<p>すべて無農薬！<br>自然のまま育てられた～～</p>」を、以下の文に書き換えます。
<p>使用する野菜や果物は、契約農家から直接当店へ運ばれてきます。<br>
その日の朝に収穫した、新鮮な野菜や果物ばかりです。</p>
<p>これをすぐに専用の冷蔵庫に入れ保存します。</p>
<p>その後、オーダーを受けてから取り出し調理します。</p>
それともう１つ、<p class="clear">の文章も書き換えましょう。
[書き換え前]
これで2つ目の「こだわりの紹介」の書き換えは完了です。
ここで一度、ファイルの保存を行いましょう。
3つ目の「こだわりの紹介」も書き換えましょう。
2つ目と同じように、「見出し」「画像参照先とalt属性」「説明文」を書き換えます。
赤字になっている部分を書き換えましょう。
間違いがないか確認し、問題がなければOKです。
なお、ここまでの状態を保存するのを忘れないようにしましょう。
書き換える箇所は「見出し」「画像参照先とalt属性」「解説文」となります。
間違えて他の箇所を消したり、書き換えないように気をつけましょう。
すべての作業が完了したら、ブラウザで確認を行いましょう。
間違いがなければ、以下の様に表示されます。
これで「こだわり」ページの完成です！
もし画像と違うように表示された場合、どこかが間違っている可能性があります。
もう一度よく確認してみましょう。
次は店舗案内ページを作成しましょう。
ブラウザで確認を行う場合は、デザインはもちろん説明文に誤字脱字・間違いがないかも確認しましょう。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。