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

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

CSSを使えば、JavaScriptに頼ることなく、ダウンロード数やパートナー数などの統計情報を視覚的にアピールする「セクションカウンター」を簡単に作成できます。ここでは、Font Awesomeのアイコンと組み合わせて、レスポンシブ対応のセクションカウンターを実装する方法を解説します。

実装コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
    * {
        box-sizing: border-box;
    }
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
    }
    .section {
        float: left;
        width: 25%;
        padding: 0 5px;
    }
    .sectionContainer {margin: 0 -5px;}
    .sectionContainer:after {
        content: "";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 600px) {
        .section {
            width: 100%;
            display: block;
            margin-bottom: 10px;
        }
    }
    .sectionCard {
        box-shadow: 0 4px 8px 0 rgb(127, 16, 172);
        padding: 16px;
        text-align: center;
        background-color: rgb(127, 16, 172);
        color: rgb(255, 255, 255);
    }
    .fa {font-size:50px;}
</style>
</head>
<body>
<h1>Responsive Section Counter Example</h1>
<br>
<div class="sectionContainer">
<div class="section">
<div class="sectionCard">
<p><i class="fa fa-mobile" aria-hidden="true"></i></p>
<h3>100000+</h3>
<p>Downloads</p>
</div>
</div>
<div class="section">
<div class="sectionCard">
<p><i class="fa fa-globe" aria-hidden="true"></i></p>
<h3>5000+</h3>
<p>Outlets over the globe</p>
</div>
</div>
<div class="section">
<div class="sectionCard">
<p><i class="fa fa-bar-chart" aria-hidden="true"></i> </p>
<h3>Top Performer</h3>
<p>In past 5 years</p>
</div>
</div>
<div class="section">
<div class="sectionCard">
<p><i class="fa fa-handshake-o" aria-hidden="true"></i></p>
<h3>3000+</h3>
<p>Partners</p>
</div>
</div>
</div>
</body>
</html>

出力結果

上記のコードをブラウザで実行すると、4枚のカードが横一列に並んだセクションカウンターが表示されます。

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

画面幅を600px以下に狭くしてリサイズすると、メディアクエリの設定により、各カードが縦に積み重なるレスポンシブレイアウトへ自動的に切り替わります。

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

コードのポイント

  • floatによる横並び配置：.sectionクラスにwidth: 25%を指定することで、4つのカードを1行にきれいに並べています。
  • clearfixでfloatを解除：.sectionContainer:afterの疑似要素を使ってfloatを解除し、レイアウト崩れを防止しています。
  • メディアクエリでレスポンシブ化：画面幅が600px以下になるとwidth: 100%に切り替わり、スマートフォンでも読みやすい縦積みレイアウトになります。
  • box-shadowで立体感を演出：紫系のシャドウを付けることで、カードに奥行きとアクセントを加えています。

このように、CSSの基本テクニックを組み合わせるだけで、見栄えの良いセクションカウンターを実装できます。色やアイコン、数値を変更すれば、自社サイトやポートフォリオにもすぐに応用できます。

  1. CSSでチャットメッセージを作成する方法をわかりやすく解説

    CSSを使えば、LINEやMessengerのようなチャットメッセージ画面を簡単に作成できます。この記事では、プロフィール画像・吹き出し・タイムスタンプ付きのチャットUIを実装する方法を、実際のコード例とともに解説します。 コード例 以下は、CSSでチャットメッセージを作成するための完全なコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <s

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

    「About Us（私たちについて）」ページは、企業の理念やチームメンバーの顔ぶれを訪問者に伝えるために欠かせないページです。本記事では、HTMLとCSSだけを使い、メンバーごとのプロフィールカードを並べたスタイリッシュなAboutページを作成する方法を、実際のコード例とともにわかりやすく解説します。 作成するページの概要 今回作成するAboutページには、以下の要素が含まれています。 濃い紫の背景に白文字の見出し（h1）を配置したページヘッダー メンバーごとの「顔写真・名前・役職・Contactボタン」をまとめたカード型デザイン 画面幅650px以下でカードが縦に並び替わるレスポンシブ対応