【CSS】お天気パネル【HTML】
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>お天気パネル</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="weather">
<div class="today">
<div class="weather-icon">
<i class="wi wi-day-sunny"></i>
</div>
<div class="weather-detail">
<div class="current-temperature">22°</div>
<div class="name">晴れ</div>
<div class="temperature">
<span>27°</span>/<span>15°</span>
</div>
<div class="rainy-percent">5%</div>
</div>
</div>
<ul class="week">
<li class="day">
<div class="day-of-the-week">SUN</div>
<div class="weather-icon">
<i class="wi wi-day-sunny"></i>
</div>
<div class="temperature">
<span>25°</span>/<span>21°</span>
</div>
</li>
<li class="day">
<div class="day-of-the-week">MON</div>
<div class="weather-icon">
<i class="wi wi-cloud"></i>
</div>
<div class="temperature">
<span>22°</span>/<span>18°</span>
</div>
</li>
<li class="day">
<div class="day-of-the-week">TUE</div>
<div class="weather-icon">
<i class="wi wi-day-rain"></i>
</div>
<div class="temperature">
<span>17°</span>/<span>12°</span>
</div>
</li>
<li class="day">
<div class="day-of-the-week">WED</div>
<div class="weather-icon">
<i class="wi wi-rain"></i>
</div>
<div class="temperature">
<span>15°</span>/<span>10°</span>
</div>
</li>
<li class="day">
<div class="day-of-the-week">THU</div>
<div class="weather-icon">
<i class="wi wi-day-cloudy"></i>
</div>
<div class="temperature">
<span>15°</span>/<span>12°</span>
</div>
</li>
<li class="day">
<div class="day-of-the-week">FRI</div>
<div class="weather-icon">
<i class="wi wi-day-sunny"></i>
</div>
<div class="temperature">
<span>28°</span>/<span>21°</span>
</div>
</li>
</ul>
</div>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
body {
margin: 0;
padding: 20px;
}
.weather {
font-family: 'Open Sans Condensed', sans-serif;
background: linear-gradient(to bottom right, #04BACC, #68d5e0);
width: 480px;
font-size: 21px;
line-height: 1.5;
color: #fff;
}
.today {
padding: 40px 60px;
display: flex;
border-bottom: 1px solid #68d5e0;
}
.today .weather-icon {
font-size: 162px;
}
.today .weather-detail .current-temperature {
font-size: 92px;
}
.today .weather-detail {
padding-left: 75px;
}
.week {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.day {
flex-grow: 1;
padding: 21px 9px;
text-align: center;
border-right: 1px solid #68d5e0;
}
.day:last-child {
border-right: 0;
}
.day .weather-icon {
margin: 5px 0;
color: #01373d;
}
.day .temperature {
font-size: 16px;
}
