棒グラフ表示HTML&CSS

もくじ

• 表示例
• HTMLコード
• CSSコード

表示例

• • 項目Ａ
  • 項目Ｂ
  • 項目Ｃ
  • 項目Ｄ
  • 項目Ｅ
  • 項目Ｆ
  • 項目Ｇ
  • 項目Ｈ
  • 項目Ｉ
  • 項目Ｊ
  • 項目Ｋ
  • 項目Ｌ
  • 項目Ｍ
  • 項目Ｎ
  • 項目Ｏ
  • 項目Ｐ

HTMLコード

• • <ul class="graph">
  • <li>項目Ａ<li class="graph per00">
  • <li>項目Ｂ<li class="graph per10">
  • <li>項目Ｃ<li class="graph per20">
  • <li>項目Ｄ<li class="graph per30">
  • <li>項目Ｅ<li class="graph per40">
  • <li>項目Ｆ<li class="graph per50">
  • <li>項目Ｇ<li class="graph per60">
  • <li>項目Ｈ<li class="graph per70">
  • <li>項目Ｉ<li class="graph per80">
  • <li>項目Ｊ<li class="graph per90">
  • <li>項目Ｋ<li class="graph per100">
  • <li class="line">
  • <li>項目Ｌ<li class="graph range per00-30">
  • <li class="line">
  • <li>項目Ｍ<li class="graph range per10-20">
  • <li>項目Ｎ<li class="graph range per20-30">
  • <li>項目Ｏ<li class="graph range per30-40">
  • <li>項目Ｐ<li class="graph range per40-50">
  • </ul>

CSSコード

• • ul.graph{/*全体*/
  • box-sizing:border-box;width:100%;max-width:500px;margin:0 auto 0 auto;padding:8px;box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);line-height:0;
  • }
  • ul.graph li{/*項目*/
  • display:inline-block;box-sizing:border-box;width:80px;margin:8px 0 0 0;padding:0;border:0;border-right:solid 4px rgb(199,199,199);color:rgb(32,33,36);font-size:medium;line-height:1.6;white-space:nowrap;overflow:hidden;
  • }
  • ul.graph li:nth-child(1),ul.graph li:nth-child(2){
  • margin:0;
  • }
  • ul.graph li.graph{/*％数値の部分＋グラフの部分*/
  • width:calc(100% - 80px);border:0;letter-spacing:-0.4em;
  • }
  • ul.graph li.graph::before{/*％数値の部分*/
  • content:"";display:inline-block;width:60px;color:rgb(0,0,120);text-align:center;letter-spacing:0;
  • }
  • ul.graph li.graph::after{/*グラフの部分*/
  • content:"\003000";display:inline-block;width:calc(100% - 60px);
  • }
  • ul.graph li.per00::before{content:"0%";}
  • ul.graph li.per00::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 0%,rgb(249,249,249) 0%,rgb(249,249,249) 100%);}
  • ul.graph li.per10::before{content:"10%";}
  • ul.graph li.per10::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 10%,rgb(249,249,249) 10%,rgb(249,249,249) 100%);}
  • ul.graph li.per20::before{content:"20%";}
  • ul.graph li.per20::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 20%,rgb(249,249,249) 20%,rgb(249,249,249) 100%);}
  • ul.graph li.per30::before{content:"30%";}
  • ul.graph li.per30::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 30%,rgb(249,249,249) 30%,rgb(249,249,249) 100%);}
  • ul.graph li.per40::before{content:"40%";}
  • ul.graph li.per40::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 40%,rgb(249,249,249) 40%,rgb(249,249,249) 100%);}
  • ul.graph li.per50::before{content:"50%";}
  • ul.graph li.per50::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 50%,rgb(249,249,249) 50%,rgb(249,249,249) 100%);}
  • ul.graph li.per60::before{content:"60%";}
  • ul.graph li.per60::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 60%,rgb(249,249,249) 60%,rgb(249,249,249) 100%);}
  • ul.graph li.per70::before{content:"70%";}
  • ul.graph li.per70::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 70%,rgb(249,249,249) 70%,rgb(249,249,249) 100%);}
  • ul.graph li.per80::before{content:"80%";}
  • ul.graph li.per80::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 80%,rgb(249,249,249) 80%,rgb(249,249,249) 100%);}
  • ul.graph li.per90::before{content:"90%";}
  • ul.graph li.per90::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 90%,rgb(249,249,249) 90%,rgb(249,249,249) 100%);}
  • ul.graph li.per100::before{content:"100%";}
  • ul.graph li.per100::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 100%,rgb(249,249,249) 100%,rgb(249,249,249) 100%);}
  • ul.graph li.range::before{/*％数値の部分*/
  • content:"";display:inline-block;width:100px;
  • }
  • ul.graph li.range::after{/*グラフの部分*/
  • content:"\003000";display:inline-block;width:calc(100% - 100px);
  • }
  • ul.graph li.per00-30::before{content:"0%-30%";}
  • ul.graph li.per00-30::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 30%,rgb(249,249,249) 30%,rgb(249,249,249) 100%);}
  • ul.graph li.per10-20::before{content:"10%-20%";}
  • ul.graph li.per10-20::after {background:linear-gradient(90deg,rgb(249,249,249) 0%,rgb(249,249,249) 10%,rgb(37,37,37) 10%,rgb(37,37,37) 20%,rgb(249,249,249) 20%,rgb(249,249,249) 100%);}
  • ul.graph li.per20-30::before{content:"20%-30%";}
  • ul.graph li.per20-30::after {background:linear-gradient(90deg,rgb(249,249,249) 0%,rgb(249,249,249) 20%,rgb(37,37,37) 20%,rgb(37,37,37) 30%,rgb(249,249,249) 30%,rgb(249,249,249) 100%);}
  • ul.graph li.per30-40::before{content:"30%-40%";}
  • ul.graph li.per30-40::after {background:linear-gradient(90deg,rgb(249,249,249) 0%,rgb(249,249,249) 30%,rgb(37,37,37) 30%,rgb(37,37,37) 40%,rgb(249,249,249) 40%,rgb(249,249,249) 100%);}
  • ul.graph li.per40-50::before{content:"40%-50%";}
  • ul.graph li.per40-50::after {background:linear-gradient(90deg,rgb(249,249,249) 0%,rgb(249,249,249) 40%,rgb(37,37,37) 40%,rgb(37,37,37) 50%,rgb(249,249,249) 50%,rgb(249,249,249) 100%);}
  • ul.graph li.line{
  • width:100%;margin:16px 0 8px 0;border-top:solid 1px rgb(199,199,199);
  • }