STEP1.company.htmlの作成
基本レイアウトはトップページのHTMLと同じですので、下記のコードをコピーしてcompany.htmlを作成しましょう。
ナビゲーション部分を下記のように会社案内ページに合わせて修正してください。
また、メイン画像とメインコンテンツ内に記述してあるトップページのHTMLとメイン画像のHTMLは削除します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>会社案内</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box">
<div class="container">
<div class="box-columns">
<header id="header">
<div class="header-top">
東京都港区で創業50年の歴史を誇る 株式会社サンプル では、
皆様の生活により根ざしたサービスを展開するよう、日々研究開発をしております。
</div>
<div class="box">
<div class="box-columns-w66">
<a href="index.html">
<h1>Company Name</h1>
<p>Your Company Slogan</p>
</a>
</div>
<div class="box-columns-w33 header-info">
<p>電話: <span>012-3456-7890</span></p>
<p>受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
</div>
</header>
</div>
</div>
<div class="box-columns">
<nav class="navigation">
<ul class="container clearfix">
<li><a href="index.html">トップページ</a></li>
<li><a href="service.html">サービス案内</a></li>
<li class="active"><a href="company.html">会社案内</a></li>
<li><a href="blog.html">ブログ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</div>
<div class="box-columns">
<div class="title-bar">
<div class="container">
<h2>会社案内</h2>
</div>
</div>
</div>
</div>
<div class="box">
<div class="container">
<div class="box-columns-w66">
<!-- ☆☆1☆☆ 会社案内の内容を追加 ここから -->
<!-- ☆☆1☆☆ 会社案内の内容を追加 ここまで -->
</div>
<div class="box-columns-w33">
<aside class="share">
<ul>
<li>
<a href="#">
<img src="images/bnr_facebook.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/bnr_twitter.png" alt="">
</a>
</li>
</ul>
</aside>
</div>
</div>
</div>
<div class="box">
<div class="box-columns">
<footer id="footer">
<div class="box">
<div class="container">
<div class="box-columns-w33">
<a href="index.html">
<h1>Company Name</h1>
<p class="site-subtext">Your Company Slogan</p>
</a>
<div class="footer-company-info">
<p>〒000-0000</p>
<p>愛知県あま市○○○丁目○○番地</p>
<p>電話:012-3456-7890</p>
<p>受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
</div>
<div class="box-columns-w66">
<ul class="footer-navigation clearfix">
<li><a href="index.html">トップページ</a></li>
<li><a href="service.html">サービス案内</a></li>
<li><a href="company.html">会社案内</a></li>
<li><a href="info.html">お知らせ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</div>
</div>
</div>
<div class="box">
<div class="container">
<div class="box-columns">
<p class="copyright">Copyright © 株式会社サンプル, all rights reserved.</p>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
STEP2.デザインの確認
会社案内ページのデザインは下記のようになります。
STEP3.コンテンツの準備
会社案内に必要なコンテンツを準備しましょう。
ご挨拶
株式会社サンプルは、企業理念として徹底した顧客目線をかかげております。これは過去に利益優先でモノ作りをしていた結果、倒産寸前まで落ち込んだ苦い経験を糧に、企業はお客様のためにあるものというしごく当たり前の事に立ち返って、改めて理念として掲げました。その結果、紆余曲折はありましたがお客様からの共感も数多くいただきまして今に至っております。これに甘えること無く、今後も変わらず徹底した顧客目線でお客様の求めるもの・お困りごとに徹底してお応えしていける企業であるよう社員一丸となって取り組んで参ります。
株式会社サンプル
代表取締役社長 山田太朗
会社概要
会社名
株式会社FusionOne
本社所在地
東京都千代田区神田紺屋町11 岩田ビル３Ｆ
電話番号
03-5809-8321
FAX番号
03-5809-8322
メールアドレス
school_info@kanda-it-school-service.com
設立
2006年1月16日
代表者
代表取締役 崔 光護
事業内容
IT技術者の育成およびITに関する教育
コンピューター・システムの企画及び開発
有料職業紹介事業及び労働者派遣事業
前号各号に付帯する一切の事業
STEP4.HTMLタグでマークアップ
コンテンツを下記のようにマークアップし、意味付けを行います。
「ご挨拶」と「会社概要」の見出し部分は、トップページで作成した見出しのデザインを使用します。
また、会社概要の部分はtableタグを使って、表になるようにします。
<h2 class="heading">ご挨拶</h2>
<p>
株式会社サンプルは、企業理念として徹底した顧客目線をかかげております。これは過去に利益優先でモノ作りをしていた結果、倒産寸前まで落ち込んだ苦い経験を糧に、企業はお客様のためにあるものというしごく当たり前の事に立ち返って、改めて理念として掲げました。その結果、紆余曲折はありましたがお客様からの共感も数多くいただきまして今に至っております。これに甘えること無く、今後も変わらず徹底した顧客目線でお客様の求めるもの・お困りごとに徹底してお応えしていける企業であるよう社員一丸となって取り組んで参ります。
</p>
<p>
株式会社サンプル<br>
代表取締役社長 山田太朗
</p>
<h2 class="heading">会社概要</h2>
<table >
<tbody>
<tr>
<th>会社名</th>
<td>株式会社FusionOne</td>
</tr>
<tr>
<th>本社所在地</th>
<td>東京都千代田区神田紺屋町11 岩田ビル３Ｆ</td>
</tr>
<tr>
<th>電話番号</th>
<td>03-5809-8321</td>
</tr>
<tr>
<th>FAX番号</th>
<td>03-5809-8322</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>school_info@kanda-it-school-service.com</td>
</tr>
<tr>
<th>設立</th>
<td>2006年1月16日</td>
</tr>
<tr>
<th>代表者</th>
<td>代表取締役 崔 光護</td>
</tr>
<tr>
<th>事業内容</th>
<td>
<ul>
<li>IT技術者の育成およびITに関する教育</li>
<li>コンピューター・システムの企画及び開発</li>
<li>有料職業紹介事業及び労働者派遣事業</li>
<li>前号各号に付帯する一切の事業</li>
</ul>
</td>
</tr>
</tbody>
</table>
STEP5.デザインを変更したい部分の確認
- ご挨拶部分の代表者情報を右寄せで表示させたい
- テーブルのデザインを変更したい
STEP5.1 ご挨拶部分の代表者情報を右寄せで表示させたい
- 代表者情報のpタグにclass名をつける
- classにスタイルを指定して右寄せにする
1.代表者情報のpタグにclass名「.greeting-info」をつける
<p class="greeting-info">
株式会社サンプル<br>
代表取締役社長 山田太朗
</p>
2.「.greeting-info」にスタイルを指定して右寄せにする
.greeting-info {
text-align: right;
}
STEP5.2 テーブルのデザインを変更したい
borderプロパティ・background-colorプロパティなどを使い、テーブルのデザインを変更しましょう。
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #cbcbcb;
width: 100%;
box-sizing: border-box;
}
table td, table th {
border-left: 1px solid #cbcbcb;
border-bottom: 1px solid #cbcbcb;
font-size: 13px;
margin: 0;
padding: 10px 13px;
}
table th {
background-color: #f5f5f5;
color: #000;
text-align: left;
white-space: nowrap;
}
STEP6.会社案内完成コード
要素間の余白などを調整した会社案内部分の最終的なHTMLとCSSは下記のようになります。
下記のコードをコピーして、company.htmlの「<!– ☆☆1☆☆ 会社案内の内容を追加 ここから –>」の下に挿入してくだい。
<div class="company">
<h2 class="heading">ご挨拶</h2>
<p>
株式会社サンプルは、企業理念として徹底した顧客目線をかかげております。これは過去に利益優先でモノ作りをしていた結果、倒産寸前まで落ち込んだ苦い経験を糧に、企業はお客様のためにあるものというしごく当たり前の事に立ち返って、改めて理念として掲げました。その結果、紆余曲折はありましたがお客様からの共感も数多くいただきまして今に至っております。これに甘えること無く、今後も変わらず徹底した顧客目線でお客様の求めるもの・お困りごとに徹底してお応えしていける企業であるよう社員一丸となって取り組んで参ります。
</p>
<p class="greeting-info">
株式会社サンプル<br>
代表取締役社長 山田太朗
</p>
</div>
<h2 class="heading">会社概要</h2>
<table >
<tbody>
<tr>
<th>会社名</th>
<td>株式会社FusionOne</td>
</tr>
<tr>
<th>本社所在地</th>
<td>東京都千代田区神田紺屋町11 岩田ビル３Ｆ</td>
</tr>
<tr>
<th>電話番号</th>
<td>03-5809-8321</td>
</tr>
<tr>
<th>FAX番号</th>
<td>03-5809-8322</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>school_info@kanda-it-school-service.com</td>
</tr>
<tr>
<th>設立</th>
<td>2006年1月16日</td>
</tr>
<tr>
<th>代表者</th>
<td>代表取締役 崔 光護</td>
</tr>
<tr>
<th>事業内容</th>
<td>
<ul>
<li>IT技術者の育成およびITに関する教育</li>
<li>コンピューター・システムの企画及び開発</li>
<li>有料職業紹介事業及び労働者派遣事業</li>
<li>前号各号に付帯する一切の事業</li>
</ul>
</td>
</tr>
</tbody>
</table>
下記のコードをコピーして、style.cssの文末に追記してください。
/* --------------------------
* 会社案内
* --------------------------
*/
.company {
margin-bottom: 30px;
}
.greeting-info {
text-align: right;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #cbcbcb;
width: 100%;
box-sizing: border-box;
}
table td, table th {
border-left: 1px solid #cbcbcb;
border-bottom: 1px solid #cbcbcb;
font-size: 13px;
margin: 0;
padding: 10px 13px;
}
table th {
background-color: #f5f5f5;
color: #000;
text-align: left;
white-space: nowrap;
}
これで、会社案内ページの完成です。
続けて お問い合わせページの作成 を見てください。
正しく会社案内ページの作成ができなかった方は、
「会社案内ページ」サンプルコードをダウンロードして、「business」フォルダの内容を上書きしてから、
次のお問い合わせページの作成に進んでください。
「会社案内ページ」サンプルコード 1.13 MB
