会社概要ページの雛形のコーディング

Posted on 2023年9月20日2023年9月20日 by 小清水和真

会社の公式サイトには欠かせない「会社概要」ページ。
多くのユーザーが会社の信頼性や背景を知るためにアクセスします。
この記事では、シンプルかつ効果的な会社概要ページのHTMLとCSSの雛形を紹介します。

1. 基本的なHTML構造

会社概要ページは以下のような情報を含むことが一般的です。

会社名
代表者名
設立日
連絡先（住所、電話番号、メールアドレスなど）
事業内容
社員数
資本金

基本的なHTMLの雛形です

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会社概要 | 【会社名が入ります】</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1> 【会社名が入ります】の会社概要</h1>
    </header>
    <main>
        <section>
            <h2>基本情報</h2>
            <dl>
                <dt>会社名</dt>
                <dd> 【会社名が入ります】</dd>
                <dt>代表者</dt>
                <dd>山田 太郎</dd>
                <dt>設立</dt>
                <dd>2023年1月1日</dd>
                <!-- 他の情報も同様に追加 -->
            </dl>
        </section>
        <section>
            <h2>連絡先</h2>
            <address>
                <p>住所: 住所が入ります。</p>
                <p>電話番号: 00-0000-00000</p>
                <p>Email: hoge@example.com</p>
            </address>
        </section>
        <!-- 他のセクションも追加 -->
    </main>
    <footer>
        <p>&copy; 2023 【会社名が入ります】</p>
    </footer>
</body>
</html>

2. CSSでのスタイリング

シンプルかつ見やすいデザインを意識し、以下のように基本的なスタイリングを行います。

body {
    font-family: "Arial", sans-serif;
    line-height: 1.6;
    padding: 0;
    margin: 0;
}

header, section, footer {
    padding: 20px;
    max-width: 800px;
    margin: auto;
}

h1, h2 {
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}

dl {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px 20px;
}

address p {
    margin-bottom: 10px;
}

footer {
    text-align: center;
    background-color: #f4f4f4;
    padding: 20px 0;
}