Skip to content

Instantly share code, notes, and snippets.

@remino
Created June 20, 2012 07:36
Show Gist options
  • Save remino/2958650 to your computer and use it in GitHub Desktop.
Save remino/2958650 to your computer and use it in GitHub Desktop.
How the weather has been this year in Japan
<!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">&#x2600;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
</tr>
<tr>
<td class="sunny">&#x2600;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
</tr>
<tr>
<td class="sunny">&#x2600;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
</tr>
<tr>
<td class="sunny">&#x2600;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
</tr>
<tr>
<td class="sunny">&#x2600;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</td>
<td class="cloudy">&#x2601;</td>
<td class="rain">&#x2602;</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