ここからは、「会社概要」のページ（profile ）を作成していきます。
すでに完成したトップページのHTMLファイルindex をベースにすると効率が良いので、これを複製してprofile を作成します。
会社概要のページについては、「仮のリンク先ページを作る」で作成したprofile が存在していますが、これはリンク切れを起こさないために作成した仮ファイルです。
この仮ファイルは、削除してしまいましょう。
既存のprofile が削除できたら、index をコピーしてファイルを複製します。
複製したファイルの名前をprofile と変更したうえで、profile を開いてHTMLソースの内容を編集します。
index をベースにして不必要な部分を削除します。
削除するのは、「インフォメーション（右カラム）」の部分です。
この時点でのprofile の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_index"> <img src="./images/img_index.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> <hr> <h3 id="info0002">展示会への出展</h3> <hr> <h3 id="info0003">環境への取り組み</h3> <hr> </div> <!-- フッタ --> <div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div> </div> </body> </html>
保存をしたらブラウザで表示してみましょう。
以下のような画面になっていれば成功です。
上記のHTMLソースをベースにして、「会社概要」ページ（profile ）を作成していきます。
まだ、ヘッダ画像やサブメニューのテキストなどが「会社概要」の内容になっていないので、次回これらの部分を書き換えていきましょう。
| <前へ | 目次へ | 次へ> |
