More than 3 years have passed since last update.

簡単なHTML＆CSS を描いてみた①

HTML,CSS

Last updated at 2021-03-09Posted at 2021-03-09

##今回の経緯##
・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や要素の対応関係、タグ付など戸惑うことが多かった。
また、画像の貼り付けに関してはしっかりディレクトリ構造を理解する必要があると感じた。
今後もう少しこのデータを元にアウトプット作業を続け、より理解を深めたい。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up