結果を表示する
元にもどす
<html> <meta charset="utf-8"> <style> div{text-align:center; margin:16px; cursor:pointer;} a{display:inline-block; font-family:fantasy; font-size:24px; font-weight:bold; text-decoration:none; vertical-align:middle; color:#ffffff; width:140px; padding:8px; transition-duration:0.1s;} a:hover{color:#000000; transition-property:color; text-shadow:1px 1px 3px #ffffff;} .トランペット{background-color:#4169e1;} .ホルン{background-color:#ff6347;} .トロンボーン{background-color:#008b9f;} .チューバ{background-color:#da70d6;} </style> <div><a href="#"class="トランペット">Trumpet Mouthpiece</a> <a href="#"class="ホルン">Horn Mouthpiece</a></div> <div><a href="#"class="トロンボーン">Trombone Mouthpiece</a> <a href="#"class="チューバ">Tuba Mouthpiece</a></div> </html>