Created
June 20, 2012 07:36
-
-
Save remino/2958650 to your computer and use it in GitHub Desktop.
How the weather has been this year in Japan
This file contains hidden or 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 lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>天気情報</title> | |
<style type="text/css"> | |
body { | |
background: white; | |
color: black; | |
padding: 3em 0; | |
} | |
.weather-forecast { | |
text-align: center; | |
} | |
.weather-forecast h1 { | |
color: #c00; | |
font-family: serif; | |
font-size: 3em; | |
letter-spacing: 1em; | |
line-height: 1.5em; | |
margin: 0; | |
padding-left: 1em; | |
} | |
.weather-forecast h2 { | |
color: gray; | |
font-family: serif; | |
margin: 0; | |
} | |
.weather-forecast table { | |
border-spacing: 0; | |
border-collapse: collapse; | |
border: solid 1px silver; | |
margin: 1em auto; | |
width: auto; | |
} | |
.weather-forecast table td, | |
.weather-forecast table th { | |
border: solid 1px silver; | |
height: 70px; | |
margin: 0; | |
padding: 0; | |
text-align: center; | |
vertical-align: middle; | |
width: 90px; | |
} | |
.weather-forecast table td { | |
font-size: 2em; | |
} | |
.weather-forecast table th { | |
font-size: 1.5em; | |
font-weight: normal; | |
} | |
.weather-forecast .red { | |
color: #c00; | |
} | |
.weather-forecast .blue { | |
color: #00c; | |
} | |
.weather-forecast .sunny { | |
color: orange; | |
} | |
.weather-forecast .cloudy { | |
color: grey; | |
} | |
.weather-forecast .rain { | |
color: darkblue; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="weather-forecast"> | |
<h2>天気予報</h2> | |
<table> | |
<thead> | |
<tr> | |
<th>月</th> | |
<th>火</th> | |
<th>水</th> | |
<th>木</th> | |
<th>金</th> | |
<th class="blue">土</th> | |
<th class="red">日</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td class="sunny">☀</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
</tr> | |
<tr> | |
<td class="sunny">☀</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
</tr> | |
<tr> | |
<td class="sunny">☀</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
</tr> | |
<tr> | |
<td class="sunny">☀</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
</tr> | |
<tr> | |
<td class="sunny">☀</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
<td class="cloudy">☁</td> | |
<td class="rain">☂</td> | |
</tr> | |
</tbody> | |
</table> | |
<h1>何月</h1> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment