ギターのコードは通常、Webページにどのように表示されますか？
写真！
描画する必要があるので、それは必ずしも便利ではありません。
だから私はアイデアを得ました：
HTMLとCSSのみを使用してギターのコードを表示します。
コードを次のように説明します。
名前、弦の音に関するデータの列、コードのフィールド。
マークは、固定された弦とそれを押す指を示します。 残りのラベルの値は図に示されています。
これまで、単純なコードのみを表示しましたが、バレのコードは表示されません。
誰かが来たら-提案を歓迎します。
実際には、ギターの首のプレゼンテーションはリストに記載されています。 4つのリスト：1-音に関するメモ、2..4-フレット。
HTMLでの表示方法
<div class="accord float-l"> <div class="accord-name">Dm</div> <ul> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span>0</span></li> <li><span>X</span></li> <li><span>X</span></li> </ul> <div class="grif"> <div class="porojek verx"></div> <ul> <li><span>©<small>1</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <ul> <li><span> </span></li> <li><span> </span></li> <li><span>©<small>2</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <ul> <li><span> </span></li> <li><span>©<small>3</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <div class="clearfix"></div> </div> </div><!-- /accord Dm -->
<div class="accord float-l"> <div class="accord-name">Dm</div> <ul> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span>0</span></li> <li><span>X</span></li> <li><span>X</span></li> </ul> <div class="grif"> <div class="porojek verx"></div> <ul> <li><span>©<small>1</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <ul> <li><span> </span></li> <li><span> </span></li> <li><span>©<small>2</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <ul> <li><span> </span></li> <li><span>©<small>3</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <div class="clearfix"></div> </div> </div><!-- /accord Dm -->
空の行は、通常のブラウザ（FFなど）がこれらの行を表示できるように、表示されない不可解なスペースで埋める必要があります。
CSSを使用してHTMLを作成する
/ *アコード* /
div.accord {
幅：162ピクセル;
マージン：1em;
}
div.accord .accord-name {/ *コード名* /
text-align：center;
フォントサイズ：1.4em;
フォントの太さ：太字。
}
div.accord div.grif {/ *バーの作成* /
高さ：7.4em;
オーバーフロー：非表示。
}
div.accord div.grif .porojek {/ *フレット間の敷居を作る* /
幅：2px;
高さ：6.4em;
float：左;
背景：黒;
マージン：.4em 0 0 0;
}
div.accord div.grif .porojek.verx {/ *最初のナットを作成します。より幅広です* /
幅：4px;
}
div.accord .grif ul {/ *コードごとに1つのフィールド* /
幅：46px;
float：左;
マージントップ：-.6em; / *フィールドを引き上げる* /
行の高さ：11px;
}
div.accord .grif ul li {
text-align：center; / *フィールドの中央に、押された文字列のラベルを配置します* /
border-bottom：1pxドットグレー; / *文字列を描画* /
}
div.accord .grif ul li span {
位置：相対;
下：-.6em; / *文字列の中央にマークを配置します* /
フォントサイズ：1em;
フォント：Verdana;
}
div.accord .grif ul li span small {/ * finger finger number * /
フォントサイズ：.9em;
位置：相対;
下：2px; / *マークを基準にしてわずかに上および右に移動* /
左：1px;
}
div.accord ul {/ *弦の音に関する弦の前の音符* /
幅：12px;
float：左;
行の高さ：12px;
}
#content dl {/ *表記法リスト* /
フォントサイズ：1.2em;
}
#content dl dt {
フォントの太さ：太字。
}
ブラウザのスタイルをリセットするには、デフォルトはYahoo!の reset.cssです。 UIライブラリ 。
ライブデモを見る
UPD： IE7、FF3、Opera 9のみテスト済み
UPD 03/21/2009：バレサポート付きのバージョンについては、次のトピックを参照してください 。