質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

7928閲覧

HTML/CSSだけでグラフの凡例作成

masahiro.o

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

2クリップ

投稿2017/10/16 09:52

編集2017/10/17 01:46

###前提・実現したいこと
JavaScriptのライブラリで折れ線グラフを描画しているのですが、グラフの凡例がクライアントの要求を満たせず
自作(自分で描画)してグラフの下部に表示する事になりました。

ネットで調べながら記述してみたのですが、私はHTML・CSSの知識が初心者レベルであり、既にデザイナの手を離れてしまっているシステムの改修であるため自分でデザイン部分を記述する必要があり、自信がありません。

書き方に正解がないのは分かっているのですが、これでいいのか識者に判断して頂きたいです。

実際には全てJavaScriptで動的に生成します。

完成イメージ的には以下のような感じです。
線の数は可変で、色に意味があるので色も動的に変えたいです。
イメージ説明

###やってみたこと
以下にソースを貼りますが、「●」と「‐」を重なるように配置して凡例っぽく見せようとやってみました。
線の数が可変で色も種類によって変わるので文字で再現しようと思いました。

###該当のソースコード

  • HTML
<div class="legend-items"> <ul> <li> <div class="legend-item"> <p class="point-item1">●</p> <p class="line-item1">―――</p> <span class="item-desc1">1個</span> </div> </li> <li> <div class="legend-item"> <p class="point-item2">●</p> <p class="line-item2">―――</p> <span class="item-desc2">2個</span> </div> </li> <li> <div class="legend-item"> <p class="point-item3">●</p> <p class="line-item3">―――</p> <span class="item-desc3">3個</span> </div> </li> <li> <div class="legend-item"> <p class="point-item4">●</p> <p class="line-item4">―――</p> <span class="item-desc4">4個</span> </div> </li> </ul> </div>
  • CSS
.legend-items { width: 420px; border: black solid 1px; } .legend-items ul { font-size: 0; padding: 0; } .legend-items li { display: table-cell; font-size: 12px; } .legend-item { position: relative; display: flex; width: 100px; } .point-item1 { padding-left: 32px; color: #f49623; } .line-item1 { position: absolute; top: 0px; left: 20px; color: #f49623; } .item-desc1 { position: absolute; top: 12.5px; left: 70px; color: #f49623; } .point-item2 { padding-left: 32px; color: #b4b329; } .line-item2 { position: absolute; top: 0px; left: 20px; color: #b4b329; } .item-desc2 { position: absolute; top: 12.5px; left: 70px; color: #b4b329; } .point-item3 { padding-left: 32px; color: #79cb44; } .line-item3 { position: absolute; top: 0px; left: 20px; color: #79cb44; } .item-desc3 { position: absolute; top: 12.5px; left: 70px; color: #79cb44; } .point-item4 { padding-left: 32px; color: #ae0000; } .line-item4 { position: absolute; top: 0px; left: 20px; color: #ae0000; } .item-desc4 { position: absolute; top: 12.5px; left: 70px; color: #ae0000; }

###試したこと
他にはtableタグを使った方法をこのサイトを参考にして
やってみましたが、ソースが煩雑な気がして上記に落ち着きました。

###補足情報(言語/FW/ツール等のバージョンなど)
対応ブラウザはIE11、Chrome(最新)だけでOKです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/16 10:06

「判断」とはなんでしょう?
masahiro.o

2017/10/16 10:15

根本的にやり方がおかしいとか、他にもっといいやり方がないのかとかが知りたいです。
8yazaki

2017/10/16 11:42

目標としている完成形もあるとより良いと思います
masahiro.o

2017/10/17 01:47

ご指摘の通りですね…追加します。
guest

回答1

0

ベストアンサー

こういうのはどうでしょうか?

HTML

1<ul class="legend-items"> 2 <li>1回</li> 3 <li>3回</li> 4 <li>5回</li> 5 <li>7回</li> 6</ul>

CSS

1ul.legend-items { 2 box-sizing: border-box; 3 width: 444px; 4 border: black solid 1px; 5 padding: 5px 20px; 6} 7 8ul.legend-items li { 9 display: inline-block; 10 font-size: 12px; 11 position: relative; 12} 13 14ul.legend-items li:nth-last-of-type(n + 2) { 15 margin-right: 30px; 16} 17 18ul.legend-items li::before, ul.legend-items li::after { 19 content: ""; 20 display: inline-block; 21 vertical-align: middle; 22} 23 24ul.legend-items li::before { 25 width: 50px; 26 height: 3px; 27 margin-right: 5px; 28} 29 30ul.legend-items li::after { 31 width: 10px; 32 height: 10px; 33 border-radius: 50%; 34 position: absolute; 35 top: 50%; 36 left: 25px; 37 transform: translate(-50%, -50%); 38} 39 40ul.legend-items li:nth-of-type(1)::before, 41ul.legend-items li:nth-of-type(1)::after { 42 background-color: #f49623; 43} 44 45ul.legend-items li:nth-of-type(2)::before, 46ul.legend-items li:nth-of-type(2)::after { 47 background-color: #b4b329; 48} 49 50ul.legend-items li:nth-of-type(3)::before, 51ul.legend-items li:nth-of-type(3)::after { 52 background-color: #79cb44; 53} 54 55ul.legend-items li:nth-of-type(4)::before, 56ul.legend-items li:nth-of-type(4)::after { 57 background-color: #ae0000; 58}

投稿2017/10/17 04:21

root_jp

総合スコア4666

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

root_jp

2017/10/17 05:01

あ、すいません。以下考慮してませんでした。 >線の数は可変で、色に意味があるので色も動的に変えたいです。 HTMLのliに色のクラスを指定する形にした方がよさそうですね。
masahiro.o

2017/10/17 05:01

before/after疑似要素で実現するのですね。 HTML/CSS共にシンプルで凄くしっくりきました。 パッと見半分くらいしか理解できませんが調べながら使わせて頂きます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問