◀︎STUDY JavaScript_012-1 棒グラフ / CSS: psedo-class
1
-----
-----
-----
-----
グラフで使用するカラー
- ⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎#aaffff
- ⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎#ffddff
- ⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎#aacfff
- ⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎#ffddcc
- ⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎#ccffcc
- ⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎⬜︎#ffbbbb
▼ Download: ■ sample_JS_012-ABCD
使用するデータ
- 1月 20
- 2月 40
- 3月 60
- 4月 80
- 5月 100
- 6月 30
サンプル - 1
div タグで横幅 60px 〜 300px / 高さ 24px; をのグラフを表示してあります. 6種類のバーに対して6種類のサイズ(横幅)とカラーを CSS で指定してある.
サンプル - 2
バーとバーの間隔を広げ, バーの中に文字データを入力してある.
サンプル - 3
横幅 300px のボックス (border:solid 1px black;
border-radius:4px;) の中にグラフを入れ, 文字のウエイトを Bold に指定してある.
サンプル - 4
CSS でカスタム・プロパティとスードゥ-クラスを使用し, カラーの指定をまとめてある.
カスタム・プロパティの解説
- カスタム・プロパティ名は大文字と小文字の区別があり, 例えば --Go-color と --go-color は別な宣言となります.
- --color-1:#aaffff;
- --color-2:#ffddff;
- --color-3:#aacfff;
psedo-class スードウ-クラスの解説
- 要素の一時的な状態 / 特徴を疑似的に表記するもので, psedo の発音はプセドではなくスードゥで, 意味は「もどき」.
- tr:nth-of-type(10n+1) td{background:var(--color,var(--color-1));
- tr:nth-of-type(10n+2) td{background:var(--color,var(--color-2));
- tr:nth-of-type(10n+3) td{background:var(--color,var(--color-3));
1
-----
-----
-----
-----
◀︎Contents STUDY JavaScript_012-1
