HTMLでのコード表記の開発を続けています。 前のトピックのコメントで、 selenitはコードがさらに少ない最適化バージョン（ 1、2 ）を提案しました。
このトピックを詳細に理解するには、前のトピックをお読みください。
コードが修正され、4つのリストの代わりに1が使用され、すべての場合と同様に、文字列に使用されます。
ラベル より大きなユニコード記号＃＆＃9679に置き換えられました。
提案されたセレニットを実装するとき、コードの数を減らすことはできましたが、私は損失を被らなければなりませんでした。 特に、Opera、IEでの誤った印刷-コードがバラバラになります。 決定方法はまだ出ていません。
IEでページをスケーリングすると、指の番号を示す数字がシフトします。
正しい印刷のオプションは、 以前のバージョンのコードで見ることができます 。
すべてのバージョンに適用：コードの種類は、フォントサイズによって異なります。 フォントシンボルはラベルに使用されます。フォントまたはそのサイズを変更すると、正しく表示されるようにCSSのパラメーターを変更する必要があります。
コードのHTMLおよびCSSコード。
いくつかの和音のHTML、大小のバレのデモ。
< h1 > v3 </ h1 >
< div class ="accord float-l" >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad0" >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span > 0 </ span ></ li >
< li >< span > x </ span ></ li >
< li >< span > x </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > Dm </ h2 >
</ div >
< div class ="accord float-l" >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad0" >
< li >< span class ="lad2" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span > 0 </ span ></ li >
< li >< span > x </ span ></ li >
< li >< span > x </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > D7 </ h2 >
</ div >
< div class ="accord float-l" >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad0" >
< li >< span > 0 </ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span > 0 </ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span > 0 </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > C </ h2 >
</ div >
< div class ="clearfix" ></ div >
< div class ="accord float-l" >
< p class ="nomer-lada" > I </ p >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad0" >
< li >< span class ="lad1 barre bolshoe" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 4 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
</ ol >
</ div >
</ div >
< h2 > F </ h2 >
</ div >
< div class ="accord float-l" >
< p class ="nomer-lada" > I </ p >
< div class ="porog2 lad4" >
< div class ="porog3" >
< ol class ="lad0 lad4" >
< li >< span class ="lad1 barre s3" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad4" >< big > ● </ big >< small > 4 </ small ></ span ></ li >
< li class ="last" >< span > x </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > Db </ h2 >
</ div >
< div class ="accord float-l" >
< p class ="nomer-lada" > II </ p >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad2" >
< li >< span class ="lad1 barre s5" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 4 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li class ="last" >< span > x </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > Hm </ h2 >
</ div >
* This source code was highlighted with Source Code Highlighter .
例を参照してください。
CSSコード：
p.nomer-lada { margin: 0em 1.5em 0.5em 1.8em; }
h2 {
margin: 0; padding: 0;
text-align: center;
}
.porog2 { /* , */
margin: 1em 0 1em 3.5em;
width: 6.26em;
border: solid #333;
border-width: 0 0.13em;
height: 4.56em;
}
.porog3 { /* */
width: 3.07em;
border-right: 2px solid #333;
height: 4.56em;
}
.porog2 ol {
margin: 0 0 0 -3.13em;
padding: .2em 0 0 0; /* c */
list-style: none;
border: solid #333; /* , 4 4, 3- 3 */
border-width: 0 0.13em;
height: 4.063em; /* */
width: 9em; /* 3 */
overflow: visible;
position: relative;
}
.porog2.lad4 {
width: 6.26em;
margin: 1em 3em;
}
ol.lad0 { /* */
border-left-width: 0.4em;
margin-left: -3.13em;
height: 4.36em;
}
ol.lad2 { /* 1 */
margin-left: -2.87em;
height: 4.36em;
}
ol.lad4 li {
width: 12.26em;
}
ol.lad4 li.last { border-right: 0; }
ol.lad4 {
width: 12.26em;
margin-right: 3em
}
.porog2 li {
padding: 0;
border-top: 1px dotted #333;
height: .8em;
margin: 0 0 -1px;
*margin-bottom: -6px; /* IE 6,7 */
position: relative;
vertical-align:bottom; /* IE */
}
.porog2 span {
position: relative; /* IE */
line-height: 1.3em;
top: -.78em;
*top: -.87em; /* IE 6,7 */
left: -1em;
}
span big { /* */
font-size: 1.4em; /* */
line-height: .9em;
}
span small { /* */
position: relative;
top:-.3em;
font-size: .9em;
font-weight: bold;
}
/* */
span.lad1 { left: .8em }
span.lad2 { left: 3.8em }
span.lad3 { left: 7em }
span.lad4 { left: 10em; }
.barre { /* */
margin: 0 0 0 -.25em;
z-index: 10;
border: solid #999;
border-width: .05em 0 .05em .25em;
display: block;
white-space: nowrap;
width: 0.2em;
}
.barre.bolshoe { height: 5.4em; }
.s5 { height: 4.4em; }
.s4 { height: 3.6em; }
.s3 { height: 2.9em; }
.accord {
display: block;
border: 1px solid #eee;
width: auto;
padding: 1em;
margin: 1em;
}
* This source code was highlighted with Source Code Highlighter .
例を参照してください。
私はこのアイデアをどこで手に入れましたか...
このトピックの最初と2番目のトピックのすべてのコメンテーターに感謝します-それを理解するのに役立ちました。