webクリエイター試験の勉強のため、htmlとcssの練習で作成しました。
No.1と同様に、写真を入れるエリアには白の領域で疑似imgを挿入。
figure、figcaptionの入力に慣れるのと、どのように表示されるかをしっかり理解するために作成。
作成日：2024年11月4日
作成時間：1時間
各ボタンをクリックすると、表示されているページ横（スマートフォンでは下）にソース、またはcssがテキスト形式で表示されるようにしています。
webクリエイター試験の勉強のため、htmlとcssの練習で作成しました。
No.1と同様に、写真を入れるエリアには白の領域で疑似imgを挿入。
figure、figcaptionの入力に慣れるのと、どのように表示されるかをしっかり理解するために作成。
作成日：2024年11月4日
作成時間：1時間
各ボタンをクリックすると、表示されているページ横（スマートフォンでは下）にソース、またはcssがテキスト形式で表示されるようにしています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="レシピを見ながら作れる、初心者にもオススメのレシピサイト"> <title>誰でも作れる簡単レシピ | トップページ</title> <link rel="stylesheet" href="style2.css"> </head> <body> <header id="top"> <h1><a href="sample2.html">簡単レシピで簡単お料理</a></h1> </header> <nav> <ul> <li><a href="#">レシピ一覧</a></li> <li><a href="#">レシピ詳細</a></li> </ul> </nav> <h2>共有レシピのご紹介</h2> <main id="container"> <article id="main"> <section> <div class="main_about"> <figure> <a href="#"><div class="img_area"></div> <figcaption>肉じゃが<br>１５分で簡単レシピ</a></figcaption> </figure> <figure> <a href="#"><div class="img_area"></div> <figcaption>野菜スープ<br>お野菜たっぷりのスープです</a></figcaption> </figure> <figure> <a href="#"><div class="img_area"></div> <figcaption>野菜サラダ<br>野菜を切って添えるだけ、３０秒で出来上がり！</a></figcaption> </figure> </div> <div class="main_about"> <figure> <a href="#"><div class="img_area"></div> <figcaption>手抜き餃子<br>皮はお店で、タネは自分で！</a></figcaption> </figure> <figure> <a href="#"><div class="img_area"></div> <figcaption>手抜きピザ<br>下地はお店で、具材は乗せるだけ！</a></figcaption> </figure> <figure> <a href="#"><div class="img_area"></div> <figcaption>ラーメン<br>簡単ラーメン、１０分でさくっと作れます。</a></figcaption> </figure> </div> </section> <section> <h3>サイト更新情報</h3> <ul> <li><time datetime="2024-11-03">2024年11月3日</time>、<a href="#">レシピ一覧</a>にメニューを追加しました。</li> <li><time datetime="2024-10-30">2024年10月30日</time>、<a href="#">トップページ</a>を更新しました。</li> <li><time datetime="2024-10-24">2024年10月24日</time>、<a href="#">レシピ詳細</a>を更新しました。</li> </ul> </section> </article> <div id="sub"> <p><a href="#">スタッフのブログ</a></p> <p>スタッフのYouTube</p> <a href="https://www.youtube.com"><div class="img_area02"></div></a> </div> </main> <footer> <p>簡単レシピの共有サイトはMKB Project</p> <ul> <li><a href="#">企業概要</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">プライバシーポリシー</a></li> </ul> <div class="sns_area"> <a href="#"><div class="img_area03"></div></a> <a href="#"><div class="img_area03"></div></a> </div> <small><a href="top">copyright © 2024 MKB Project</a></small> </footer> </body> </html>
@charset "UTF-8";
body {
margin: 0 auto;
max-width: 1000px;
font-family: Arial, serif;
background-color: #f7dc6f;
color: #333333;
}
* {
box-sizing: border-box;
}
h1,h2,h3,h4 {
font-family: Georgia, serif;
text-align: center;
color: #ff5733;
}
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #aed6f1;
}
h1 a:hover {
text-decoration: none;
color: #aed6f1;
}
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
padding: 0;
}
nav ul li {
margin: 0 25px;
}
#container {
display: flex;
justify-content: space-evenly;
border-top: 1px solid #ff5733;
border-bottom: 1px solid #ff5733;
padding: 25px 0 0 0;
}
#main {
width: 80%;
margin: 0 10px 0 0;
}
.main_about {
display: flex;
justify-content: space-evenly;
}
figure {
width: 300px;
}
.img_area {
max-width: 300px;
height: 200px;
background-color: #ffffff;
}
#main ul {
list-style-type: none;
padding: 0;
}
#main ul li {
border-top: 1px dotted #ff5733;
padding: 10px 0;
margin: 0 25px;
}
#main ul li a {
font-weight: bold;
}
#sub {
width: 20%;
}
footer {
text-align: center;
padding: 0 0 25px 0;
}
footer ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
}
footer ul li {
margin: 0 25px;
}
footer div {
margin: 25px 0;
}
.img_area02 {
width: 200px;
height: 150px;
background-color: #fff;
}
.sns_area {
display: flex;
justify-content: center;
}
.img_area03 {
width: 50px;
height: 50px;
background-color: #fff;
margin: 0 10px;
}
/* メディアここから */
@media (max-width: 768px) {
nav {
margin: 0;
}
nav ul {
flex-direction: row;
align-items: center;
gap: 10px; /* リスト間の余白 */
}
#container {
flex-direction: column;
align-items: center; /* 中央揃え */
}
#main, #sub {
width: 100%; /* 幅を100%に設定 */
margin: 0 auto; /* 余白をなくす */
padding: 10px;
}
.main_about {
display: flex;
flex-direction: column;
align-items: center;
}
footer ul {
flex-direction: column;
align-items: center;
gap: 10px; /* リスト間の余白 */
}
.sns_area {
display: flex;
justify-content: center;
}
}
/* レスポンシブここまで */