CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけで作る！Webサイトの「About Us」ページの作り方【サンプルコード付き】

「About Us（私たちについて）」ページは、企業の理念やチームメンバーの顔ぶれを訪問者に伝えるために欠かせないページです。本記事では、HTMLとCSSだけを使い、メンバーごとのプロフィールカードを並べたスタイリッシュなAboutページを作成する方法を、実際のコード例とともにわかりやすく解説します。

作成するページの概要

今回作成するAboutページには、以下の要素が含まれています。

  • 濃い紫の背景に白文字の見出し（h1）を配置したページヘッダー
  • メンバーごとの「顔写真・名前・役職・Contactボタン」をまとめたカード型デザイン
  • 画面幅650px以下でカードが縦に並び替わるレスポンシブ対応
  • マウスオーバーで色が変化するインタラクティブなボタン

サンプルコード

Aboutページを作成するためのコードは以下の通りです。そのままコピー＆ペーストして動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    html {
        box-sizing: border-box;
    }
    body {
        font-family: monospace, serif, sans-serif;
        margin: 0px;
        padding: 0px;
    }
    h1 {
        text-align: center;
        background-color: rgb(108, 18, 131);
        color: white;
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: 0px;
    }
    .teamContainer {
        margin-left: 10%;
    }
    img {
        width: 100%;
        height: 200px;
    }
    *, *:before, *:after {
        box-sizing: inherit;
    }
    .teamColumn {
        display: inline-block;
        width: 300px;
        height: 400px;
        margin-bottom: 16px;
        padding: 0 8px;
    }
    @media screen and (max-width: 650px) {
        .teamColumn {
            display: block;
        }
    }
    .teamCard {
        background-color: rgb(162, 162, 255);
        text-align: center;
        font-size: 20px;
    }
    .personContainer {
        padding: 0 16px;
    }
    .personContainer::after, .teamContainer::after {
        content: "";
        clear: both;
        display: table;
    }
    .Designation {
        color: rgb(15, 0, 100);
        font-weight: bolder;
        font-size: 20px;
    }
    .contact {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 12px;
        color: white;
        font-weight: bolder;
        background-color: rgb(78, 0, 102);
        text-align: center;
        cursor: pointer;
        width: 100%;
    }
    .contact:hover {
        background-color: #555;
    }
</style>
</head>
<body>
<h1>About Us</h1>
<div class="teamContainer">
<div class="teamColumn">
<div class="teamCard">
<img src="https://images.pexels.com/photos/839011/pexels-photo839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<div class="personContainer">
<h3>Jane Doe</h3>
<p class="Designation">CTO</p>
<p><button class="contact">Contact</button></p>
</div>
</div>
</div>
<div class="teamColumn">
<div class="teamCard">
<img src="https://images.pexels.com/photos/614810/pexels-photo614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<div class="personContainer">
<h3>Mike Ross</h3>
<p class="Designation">Front End Developer</p>
<p><button class="contact">Contact</button></p>
</div>
</div>
</div>
<div class="teamColumn">
<div class="teamCard">
<img src="https://images.pexels.com/photos/736716/pexels-photo736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<div class="personContainer">
<h3>John Doe</h3>
<p class="Designation">FullStack Developer</p>
<p><button class="contact">Contact</button></p>
</div>
</div>
</div>
</div>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、次のような出力が得られます。

CSSだけで作る！Webサイトの「About Us」ページの作り方【サンプルコード付き】

コードのポイント解説

1. box-sizingでレイアウトを安定させる

html要素にbox-sizing: border-box;を指定し、すべての要素にbox-sizing: inherit;を継承させることで、paddingやborderを含んだサイズ計算が統一されます。これにより、意図しないレイアウト崩れを防ぐことができます。

2. inline-blockでカードを横並びに配置

.teamColumnにdisplay: inline-block;を指定することで、幅300px×高さ400pxのメンバーカードを横方向に並べています。FlexboxやGridを使わないシンプルで互換性の高い手法です。

3. メディアクエリでレスポンシブ対応

@media screen and (max-width: 650px)により、スマートフォンなどの狭い画面ではカードがdisplay: block;に切り替わり、縦に積み重なるレイアウトへ自動的に変更されます。

4. clearfixでレイアウト崩れを防止

::after疑似要素にcontent: "";とclear: both;を組み合わせたclearfixテクニックを採用し、コンテナの高さが正しく維持されるようにしています。

5. hoverエフェクトで操作性を向上

.contact:hoverでボタンの背景色を濃いグレーに変化させることで、クリック可能な要素であることを直感的に伝え、ユーザー体験を向上させています。

まとめ

このように、CSSの基本テクニック（inline-blockレイアウト・メディアクエリ・clearfix・hover効果）を組み合わせるだけで、実用的なAbout Usページを作成できます。ぜひ配色やサイズを自由にカスタマイズして、自社サイトの雰囲気に合ったデザインに仕上げてみてください。

  1. CSSとJavaScriptで近日公開（Coming Soon）ページを作成する方法

    CSSとJavaScriptを組み合わせれば、サイトの公開前に訪問者へ向けて表示する「近日公開（Coming Soon）」ページに、リアルタイムで動くカウントダウンタイマーを簡単に組み込めます。この記事では、全画面の背景画像の中央にタイトルを配置し、残りの日・時・分・秒を1秒ごとに更新しながら表示するページの作り方を、サンプルコードとともにわかりやすく解説します。 コード例 <!DOCTYPE html> <html> <style>     body {      &

  2. CSSだけで作る！レスポンシブ対応のセクションカウンターの実装方法

    CSSを使えば、JavaScriptに頼ることなく、ダウンロード数やパートナー数などの統計情報を視覚的にアピールする「セクションカウンター」を簡単に作成できます。ここでは、Font Awesomeのアイコンと組み合わせて、レスポンシブ対応のセクションカウンターを実装する方法を解説します。 実装コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <l