webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

dl, dt, dd でグラフを作る

f:id:ohta-felica:20160925100635p:plain

<style>
dl,
dt,
dd {
margin: 0;
padding: 0;
line-height: 1.0;
}

.container {
width: 600px;
margin: 0 auto;
}

dt {
width: 100%;
background: #cccccc;
padding: 0.5em;
margin-bottom: 0.5em;
}

dd {
background: #ffd800;
padding: 0.5em;
text-align: right;
font-size: 12px;
margin-bottom: 0.5em;
}
</style>

</head>

<body>
<div class="container">
<dl class="chart">
<dt>Item 1</dt>
<dd style="width:47%;">Sunday
<br>47%</dd>
<dd style="width:23%;">Monday
<br>23%</dd>
<dd style="width:31%;">Tuesday
<br>31%</dd>
<dd style="width:45%;">Wednesday
<br>45%</dd>
<dd style="width:12%;">Thursday
<br>12%</dd>
<dd style="width:7%">Friday
<br>7%</dd>
<dd style="width:19%">Saturday
<br>19%</dd>
</dl>
<dl class="chart">
<dt>Item 2</dt>
<dd style="width:53%;">Sunday
<br>53%</dd>
</dl>
</div>

</body>

  • なるほど、というかんじですねぇ〜