htmlで数字に○を付与したいが出来るのでしょうか

下記の図に示す様な事がしたいのですが、出来るのでしょうか。
html文の回答をお願いします。

宜敷くお願いします。

質問者からの補足コメント

• 

  質問①
  下記は枠の色とフォントの大きさを指定しているのでしょうか。、
  border: solid green 3px;
  
  質問②
  下記は、背景の円若しくは楕円をしているのでしょうか。多分に次の数
  値が円と楕円の何らかの形状に影響すると思いますが。この数字の値と
  言うのはどう図形に影響をするのでしょうか。
  border-radius: 50%;
  
  質問③
  端的に1に○を付与した①の部分のみをhtmlで書くとすると、cssも含め
  て一つのhtml文に直すとなると、htmlの文はどうなるのでしょうか。
  
  質問④
  今回は、単に一つの○だけでしたがこれに、二重丸とか三重丸とかを付
  与すると言う事は出来るのでしょうか。

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/12/29 13:39

No.4 ベストアンサー 回答者： t_fumiaki 回答日時： 2016/12/29 14:51

●CSS（便宜的にhtmlの</head>の上に入れる)

<style type="text/css">
.mark {
border: solid green 2px; ←境界を実線、緑、幅2px
border-radius: 60%;←四隅の角を丸くする　大きさ60%
width: 20px;
height: 20px;
margin: auto;

}
table {background-color:#000000;}
th,td {text-align:center; vartical-align:middle; background-color:#ffffff; width:30px; height:30px;}
</style>

●html
<table cellspacing="1" border="0">
<tr>
<th>日</th><th>月</th><th>日</th><th>水</th><th>木</th><th>金</th><th>土</th>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td><div class="mark">1</div></td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td>
</tr>
<tr>
<td>18</td><td>19</td><td>20</td><td>21</td><td><div class="mark">22</div></td><td>23</td><td>24</td>
</tr>
<tr>
<td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td>
</tr>
</table>

tableのセル罫線を表示するのは大変難しく。
table全体を黒く塗りつぶし、セルを白く塗りつぶす事で、罫線の様に見せている。

この回答へのお礼

素早い回答有難う御座います。

勉強になりました。奥が深いですね。私は未だ本格的なスタイルシート
は作った事は有りません。と言うのは、必要に狭まれる事が無かった物
ですから。

これを機会にして挑戦してみたいと思います。大変有難う御座いました。

お礼日時：2016/12/29 16:07

No.3 回答者： karamarimo 回答日時： 2016/12/29 14:25

補足

cssのプロパティとかそのパラメーターについて知りたいなら、
今度からこういうサイトで調べて見るといいと思いますよ。
日本語
http://www.htmq.com/style/index.shtml
英語（おすすめ）
http://www.w3schools.com/cssref/default.asp

① そうですね。solidは線の見た目、greenは色、3pxは線幅です。
solidは普通の線で他にはdotted(点線)とかあります。

② 各辺について、両端の頂点から長さ50%の部分を丸く(楕円を4等分した形)する、という意味です。
50%とすることで辺全体が丸みを帯び、結果的に楕円となります。
例えば20%とすれば辺の両端20%は丸くなり、真ん中の60%は直線になります。
パーセントでなく直接4pxのように長さを指定できます。

楕円の縦横比をかえたければ width と height を変えるだけです。

③ さっきのdiv以外を全部取り除くだけです。
http://codepen.io/anon/pen/ZBgBEw
(さっきはtdでtext-alignを設定していたので子要素のdivにもそれが
伝播していましたが、それを移動しました。
text-aglignはテキストの右寄せ・中央寄せ・左寄せを指定するものです。)

④ solidの代わりにdoubleとすれば二重丸になります。(一本あたりは細くなる)
三重以上はないので、このdivを何重にか入れ子にするぐらいしか方法はないと思います。
http://codepen.io/anon/pen/zogoxV
(paddingを設定することで線の間に隙間を空けています)

私のcssがなんか行き当たりばったりなのは見逃してください。

No.2 回答者： karamarimo 回答日時： 2016/12/29 13:20

その数字をspanかdivかなんかで囲ってそれにborderを設定すればいいと思いますよ。

サンプル
http://codepen.io/anon/pen/VmoKxY

この回答へのお礼

有難うございます。

cssの中の文が分からないのですが。

すみません。教えて下さい。

.mark {
border: solid green 3px;
border-radius: 50%;
width: 20px;
height: 20px;
margin: auto;
}

お礼日時：2016/12/29 13:25

No.1 回答者： nitto3 回答日時： 2016/12/29 13:11

数字も色が変わるけど文字の㉒を使えばいい。

バックグラウンドに○を入れてその上に数字を書けばいい。
など。

この回答へのお礼

早速の回答、有難うございます。

質問を読んでいますか。

それは、質問には答えていないですね。
html文で回答願いますと言うのが、頭に入っていますか。

再度、回答の提出をお願いします。
回答される方は、質問の趣旨を理解してから回答願います。

この様な回答は回答者の自己満足が目立ち非常に
迷惑します。ヒントだとか、解説を期待をしている
わけではありません。求めているのは、html文です。
勘違いしないで下さい。


宜しく、お願いします。

お礼日時：2016/12/29 13:21