装飾がなく、文章だけの記事は読みにくくなります。
何か装飾で囲ったり、表を入れることによって読みやすさが断然変わります。
コードにあるこちらのマークをクリックして、「Ctrl+C」でコードをコピーできます。
表作成
表作成コードを使うと、見る端末によって画面サイズぴったりに変わってくれます。
文字中央寄せで、2列の表を作れます。
| 1列目名 | 2列目名 |
|---|---|
| 11 | 21 |
| 12 | 22 |
| 13 | 23 |
| 14 | 24 |
| 15 | 25 |
| 16 | 26 |
| 17 | 27 |
| 18 | 28 |
| 19 | 29 |
| 20 | 30 |
文字中央寄せで、2列のコードはこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <caption>表タイトル</caption> <tr><th>1列目名</th><th>2列目名</th></tr> <tr><td align="center">11</td><td align="center">21</td></tr> <tr><td align="center">12</td><td align="center">22</td></tr> <tr><td align="center">13</td><td align="center">23</td></tr> <tr><td align="center">14</td><td align="center">24</td></tr> <tr><td align="center">15</td><td align="center">25</td></tr> <tr><td align="center">16</td><td align="center">26</td></tr> <tr><td align="center">17</td><td align="center">27</td></tr> <tr><td align="center">18</td><td align="center">28</td></tr> <tr><td align="center">19</td><td align="center">29</td></tr> <tr><td align="center">20</td><td align="center">30</td></tr> </table> |
文字は左寄せで、3列の表を作れます。
| 1列目名 | 2列目名 | 3列目名 |
|---|---|---|
| 11 | 21 | 31 |
| 12 | 22 | 32 |
| 13 | 23 | 33 |
| 14 | 24 | 34 |
| 15 | 25 | 35 |
| 16 | 26 | 36 |
| 17 | 27 | 37 |
| 18 | 28 | 38 |
| 19 | 29 | 39 |
| 20 | 30 | 40 |
文字は左寄せで、3列の表のコードはこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <caption>表タイトル</caption> <tr><th>1列目名</th><th>2列目名</th><th>3列目名</th></tr> <tr><td>11</td><td>21</td><td>31</td></tr> <tr><td>12</td><td>22</td><td>32</td></tr> <tr><td>13</td><td>23</td><td>33</td></tr> <tr><td>14</td><td>24</td><td>34</td></tr> <tr><td>15</td><td>25</td><td>35</td></tr> <tr><td>16</td><td>26</td><td>36</td></tr> <tr><td>17</td><td>27</td><td>37</td></tr> <tr><td>18</td><td>28</td><td>38</td></tr> <tr><td>19</td><td>29</td><td>39</td></tr> <tr><td>20</td><td>30</td><td>40</td></tr> </table> |
| ■■■ | ●●● |
| ■■■ | ●●● |
| ■■■ | ●●● |
| ■■■ | ●●● |
| ■■■ | ●●● |
| ■■■ | ●●● |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<table style="height: 216px; width: 100%; border-collapse: collapse; border-style: double; border-color: #ffabab;"> <tbody> <tr style="height: 36px;"> <td style="width: 30%; height: 36px; border-color: #faf7f7; background-color: #ffabab; border-style: dotted;"><span class="white" style="font-size: 16px;">■■■</span></td> <td style=#"width: 70%; height: 36px; border-color: #ffabab; border-style: dotted;#">●●●</span></td> </tr> <tr style="height: 36px;"> <td style="width: 30%; height: 36px; border-color: #faf7f7; background-color: #ffabab; border-style: dotted;"><span class="white" style="font-size: 16px;">■■■</span></td> <td style=#"width: 70%; height: 36px; border-color: #ffabab; border-style: dotted;#">●●●</td> </tr> <tr style="height: 36px;"> <td style="width: 28.9352%; height: 36px; border-color: #faf7f7; background-color: #ffabab; border-style: dotted;"><span class="white" style="font-size: 16px;">■■■</span></td> <td style=#"width: 70%; height: 36px; border-color: #ffabab; border-style: dotted;#">●●●</span></td> </tr> <tr style="height: 36px;"> <td style="width: 30%; height: 36px; border-color: #faf7f7; background-color: #ffabab; border-style: dotted;"><span class="white" style="font-size: 16px;">■■■</span></td> <td style=#"width: 70%; height: 36px; border-color: #ffabab; border-style: dotted;#">●●●</span></td> </tr> <tr style="height: 36px;"> <td style="width: 30%; height: 36px; border-color: #faf7f7; background-color: #ffabab; border-style: dotted;"><span class="white" style="font-size: 16px;">■■■</span></td> <td style=#"width: 70%; height: 36px; border-color: #ffabab; border-style: dotted;#">●●●</span></td> </tr> <tr style="height: 36px;"> <td style="width: 30%; height: 36px; border-color: #faf7f7; background-color: #ffabab; border-style: dotted;"><span class="white" style="font-size: 16px;">■■■</span></td> <td style=#"width: 70%; height: 36px; border-color: #ffabab; border-style: dotted;#">●●●</span></td> </tr> </tbody> </table> |
枠
開始タグ
|
1 |
<div style="border: 5px dashed #ff00ff; padding: 10px; border-radius: 10px;">テキスト入力 |
終了タグ
|
1 |
</div> |
あいうえお
かきくけこ
さしすせそ
かきくけこ
さしすせそ
|
1 2 3 4 |
<div style="padding:1em 3%;border:1px solid #FF99CC;background-color:#FFE2E8;"> あいうえお かきくけこ さしすせそ</div> |
★ここに文字を入力してください。
|
1 |
<div style="border: 5px solid #87cefa; padding: 10px; border-radius: 0px; background: ##ffffff;">★ここに文字を入力してください。</div> |
★ここに文字を入力してください。
|
1 |
<div style="border: 10px double #66cdaa; padding: 10px; border-radius: 0px; background: ##ffffff;">★ここに文字を入力してください。</div> |
□タイトル
★ここに文字を入力してください。
|
1 2 |
<div style="border: 1px solid #ffb6c1; padding: 5px; border-radius: 0px; background: #ffb6c1;">□タイトル</div> <div style="border: 1px solid #ffb6c1; padding: 10px; border-radius: 0px; background: #ffffff;">★ここに文字を入力してください。</div> |
□タイトル
★ここに文字を入力してください。
|
1 2 |
<div style="border: 1px solid #40e0d0; padding: 5px; border-radius: 10px 10px 0 0; background: #40e0d0;">□タイトル</div> <div style="border: 1px solid #40e0d0; padding: 10px; border-radius: 0 0 10px 10px; background: #ffffff;">★ここに文字を入力してください。</div> |
□タイトル
★ここに文字を入力してください。
|
1 2 |
<div style="height: 12px;"><span style="background: #ffa500; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px;">□タイトル</span></div> <div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #ffa500;">★ここに文字を入力してください。</div> |
最初の「＃」の後ろが色のコードです。
最初の「＃」が枠の色で、後ろにある「＃」は背景の色です。
色のコードは以下を参考にしてください。
⇒原色大辞典(https://www.colordic.org/)
最後まで読んで頂いてありがとうございました。
