CSS グリッドレイアウトを使用してレスポンシブな縦棒グラフを作成する方法

CSS グリッドレイアウトを使用してレスポンシブな縦棒グラフを作成する方法

私はしばらくの間チャートをいじっていましたが、好奇心から、CSS を使用してチャートを作成するより良い方法を見つけたいと思っています。オンラインのオープンソース チャート ライブラリの学習を開始しました。これにより、CSS グリッドなどの新しい未知のフロントエンド テクノロジーを学習できるようになりました。

今日は、私が学んだこと、つまり CSS グリッド レイアウトを使用して標準的なレスポンシブな棒グラフを作成する方法を皆さんと共有したいと思います。まず、効果画像:

この記事の例は、CSS グリッドレイアウトを学ぶための単なる実験です。私も学びながら進めているので、この記事のコードはあまり参考になりません。

最初のシンプルなバージョン

最初は少し混乱するかもしれないので、シンプルなバージョンを作成することに重点を置きましょう。まず、チャートの HTML マークアップを記述する必要があります。

<div class="chart">
  <div class="bar-1"></div>
  <div class="bar-2"></div>
  <div class="bar-3"></div>
  <div class="bar-4"></div>
  <!-- 12 小節目まで -->
</div>

bar-で始まるこれらの div タグは棒グラフの列に対応し、これが記事全体に必要な HTML のすべてです。

次に、私の手順と簡単な説明に従って、CSS を使用して棒グラフの一般的なスタイルを段階的に描画します。CSS のセマンティクスについては、あまり詳しくないかもしれませんが、あまり心配する必要はありません。CSS グリッドに関する知識の紹介については、後ほど重点的に説明します。

さて、CSS スタイルの記述を始めましょう。まず、親要素に必要なスタイルをいくつか追加しましょう。

* {
  ボックスのサイズ: 境界線ボックス;
}

html,
体 {
  マージン: 0;
  背景色: #eee;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
}

.チャート{
  高さ:100vh;
  幅:70vw;
}

チャートには 5 ピクセル間隔で 12 本のバーが必要です。この要件を満たすには、親クラス.chartに次のグリッド関連のスタイルを記述します。

.チャート{
  表示: グリッド;
  グリッドテンプレート列: repeat(12, 1fr);
  グリッドテンプレート行: repeat(100, 1fr);
  グリッド列の間隔: 5px;
}

グリッドレイアウトに慣れている人にとっては、これは非常に簡単です。上記のコードの意味は、「12 列、各列の幅が同じ (1fr = 1 分数)、高さが 100 等分され、1 行に 1 等分され (計算が簡単になるように)、列間に 5 ピクセルのスペースがある」ということです。

この時点では、子要素にグリッド内でのスペースをどのように占めるかを伝えていないため、チャートはまだ空です。グリッド内の垂直方向のスペースを埋めるために、 grid-row-startプロパティとgrid-row-endプロパティを使用し、次に、これらの 2 つのプロパティを変更して各子要素の高さを定義します。スタイル クラスbarから始まる子要素に以下を追加します。

[クラス*='バー'] {
  グリッド行開始: 1;
  グリッド行の終了: 101;
  境界線の半径: 5px 5px 0 0;
  背景色: #ff4136;
}

これで、次の効果が得られます。

各バーはグリッドの上部 (1) から始まり、下部 (101) で終わるように指定します。上記ではグリッドを 100 行に分割しましたが、このプロパティの値として 101 を使用するのはなぜでしょうか?これらのグリッドのプロパティに混乱していても大丈夫です。先に進む前に、これを少し調べてみましょう。

グリッドラインを理解する

グリッド レイアウトの特別な機能はグリッド ラインの概念であり、この新しいレイアウト ツールを理解する上で非常に重要です。以下に、4 行 4 列のグリッドでグリッド ラインがどのように描画されるかを示す図を示します。

これら 4 行 4 列の対応するスタイルは次のとおりです ( special-col )。

.グリッド{
  グリッドギャップ: 5px;
  グリッドテンプレートの列: repeat(4, 1fr);
  グリッドテンプレート行: repeat(4, 1fr);
}

.special-col {
  グリッド行: 2 / 4;
  背景色: #333;
}

grid-rowgrid-row-startgrid-row-endの短縮プロパティです。前者はグリッド内の要素の開始位置を示し、後者はグリッド内の要素の終了位置を示します。黒いブロックはグリッド ライン 2 から始まり、グリッド ライン 4 (行 4 ではない) で終わることに注意してください。黒いボックスを 4 行すべてに埋めたい場合は、5 番目のグリッド ライン、つまり 1 / 5 で終了する必要があります。これを理解することが大切です。

言い換えれば、子要素はグリッド内の行や列全体を占めるものではなく、グリッド線にまたがるものとしてのみ考えるべきです。最近、この件に関する Jen Simmons のチュートリアルを詳しく調べたのですが、概念的に理解して慣れるまでに時間がかかりました。

例に戻る

上記の例のグラフでは、すべての列が値 101 で終了するのは、101 が 100 番目の行ではなく 101 番目のネットワーク ラインを表すためです。

現在、 .chartでは vw/vh 単位を使用しているため、応答性をサポートするための追加作業を行わなくても、応答性の高いチャートを作成できます。ブラウザのサイズを変更すると、常にビューポート全体を占めながら、適切に圧縮または拡大されることがわかります。

ネットワークラインの概念を理解すると、列の高さを簡単に調整できます。列の高さを異なるものにする必要があります。

.bar-1 {
  グリッド行開始: 55;
}
.bar-2 {
  グリッド行開始: 1;
}
...(わずかに);

最後に、偶数の列を異なる色にします。

[クラス*='bar']:n番目の子(奇数) {
  背景色: #ff4136;
}

[クラス*='bar']:n番目の子(偶数) {
  背景色: #0074d9;
}

効果:

このようにして、レスポンシブな棒グラフを作成しました。もちろん、この例はほんの始まりに過ぎず、実際に使用できるようになるまでにはまだやるべきことがたくさんあります。たとえば、注釈や軸を描画したり、JS を介して実際のビジネス データをバインドしたりします。

CSS グリッドレイアウトを使用してレスポンシブな棒グラフを作成する方法についての記事はこれで終わりです。CSS グリッド レスポンシブな棒グラフに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  JavaScript の useRef と useState の紹介

>>:  MySQLのREDOログとUNDOログの詳細な説明

推薦する

HTML/CSS での空白処理とページ内の空白を保持する方法

HTML の空白ルールHTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続する...

Vueはボタン切り替え画像を実装します

この記事では、ボタン切り替え画像を実現するためのVueの具体的なコードを例として紹介します。具体的な...

MySQLステートメントの記述と実行順序を理解するだけです

MySQL ステートメントの書き込み順序と実行順序には大きな違いがあります。書き順、mysql の一...

nginx がどのようにして高いパフォーマンスとスケーラビリティを実現するのかを深く理解する

NGINX の全体的なアーキテクチャは、連携して動作する一連のプロセスによって特徴付けられます。メイ...

Centos7でmysql6の初期化インストールパスワードをインストールする方法

1. まずデータベースサーバーを停止しますサービスmysqld停止2.vim /etc/my.cnf...

Javascript を使用して、スライドバー効果のあるスライドナビゲーション プラグインを開発します。

目次1. はじめに2. 使用方法3. 開発プロセス1. モデル例2. イベントとアニメーション4. ...

WeChatミニプログラムページで値を返す4つの解決策のまとめ

目次使用シナリオ解決1. globalDataを使用して実装する2. ローカルキャッシュストレージを...

HTMLデザインパターンの日々の勉強ノート

HTML デザインパターン学習ノート今週は主にHTMLデザインパターンを学びました。学習内容をまとめ...

Docker コンテナにおける Patroni の簡単な分析

目次イメージの作成ファイル構造Dockerファイルエントリポイント関数ファイルを生成するイメージを構...

CentOS7環境でDockerを使ってPHP動作環境を構築する手順を詳しく解説

関連記事: CentOS7でyumを使用してDockerをインストールするDockerを使ってWin...

NestJsはMongooseを使用してMongoDBを操作する

最近、NestJs フレームワークを学び始めました。学習コストは他のフレームワークよりもはるかに高く...

MySQL マスタースレーブ構築(複数のマスターと 1 つのスレーブ)の実装アイデアと手順

背景:最近、同社のプロジェクトは同時実行のプレッシャーに耐えられないようなので、最適化が差し迫ってい...

Docker コンテナの正常なシャットダウン前にトラップを使用して環境のクリーンアップを実行する

実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...

Docker+Jenkinsを使用して自動的にビルドおよびデプロイする

この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...