今回の経緯
・HTML&CSSの学習を始めて３日
progate初級編が終わったこともあり、
アウトプットがてら作成。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>HY洋菓子</title>
</head>
<body>
<div class="header">
<h1>洋菓子専門店HY 三重店</h1>
</div>
<div class="contents">
<img class="logo" src="https://illust.download/wp-content/uploads/download/christmas75mM8.jpg">
</div>
<div class="syokai">
<h2 class="syokai-text">洋菓子専門店HYにようこそ</h2>
<p>このページでは人気のケーキを紹介します</p>
</div>
<main class="main">
<h2>いちごショート</h2>
<div class="ichigo-short">
<img class="ichigo" src="cake01.png" >
</div>
<h2>モンブラン</h2>
<div class="monnburan">
<img class="kuri" src="cake02.jpg">
</div>
</main>
<footer>
<h1>Copyright ケーキハウス Co.,Ltd. All Rights Reserved</h1>
</footer>
</body>
</html>
CSS
syokai-text{
font-weight: bold;
text-align: center;
margin: 0px;
}
.syokai p {
text-align: center;
margin-top: 0px;
}
.syokai{
border-top: 1px solid orange ;
border-bottom: 1px solid orange;
padding-bottom: 0px;
height: 60px;
}
.main img{
width: 100%;
}
footer{
font-size: 7px;
text-align: center;
background-color: orangered;
padding: 10px;
}
感じたこと 課題
・progateでスラスラできても、実際作成してみるとdivや要素の対応関係、タグ付など戸惑うことが多かった。
また、画像の貼り付けに関してはしっかりディレクトリ構造を理解する必要があると感じた。
今後もう少しこのデータを元にアウトプット作業を続け、より理解を深めたい。