今回より「製品紹介」ページ（product ）を作成していきます。
「会社概要」ページ（profile ）や「お問合せ」ページ（contact ）を作成したときと同様に、HTMLファイルの複製から始めましょう。
「会社概要」ページ（profile ）をコピーして、新しいHTMLファイルを作ろうと思います。
複製してできたHTMLファイルの名前はproduct としてください。このproduct を「製品紹介」ページとして作っていきます。
もちろん、ファイルの複製ではなく、テキストエディタでHTMLファイルをゼロから新規作成しても構いません。
この場合には、文字コードをUTF-8にして、ファイル名をproduct にして新規保存します。
product では、画像ファイルとしてimg_product.png、product0001.png、product0002.pngを使用します。
ダウンロードしたサンプルファイルからこれらの画像ファイルをコピーして、あらかじめimagesフォルダに追加しておきます。
product のHTMLソースを以下の内容にしてください。
以下のHTMLソースは、このチュートリアルで今までに学んだテクニックのみを使用しており、特に新しいHTMLタグなどは登場しません。
コピーしたファイルの内容を部分的に書き換えても良いですし、復習のつもりで、すべて手打ち入力しても良いでしょう。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <title>製品紹介｜ウェブサンプル株式会社</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <div id="header"> <h1><a href="index "><img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/logo.png" alt="ウェブサンプル株式会社"></a></h1> </div> <!-- メインメニュー --> <ul id="menu"> <li><a href="index ">ホーム</a></li> <li><a href="product ">製品紹介</a></li> <li><a href="profile ">会社概要</a></li> <li><a href="contact ">お問合せ</a></li> </ul> <!-- ヘッダ画像 --> <div id="img_subpage"> <img src="./images/img_product.png" alt="製品紹介"> </div> <!-- サブメニュー（左カラム） --> <div id="submenu"> <h2>製品紹介</h2> <ul> <li><a href="#info0001">個人向け製品</a></li> <li><a href="#info0002">法人向け製品</a></li> <li><a href="#info0003">紹介ビデオ</a></li> </ul> </div> <!-- インフォメーション（右カラム） --> <div id="info"> <h3 id="info0001">個人向け製品</h3> <p> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/product0001.png" alt="個人向け製品のイメージ画像" class="infoimg_subpage"> あいうえおかきくけこさしすせそ、（中略） </p> <hr> <h3 id="info0002">法人向け製品</h3> <p> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/product0002.png" alt="法人向け製品のイメージ画像" class="infoimg_subpage"> あいうえおかきくけこさしすせそ、（中略） </p> <hr> <h3 id="info0003">紹介ビデオ</h3> <hr> </div> <!-- フッタ --> <div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div> </div> </body> </html>
保存したらブラウザで表示してみましょう。以下のような画面になれば成功です。
「紹介ビデオ」のところはまだ何も記述していないので、動画は掲載されていない状態です。
次回、動画の掲載に挑戦してみましょう。
| <前へ | 目次へ | 次へ> |
