100題テンプレート
説明や日付など

01あめんぼ赤いなアイウエオ
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26浮藻に子蝦もおよいでる
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51柿の木、栗の木、カキクケコ
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76啄木鳥こつこつ枯れけやき
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
100題用テンプレートです。（使用規約）
調整すれば何題でも。お好みで。数字もいらなければ消してください～。
横幅1356px(環境により前後します)以上の環境では50題ずつの2段、以下は25題ずつの4段になります。

素材（葉っぱ）はアンティーク パブリックドメイン 画像素材さまよりお借りし、加工しました。こちらからお持ち帰り出来ます。別のものに差し替えても◎


WEB上だと左上から右下に向かって読む方が目線的に自然だと思うのでこの向きですが、正しい縦書きの順（右から左に）が良い場合は
「writing-mode: vertical-lr;」 → 「writing-mode: vertical-rl;」
「flex-direction: row;」　→　「flex-direction: row-reverse;」
にすると逆向きになります。

ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テンプレート03</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
*{ margin: 0 0; padding: 0 0; box-sizing:border-box; }
body{ color: #333; font-size: 11px; font-family: 'メイリオ', 'Meiryo',  '游ゴシック体', 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
header{ height: 113px; background: url('bg_reaf.png') no-repeat scroll 120px 0; padding: 40px 0 80px 30px; }
article{ max-width: 1500px; margin: 0 auto 50px; display: flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center; }
section{ border: 0px solid #ccc; width: 666px; line-height: 26.6px; letter-spacing: 2.2px; margin: 30px 0; -ms-writing-mode: tb-lr; -webkit-writing-mode:vertical-lr; -o-writing-mode: vertical-lr; writing-mode: vertical-lr; }
section span{ padding: 0 0 13px; color: #ccc; font-size: 1.1em; -ms-text-combine-horizontal: all; text-combine-upright: all; }
h1{ font-size: 11px; letter-spacing: 10px; border-left: 10px solid #333; padding: 1px 14px; line-height: 17px; }
h1 span{ font-size: 0.9em; color: #aaa; font-weight: normal; letter-spacing: 0.2px; }
a{ corlor: ccc;}
}
</style>
</head>
<body>
<header>
<h1>100題テンプレート<br><span>説明や日付など</span></h1>
</header>
<article>
<section>
<span>01</span><br>
<span>02</span><br>
<span>03</span><br>
<span>04</span><br>
<span>05</span><br>
<span>06</span><br>
<span>07</span><br>
<span>08</span><br>
<span>09</span><br>
<span>10</span><br>
<span>11</span><br>
<span>12</span><br>
<span>13</span><br>
<span>14</span><br>
<span>15</span><br>
<span>16</span><br>
<span>17</span><br>
<span>18</span><br>
<span>19</span><br>
<span>20</span><br>
<span>21</span><br>
<span>22</span><br>
<span>23</span><br>
<span>24</span><br>
<span>25</span><br>
</section>
<section>
<span>26</span><br>
<span>27</span><br>
<span>28</span><br>
<span>29</span><br>
<span>30</span><br>
<span>31</span><br>
<span>32</span><br>
<span>33</span><br>
<span>34</span><br>
<span>35</span><br>
<span>36</span><br>
<span>37</span><br>
<span>38</span><br>
<span>39</span><br>
<span>40</span><br>
<span>41</span><br>
<span>42</span><br>
<span>43</span><br>
<span>44</span><br>
<span>45</span><br>
<span>46</span><br>
<span>47</span><br>
<span>48</span><br>
<span>49</span><br>
<span>50</span><br>
</section>
<section>
<span>51</span><br>
<span>52</span><br>
<span>53</span><br>
<span>54</span><br>
<span>55</span><br>
<span>56</span><br>
<span>57</span><br>
<span>58</span><br>
<span>59</span><br>
<span>60</span><br>
<span>61</span><br>
<span>62</span><br>
<span>63</span><br>
<span>64</span><br>
<span>65</span><br>
<span>66</span><br>
<span>67</span><br>
<span>68</span><br>
<span>69</span><br>
<span>70</span><br>
<span>71</span><br>
<span>72</span><br>
<span>73</span><br>
<span>74</span><br>
<span>75</span><br>
</section>
<section>
<span>76</span><br>
<span>77</span><br>
<span>78</span><br>
<span>79</span><br>
<span>80</span><br>
<span>81</span><br>
<span>82</span><br>
<span>83</span><br>
<span>84</span><br>
<span>85</span><br>
<span>86</span><br>
<span>87</span><br>
<span>88</span><br>
<span>89</span><br>
<span>90</span><br>
<span>91</span><br>
<span>92</span><br>
<span>93</span><br>
<span>94</span><br>
<span>95</span><br>
<span>96</span><br>
<span>97</span><br>
<span>98</span><br>
<span>99</span><br>
<span>100</span><br>
</section>
</article>
</body>
</html>