会社紹介ページの作成 ― CSSでborderを使ったデザイン

こんにちは、フローです。

Webデザインを学び始めた皆さん。

前回は、基本的な企業ウェブサイトのホームページを作成しました。

今回は、その次に重要な「会社紹介」ページを作成します。

会社紹介ページでは、主に会社の概要や理念、

そして社長からのメッセージです。

今回はCSSのborderプロパティを多用します。

線を引いて、borderを使ってみましょう。

前回の記事はこちらです。

1 HTML構造
- 1.1 CSSスタイリング
- 1.2 レスポンシブ対応
2 まとめ

HTML構造

HTMLの構造は非常にシンプルです。

全体は company-profile クラスのセクションで囲み、

その中に会社概要と社長からのメッセージを表示するエリアを作ります。

また、会社紹介の直後に、ビジュアルイメージとして hero-image を配置します。

さらに、社長からのメッセージの右側に社長の写真（あるいは好きな画像）を表示するスペースを作ります。

ここではHTMLのコードだけを示します。CSSは後で紹介します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会社紹介</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- ここには前回作成したヘッダーのコードを使用します -->
    </header>
    <main>
        <section class="company-profile">
            <h1>会社紹介</h1>
             <div class="hero-image"></div>
            <div class="profile-box">
                <h2>会社概要</h2>
                <table>
                    <tr>
                        <th>設立</th>
                        <td>2000年4月</td>
                    </tr>
                    <tr>
                        <th>従業員数</th>
                        <td>500名</td>
                    </tr>
                    <!-- 他の会社情報も追加可能 -->
                </table>
            </div>
            <div class="message-section">
    <div class="message-content">
        <h3>社長からのメッセージ</h3>
        <p>当社は・・・（ここにメッセージのテキストが続く）</p>
    </div>
    <div class="president-image"></div>
　　</div>

        </section>
    </main>
    <footer>
        <!-- ここには前回作成したフッターのコードを使用します -->
    </footer>
</body>
</html>

CSSスタイリング

HTMLの構造ができたら、次はCSSで見た目を整えていきましょう。

今回は、特にborderプロパティを活用することを意識します。

/* 会社紹介ページ全体のスタイル */
.company-profile {
    width: 80%;
    margin: 0 auto;
}

.hero-image {
    height: 500px;
    background-color: #95c2de;
}

/* 会社概要（table）のスタイル */
.profile-box table {
    width: 100%;
    border-collapse: collapse;
}

/* table内の各行（tr）のスタイル */
.profile-box table tr {
    border-bottom: 1px solid #000;
}

/* table内の見出し（th）のスタイル */
.profile-box table th {
    width: 30%;
    padding: 10px;
    text-align: left;
}

/* table内のデータ（td）のスタイル */
.profile-box table td {
    padding: 10px;
}

/* 社長からのメッセージのスタイル */
.message-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

.message-content {
    flex: 0 0 60%;
    padding: 20px;
}

.president-image {
    flex: 0 0 40%;
    height: 300px;
    background-color: #95c2de;
    /* imgなど好きな写真を設定することができます。 */
}

ここでは、会社紹介ページ全体のスタイリングや、

会社概要を表示するテーブルのデザイン、

そして社長からのメッセージと社長の写真を配置するエリアのデザインを設定しています。

テーブルの行（tr）にはborder-bottomを指定して、

行間に線を引いています。

これにより各情報が独立して見えるようになります。

また、見出し（th）にはtext-alignを使って左揃えにしています。

社長からのメッセージと社長の写真は、flexboxを使用して横並びに配置しています。

これにより、画面の大きさに応じて自動的にレイアウトが調整されるので、

どのデバイスでも美しく表示されます。

レスポンシブ対応

次に、レスポンシブ対応をします。

ここでは、画面の幅が600px以下になった時、

社長のメッセージと写真が縦並びになるように設定します。

また、この時は写真が先に表示され、その下にメッセージが表示されるようにします。

@media screen and (max-width: 600px) {
    .message-section {
        flex-direction: column-reverse;
    }
    .message-content, .president-image {
        flex: 0 0 100%;
    }
}

これにより、スマートフォンなど小さいデバイスでも美しく表示されるようになります。