記述ポイント
- 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する
- lead文の幅と画像の幅を変更
@charset "UTF-8";
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
body {
background-color: #fff;
color: #333;
font-size: 16px;
font-family: "Noto Sans JP", sans-serif;
line-height: 1.0;
}
.container {
width: min(92%, 960px);
margin: 0 auto;
}
.header h1 {
display: flex;
justify-content: center;
width: 100%;
height: 50vh;
margin-bottom: 30px;
padding-top: 100px;
background: url(../img/00.webp) no-repeat center center;
background-size: cover;
color: #fff;
}
.lead {
width: 960px;
margin: 0 auto;
padding: 0 7em;
line-height: 1.6;
text-align: justify;
}
@media screen and (max-width: 767px) {
.lead {
width: 100%;
padding: 0 2em;
}
}
.main {
padding-top: 60px;
}
.attract {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 60px;
}
.attract > img {
width: 40%;
}
.attract:nth-last-of-type(even) {
flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
.attract {
display: block;
}
.attract > img {
width: 100%;
margin-bottom: 20px;
}
}
.text_block h2 {
margin-bottom: 20px;
padding-bottom: 6px;
border-bottom: 2px solid #66a2f2;
color: #cd4914;
}
.text_block p {
margin-bottom: 20px;
line-height: 1.7;
text-align: justify;
}
.text_block dl {
padding: 2em;
background-color: #e4f4f7;
border-radius: 8px;
line-height: 1.6;
}
.text_block dt {
font-size: 18px;
font-weight: bold;
}
.text_block dd {
margin-bottom: 10px;
}
.footer {
padding: 20px 0;
background-color: #000;
color: #fff;
text-align: center;
}
index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【コーディング練習】スペインの魅力</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<h1>スペインの魅力を巡る旅</h1>
<p class="lead">バルセロナのアントニ・ガウディの建築やセビリアの情熱的なフラメンコ、地元の美味しいタパスを楽しむことで、スペインの文化とアートに深く触れることができました。<br>各地での体験を通じて、心に残る思い出とともに、カメラマンとしての視点も広がる素晴らしい旅となりました。</p>
</header>
<main class="main">
<div class="container">
<section class="attract">
<img src="img/01.webp" alt="サグラダ・ファミリア">
<div class="text_block">
<h2>バルセロナのアートと建築</h2>
<p>バルセロナでは、アントニ・ガウディの傑作であるサグラダ・ファミリアを訪れ、その壮大さに圧倒されました。街中に点在するカラフルな建築物をカメラで捉えながら、独特のデザインや歴史的背景に触れることができ、アートの魅力を再確認しました。</p>
<dl>
<dt>サグラダ・ファミリアの壮大さ:</dt>
<dd>未完成の大聖堂の独特なデザインとその歴史的背景</dd>
<dt>グエル公園の色彩:</dt>
<dd>鮮やかなタイルと自然との調和が生み出す幻想的な景観</dd>
<dt>カサ・ミラの曲線美:</dt>
<dd>自然を模した流れるような形状と、内部の革新的な設計</dd>
</dl>
</div>
</section>
<section class="attract">
<img src="img/02.webp" alt="フラメンコ">
<div class="text_block">
<h2>スペインの味覚と交流</h2>
<p>旅の締めくくりには、地元のタパスやパエリアを味わい、スペインの豊かな食文化を体験しました。地元の人々との交流を通じて、温かい思い出が生まれ、私のカメラマンとしての視点も広がりました。スペインの旅は、心に残る素晴らしい経験となりました。</p>
<dl>
<dt>多様なタパスの種類:</dt>
<dd>地域ごとの特色あるタパスの紹介とその味わい</dd>
<dt>地元の居酒屋の雰囲気:</dt>
<dd>地元の人々との交流を楽しむアットホームな環境</dd>
<dt>タパスの食文化:</dt>
<dd>食事を通じての社交や、スペインの食文化の重要性</dd>
</dl>
</div>
</section>
<section class="attract">
<img src="img/03.webp" alt="パエリア">
<div class="text_block">
<h2>セビリアの文化と情熱</h2>
<p>セビリアでは、フラメンコの生演奏に心を奪われ、情熱的な踊りに魅了されました。また、アルカサルの美しい庭園を散策し、歴史的な雰囲気を楽しみました。カメラを片手に、これらの瞬間を記録し、セビリアの文化に深く触れることができました。</p>
<dl>
<dt>セビリアのフラメンコショー:</dt>
<dd>本場の情熱的なパフォーマンスとその魅力</dd>
<dt>フラメンコの歴史:</dt>
<dd>音楽とダンスの起源や文化的背景についての理解</dd>
<dt>観客との一体感:</dt>
<dd>パフォーマンス中の観客とのインタラクションや感情の共有</dd>
</dl>
</div>
</section>
</div>
</main>
<footer class="footer">
<p><small>© 田中景子</small></p>
</footer>
</body>
</html>
