Created
February 9, 2014 02:28
-
-
Save bufferings/8893304 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>CSS Fizz Buzz</title> | |
<style> | |
#main li { | |
position: relative; | |
} | |
#main li:nth-child(3n):before { | |
content: "Fizz"; | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 80%; | |
background-color: white; | |
} | |
#main li:nth-child(5n):before { | |
content: "Buzz"; | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 80%; | |
background-color: white; | |
} | |
#main li:nth-child(15n):before { | |
content: "FizzBuzz"; | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 80%; | |
background-color: white; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>CSSだけでFizzBuzzしよう</h1> | |
<h2>ルール</h2> | |
<ul> | |
<li>CSSだけでFizzBuzzを行う</li> | |
<li>HTMLの変更不可。JavaScript含め別言語・別ファイルの使用不可</li> | |
</ul> | |
<h3>FizzBuzzとは</h3> | |
<ul> | |
<li>1〜100までの数字を書き出す(数字は任意の数。また今回は特別ルールで数字は最初に表示されている状態で実施)</li> | |
<li>3の倍数の時は数字の代わりに Fizz と表示する</li> | |
<li>5の倍数の時は数字の代わりに Buzz と表示する</li> | |
<li>3と5の倍数の時は数字の代わりに FizzBuzz と表示する</li> | |
</ul> | |
<ul id="main"> | |
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li> | |
<li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li> | |
<li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li> | |
<li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li> | |
<li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li> | |
<li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li> | |
<li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li> | |
<li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li> | |
<li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li> | |
<li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li> | |
</ul> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment