HTML記述例
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>【コーディング練習】FARM CAPYZOU</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<h1><img src="img/logo.png" alt="FARM CAPYZOU"></h1>
<button type="button" class="btn">
<i class="fa fa-bars"></i>
<i class="fa fa-times"></i>
</button>
<nav class="gnav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<div class="container">
<main class="main-content">
<article>
<h2>ファームの1日</h2>
<p class="postdate">
<time datetime="2022-07-08T12:03" class="datetime">
2021年7月8日12時3分
</time>
</p>
<p class="eyecatch">
<img src="img/eyecatch.png" alt="カピぞうが農園にいる絵">
</p>
<section class="timeline">
<h3>6:00～<br>にんじんの収穫と朝ごはん</h3>
<p>朝は6時ごろに起きています。いつまでも布団にくるまっていたいけれど、えいや！と頑張って起きます。<br>外に出て、まずはおひさまに「おはようございます」とご挨拶。</p>
<p>
その後、育ったにんじんを収穫します。<br>
形が悪いものは、ぼくが朝食として食べています。<br>
収穫しながら朝ごはんを済ませられるので、とても効率的なのです！<br>
</p>
<figure>
<img src="img/carrots.png" alt="形の悪いにんじんの絵">
<figcaption>形が悪くてぼくが食べたにんじんさんたち</figcaption>
</figure>
</section>
<section class="timeline">
<h3>8:30～12:30<br>スーパーや道の駅への出荷</h3>
<p>採ったにんじんを産直店へ運びます。ここが一番の労働かもしれません。<br>そろそろリヤカーではなく、電気で動く車を買おうかなと思っているところです。</p>
</section>
<section class="timeline">
<h3>12:30～18:00<br>畑作業と夜ごはん</h3>
<p>にんじんの様子を見ながら、お水をあげたり、虫を駆除したり、カバーをかけたりします。<br>今はにんじんがメインですが、将来的にはたくさんの野菜を育てたいので今その準備もしています。</p>
</section>
<section class="timeline">
<h3>18:30～<br>お風呂・就寝</h3>
<p>お風呂にゆっくり入った後、眠ります。お布団の中は天国です。</p>
</section>
</article>
</main>
<aside class="sidebar">
<div class="categoryNav">
<h2>Category</h2>
<ul>
<li><a href="#">農家の日常(4)</a></li>
<li><a href="#">農家のノウハウ(5)</a></li>
<li><a href="#">カピぞうレシピ(2)</a></li>
<li><a href="#">農家の経営(2)</a></li>
</ul>
</div>
<div class="recentNav">
<h2>Recent Articles</h2>
<ul>
<li><a href="#">温室栽培での注意トップ10</a></li>
<li><a href="#">虫の駆除方法を現役農家がレクチャーします</a></li>
<li><a href="#">お家でもできる！プランター栽培のポイント</a></li>
<li><a href="#">簡単にんじん料理をご紹介！</a></li>
<li><a href="#">農業って食べていけるの？気になる年収を大公開</a></li>
<li><a href="#">はじめまして。カピぞうの紹介です</a></li>
</ul>
</div>
<p class="banner"><a href="#"><img src="img/side_banner.png" alt="オンラインショップバナー"></a></p>
</aside>
</div>
<footer class="footer">
<p><small>© 2021 FARM CAPYZOU</small></p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('.btn').on('click', function () {
$(this).toggleClass('click');
$('.gnav').slideToggle();
});
$('.gnav a').on('click',function(){
$('.gnav').slideToggle();
$('.btn').toggleClass('click');
});
});
</script>
</body>
</html>
@charset "URF-8";
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
body {
background-image: url(../img/bg.png);
color: #333;
font-size: 16px;
font-family:
"Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
line-height: 1.0;
}
.container {
padding: 20px 0;
width: min(90%, 960px);
margin: 0 auto;
}
.main-content {
margin-bottom: 24px;
padding: 20px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 280px;
gap: 30px;
}
.main-content {
padding: 40px;
background-color: #fff;
border-radius: 16px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
}
.sidebar {
max-width: 280px;
}
}
.header h1 {
width: 200px;
margin: 20px auto 16px;
}
@media screen and (min-width: 768px) {
.header h1 {
width: 320px;
}
}
.btn {
position: absolute;
right: 10px;
top: 50px;
width: 50px;
height: 50px;
overflow: hidden;
padding: 6px;
border: none;
background-color: transparent;
color: #888888;
font-size: 32px;
cursor: pointer;
z-index: 1000;
}
.click {
display: block;
}
.click i:first-child {
display: none;
}
@media screen and (min-width: 768px) {
button {
display: none;
}
}
.gnav {
position: absolute;
left: 0;
top: 130px;
width: 100%;
background-color: rgba(253, 245, 233, .8);
display: none;
}
.gnav ul {
border-top: 1px solid #7c5d48;
}
.gnav li {
color: #7c5d48;
font-size: 18px;
font-weight: 700;
text-align: center;
}
.gnav a {
display: block;
padding: 14px 0 12px;
border-bottom: 1px solid #7c5d48;
}
@media screen and (min-width: 768px) {
.gnav {
display: block;
position: static;
}
.gnav ul {
display: flex;
justify-content: center;
margin: 0 auto 24px;
border-top: 2px solid #7c5d48;
border-bottom: 2px solid #7c5d48;
}
.gnav li {
color: #7c5d48;
font-size: 22px;
font-weight: 700;
}
.gnav a {
display: block;
padding: 14px 20px 12px;
border-bottom: 0;
}
.gnav a:hover {
text-decoration: underline double;
}
}
.main-content h2 {
margin-bottom: 10px;
font-size: 24px;
text-align: center;
line-height: 1.2;
}
.postdate {
margin-bottom: 30px;
text-align: center;
}
.datetime {
display: inline-block;
padding: 13px 25px 12px 20px;
background-color: #79b25e;
border-radius: 0 0 22px 22px;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.eyecatch {
margin-bottom: 30px;
}
.main-content h3 {
margin-bottom: 16px;
padding: 20px 10px 6px 48px;
background: url(../img/h2_icon.png) no-repeat left bottom;
border-bottom: 2px solid #6ab547;
color: #7c5d48;
font-size: 24px;
font-weight: normal;
}
.main-content h3::first-line {
color: #cb4b1c;
font-size: 18px;
line-height: 1.5;
}
.timeline {
margin-bottom: 20px;
}
.timeline img {
margin: 16px 0 8px;
}
.timeline figcaption {
font-size: 14px;
text-align: center;
}
.timeline p {
line-height: 1.6;
}
@media screen and (min-width: 768px) {
.main-content h2 {
font-size: 34px;
}
.main-content h3 {
font-size: 28px;
font-weight: 600;
}
}
.categoryNav, .recentNav {
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
padding: 24px 28px;
margin-bottom: 24px;
}
.sidebar h2 {
margin-bottom: 18px;
font-size: 22px;
font-weight: bold;
color: #7c5d48;
}
.categoryNav ul {
margin-left: 30px;
}
.categoryNav li {
list-style: disc;
line-height: 2.0;
}
.recentNav li {
padding: 20px 0 20px;
border-bottom: 1px dotted #000;
line-height: 1.5;
}
.recentNav li:first-child {
padding-top: 10px;
}
.banner {
text-align: center;
}
@media screen and (min-width: 768px) {
.categoryNav, .recentNav {
margin-bottom: 24px;
padding: 32px;
background-color: #fff;
border-radius: 16px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
}
}
.footer {
padding: 16px 0 20px;
background-color: #523f2d;
}
.footer p {
color: #fff;
font-size: 15px;
text-align: center;
}
