スペインの魅力ページ作成
- 「スペイン観光ガイド」を応用
- 「section」の使い方を理解する
- 「dl (description list)」の使い方を理解する
- 「flex-direction: row-reverse;」の使い方を理解する
写真の選び方
- 文字を読んでもらえることが少ないため、画像だけでも、「視線誘導」になるような画像選択とトリミングにしています
制作ポイント
- 「h1」の高さは、「70vh（viewport height）」で
- 「h1」の文字の位置は、画像の見える位置で適宜設定する
- 「main」は、内側の余白は「padding」で、外側の余白は「margin」で
【重要ポイント】section
- 「section」は、「h2」を伴って使うことが必須（h3以降は、順次挿入可能）
- 「section」は、「見出し＋本文＋箇条書き＋画像」などの段落として設定する
- レイアウトブロックタグ「div」の替わりに使うことは、禁止
【重要ポイント】display: flex
- 「親要素」に設定された「display: flex」により、すべての「子要素」は横並びになる
- 「見出し＋本文＋箇条書き＋画像」が横並びにしたくない場合は、レイアウトブロック要素「div」で囲む
- 「display: flex」は、「gap」値を指定することにより、シンプルな横並びが可能（幅は、自動的に均等割になる）
- 基本的には「左側のカラム幅」を指定するだけで、横並びのバランスは取れる
【注意ポイント】
- 「終了タグ」の位置を確認する（VS Code内で、開始タグの左横の三角記号で要素全体を畳んでみる）
テキスト
スペインの魅力を巡る旅
バルセロナのアントニ・ガウディの建築やセビリアの情熱的なフラメンコ、地元の美味しいタパスを楽しむことで、スペインの文化とアートに深く触れることができました。各地での体験を通じて、心に残る思い出とともに、カメラマンとしての視点も広がる素晴らしい旅となりました。
バルセロナのアートと建築
バルセロナでは、アントニ・ガウディの傑作であるサグラダ・ファミリアを訪れ、その壮大さに圧倒されました。街中に点在するカラフルな建築物をカメラで捉えながら、独特のデザインや歴史的背景に触れることができ、アートの魅力を再確認しました。
サグラダ・ファミリアの壮大さ: 未完成の大聖堂の独特なデザインとその歴史的背景
グエル公園の色彩: 鮮やかなタイルと自然との調和が生み出す幻想的な景観
カサ・ミラの曲線美: 自然を模した流れるような形状と、内部の革新的な設計
スペインの味覚と交流
旅の締めくくりには、地元のタパスやパエリアを味わい、スペインの豊かな食文化を体験しました。地元の人々との交流を通じて、温かい思い出が生まれ、私のカメラマンとしての視点も広がりました。スペインの旅は、心に残る素晴らしい経験となりました。
多様なタパスの種類: 地域ごとの特色あるタパスの紹介とその味わい
地元の居酒屋の雰囲気: 地元の人々との交流を楽しむアットホームな環境
タパスの食文化: 食事を通じての社交や、スペインの食文化の重要性
セビリアの文化と情熱
セビリアでは、フラメンコの生演奏に心を奪われ、情熱的な踊りに魅了されました。また、アルカサルの美しい庭園を散策し、歴史的な雰囲気を楽しみました。カメラを片手に、これらの瞬間を記録し、セビリアの文化に深く触れることができました。
セビリアのフラメンコショー: 本場の情熱的なパフォーマンスとその魅力
フラメンコの歴史: 音楽とダンスの起源や文化的背景についての理解
観客との一体感: パフォーマンス中の観客とのインタラクションや感情の共有
unsplash.com
unsplash.com
unsplash.com
unsplash.com
完成例
<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>
@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: 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;
}
.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;
}
.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;
}
