モバイルで表示するゴルフスコアのデザイン

2018/02/22 22:04

このQ&Aのポイント

モバイル画面にかっこいいゴルフスコアを表示する方法について悩んでいます。データを大きくせずにgifを使用するかどうかも検討中です。
色合いや丸みなども考えています。アイデアがあればどんな些細なことでもアドバイスをお願いします。
以下のHTMLは、ゴルフスコアのデザイン例です。

モバイルで表示するゴルフスコアのデザイン

お世話になっております、めぐみと申します。 4.7インチ程度のモバイル画面にかっこいいゴルフスコアが表示できないか悩んでいます。自分で作っては見たもののあまりよくないです。あまり、データを大きくしたくないので極力gif等使用したくはないですが、多少なら使ってもよいかと思っています。色合いがきれいで、丸みとかあったほうがいいのかと考えてはいるのですが。。。もし、何か良いアイデアがありましたらどんな些細なことでも結構ですのでアドバイス頂けないものでしょうか。以下、HTMLを貼り付けます。 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1"> <tbody> <tr> <td bgcolor="#4C6E29" style="color: #FFFFFF">日付</td> <td colspan="11" bgcolor="#4C6E29" style="color: #FFFFFF">2018.02.19</td> </tr> <tr> <td rowspan="2" bgcolor="#4C6E29" style="color: #FFFFFF">場所</td> <td colspan="11" bgcolor="#4C6E29" style="color: #FFFFFF">〇〇ゴルフ場In</td> </tr> <tr> <td colspan="11" bgcolor="#4C6E29" style="color: #FFFFFF">〇〇ゴルフ場Out</td> </tr> <tr> <td rowspan="4" bgcolor="#4C6E29"> </td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">1</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">2</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">3</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">4</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">5</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">6</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">7</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">8</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">9</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">小計</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">実績合計</td> </tr> <tr> <td align="center" valign="middle" bgcolor="#98A51C">-1</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">0</td> <td align="center" valign="middle" bgcolor="#98A51C">0</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">-2</td> <td align="center" valign="middle" bgcolor="#98A51C">0</td> <td align="center" valign="middle" bgcolor="#98A51C">2</td> <td align="center" valign="middle" bgcolor="#98A51C">0</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">+15</td> </tr> <tr> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">10</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">11</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">12</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">13</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">14</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">15</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">16</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">17</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">18</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">小計</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">打数合計</td> </tr> <tr> <td align="center" valign="middle" bgcolor="#98A51C">2</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">-1</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">2</td> <td align="center" valign="middle" bgcolor="#98