行われたこと：
-ダブルストリング回路を削除しました（一般的にはファンによって作成されました）。
-フレットの最大数は12に制限されていましたが、
-フレット番号の表示を追加、
-指番号の表示を追加、
-楽器の構造の表示を追加しました。
-非アクティブな文字列の表示を再編集しました（以前は赤の「チップ」で強調表示されていましたが、今では予想通り、赤い十字と目立たない色（2つ目はcss-propertyコンテンツをサポートしない6つ目のIEで作成されます）、
-結果として、ブラウザ間の互換性に取り組みました-ta-daaam！ -このことは、6番目のIEである老人でも機能しますが、そこにあるいくつかの美を見るのは機能しません。
この不名誉がどのように見えるかは、 例のページで見ることができます（ 以前のバージョンと比較してください）。
これをすべて使用する方法は？
ここで、ファンタジーをオンにして、誰かが上記のすべてを必要としていることを少し想像し、それを使用する方法を明確に示すようにします。
Emコードを表示するための段階的な手順
1. ブロックのcssファイルをダウンロードし、便利なディレクトリに配置します。
2.ダウンロードしたcssファイルを接続します。
<link rel="stylesheet" type="text/css" href="__/b-neck.css">
3.ラッパーを作成します。
<div class="b-neck"> <div class="b-neck__fretboard SingleVI"> </div> </div>
フル12フレットネックが必要ない場合は、これを行うことができます。
<div class="b-neck b-neck_type_part"> <div class="b-neck__fretboard SingleVI"> </div> </div>
この場合、5フレットをラッパーにプッシュできます。 SingleVIクラスは、表示される計測器に6つの単一の文字列があることを意味します。 クラスは引き続き使用できます：SingleIII、SingleIV、SingleVおよびSingleVII。 低音回路を使用する場合は、BassIII、BassIV、BassV、BassVIのいずれかのクラスをここに配置する必要があります。
4.フレットを挿入します。
<div class="b-neck"> <div class="b-neck__fretboard SingleVI"> <div class="b-neck__frets"> <div class="b-neck__fret Nut"></div> <div class="b-neck__fret I"></div> <div class="b-neck__fret II"></div> <div class="b-neck__fret III"></div> <div class="b-neck__fret IV"></div> <div class="b-neck__fret V"></div> <div class="b-neck__fret VI"></div> <div class="b-neck__fret VII"></div> <div class="b-neck__fret VIII"></div> <div class="b-neck__fret IX"></div> <div class="b-neck__fret X"></div> <div class="b-neck__fret XI"></div> <div class="b-neck__fret XII"></div> </div> </div> </div>
ラッピングにb-neck_type_partクラスを使用した場合、b-neck__fretクラスには6つ以下の要素が必要です。 このような要素のクラスナットは、ナットであることを意味します。 ローマ数字のクラスはフレット番号です。 ナットとフレットの両方でカウントダウンを開始できます（この場合、ナットは単に削除されます）。
5.文字列の挿入：
<div class="b-neck"> <div class="b-neck__fretboard SingleVI"> <div class="b-neck__frets"> <div class="b-neck__fret Nut"></div> <div class="b-neck__fret I"></div> <div class="b-neck__fret II"></div> <div class="b-neck__fret III"></div> <div class="b-neck__fret IV"></div> <div class="b-neck__fret V"></div> <div class="b-neck__fret VI"></div> <div class="b-neck__fret VII"></div> <div class="b-neck__fret VIII"></div> <div class="b-neck__fret IX"></div> <div class="b-neck__fret X"></div> <div class="b-neck__fret XI"></div> <div class="b-neck__fret XII"></div> </div> <div class="b-neck__strings"> <div class="b-neck__string I E"></div> <div class="b-neck__string II H"></div> <div class="b-neck__string III G"></div> <div class="b-neck__string IV D"></div> <div class="b-neck__string V A"></div> <div class="b-neck__string VI E"></div> </div> </div> </div>
SingleVI以外のクラスを使用した場合、このクラスで指定された数の文字列が必要です。
b-neck__stringブロックを使用すると、すべてが簡単になります。 彼は3つのクラスを持つことができます。
最初は文字列番号を表すローマ数字です（必須）。
2番目は大文字のラテン文字で、文字列が現在調整されている音符を示します（省略可能）。 クリアノートに加えて、シャープまたはフラットノートを示すことができます。 たとえば、次のように：
<div class="b-neck__string IF♯"></div>
または：
<div class="b-neck__string IE♭"></div>
♯および♯アイコンはすべてのOSおよびフォントで表示されるわけではないため、このオプションは慎重に使用する必要があります。
3番目のクラスもオプションで、アクティブまたは非アクティブのいずれかです。 最初の場合、文字列はアクティブとして緑色で強調表示され、2番目の場合、文字列は赤い十字になり、「淡色に変わります」。
6. 「フィンガー」を挿入します（このブロックは最も難しいです）
<div class="b-neck"> <div class="b-neck__fretboard SingleVI"> <div class="b-neck__frets"> <div class="b-neck__fret Nut"></div> <div class="b-neck__fret I"></div> <div class="b-neck__fret II"></div> <div class="b-neck__fret III"></div> <div class="b-neck__fret IV"></div> <div class="b-neck__fret V"></div> <div class="b-neck__fret VI"></div> <div class="b-neck__fret VII"></div> <div class="b-neck__fret VIII"></div> <div class="b-neck__fret IX"></div> <div class="b-neck__fret X"></div> <div class="b-neck__fret XI"></div> <div class="b-neck__fret XII"></div> </div> <div class="b-neck__strings"> <div class="b-neck__string I E"></div> <div class="b-neck__string II H"></div> <div class="b-neck__string III G"></div> <div class="b-neck__string IV D"></div> <div class="b-neck__string V A"></div> <div class="b-neck__string VI E"></div> </div> <div class="b-neck__hand"> <div class="b-neck__finger III AtIV ToII"></div> <div class="b-neck__finger II AtV ToII"></div> </div> </div> </div>
b-neck__fingerブロックに注意してください。 彼は4つのクラスを持つことができます。
最初はIからVまでのローマ数字です。指の番号を示します。 このクラスが指定されていない場合、指の番号は表示されません。 指は次のように示されます：インデックス-I、ミドル-II、名前のない-III、小指-IV、大きい（時々起こる）-V
2番目はAt +です。これは、「指」が置かれている文字列を示すローマ数字です。
3番目の-To +は、「指」がどのモードに移行するかを示すローマ数字です。
4番目-バレを配置するフレットの数を示すバレ+ローマ数字。 例：
<div class="b-neck__finger BarreIV"></div>
4つの弦にバレを付けます。
7.コードブロックにキャプションまたはタイトルを追加できます。
<div class="b-neck"> <div class="b-neck__h1"> </div> <div class="b-neck__fretboard SingleVI"> <div class="b-neck__frets"> <div class="b-neck__fret Nut"></div> <div class="b-neck__fret I"></div> <div class="b-neck__fret II"></div> <div class="b-neck__fret III"></div> <div class="b-neck__fret IV"></div> <div class="b-neck__fret V"></div> <div class="b-neck__fret VI"></div> <div class="b-neck__fret VII"></div> <div class="b-neck__fret VIII"></div> <div class="b-neck__fret IX"></div> <div class="b-neck__fret X"></div> <div class="b-neck__fret XI"></div> <div class="b-neck__fret XII"></div> </div> <div class="b-neck__strings"> <div class="b-neck__string I E"></div> <div class="b-neck__string II H"></div> <div class="b-neck__string III G"></div> <div class="b-neck__string IV D"></div> <div class="b-neck__string V A"></div> <div class="b-neck__string VI E"></div> </div> <div class="b-neck__hand"> <div class="b-neck__finger III AtIV ToII"></div> <div class="b-neck__finger II AtV ToII"></div> </div> </div> <div class="b-neck__h2"> </div> <div class="b-neck__message"> </div> </div>
基本的には以上です。
ちょっとした贅沢：
アルペジオ1番 、
アルペジオ第2番 、
アルペジオ第3番 、
アルペジオ第4番 （私のお気に入り）。
代替バージョン：
r3codeの habrahabr.ru/blogs/css/55248
rukeba.com/chords from rukeba 、
tenshiの habrahabr.ru/blogs/css/94139 、
chordfind.com 、
www.gootar.com/guitar 。