[Codrops]楽器サイト作り方 ギター編

前回の記事でピアノのページを製作しました。今度は男性ユーザーの多いギターも紹介します。

Interactive Musical Instrument

実践動画

コードの解読

ギター本体のデザインはCSS : instrument.cssで編集で可能です。

ギター本体の色を変えたい時は、style.css で編集します。

CSS

style.css　　/* ギターの本体色を変える場合*/

.content–guitar {
background: #dad4c3;
}

.content–guitar .content__title,
.content–guitar .link-more {
color: #d06315;
}

instrument.css   /*ストリング(弦)を変える場合*/

/* Guitar */  61行目
.guitar__body {    
fill: #cac3b0;
stroke: #fbdac8;
stroke-width: 1px;
}

.guitar__neck,
.guitar__stringcut {
fill: #b7b09f;
}

.guitar__middle {
fill: #afa99a;
}

.guitar__string {
pointer-events: none;
stroke: #e6e3d9;
stroke-width: 1.5px;
}

.guitar__string-hover {
pointer-events: visible;
fill: none;
}

作成したページ（画像をクリックで開く）

HTML

ギターの本体のコードはindex.htmlにあり、何も触らなくてOKです。

ギター以外のコードを削除することでシンプルなギターのページが完成します。

この時の注意点ですが、なぜかピアノのクラスを消すとギターの音が出ないです。

JavaScript

最後にフッターにある色々ある JavaScript :  guitar.js は必須です。

他のも消さない方がいいです。消すと音が出なかったりします。

に記述がありますので、これを絶対に消さない様に編集します。

PDFレポートにしました！無料DLはこちら

最後までご覧いただきありがとうございました。