Fellica PM Site 0712

2022年8月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

10 August

コーディング演習（Flowershop）

使用テキスト

フラワーショップ：華屋
あなたに世界中のお花をお届けします。

ホーム
華屋について
店舗案内
ギフト
お問合せ

flower合成画像

ブーケセレクション

flower01画像
ブーケ01
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
詳細を見る

flower02画像
ブーケ02
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
詳細を見る

flower3画像
ブーケ03
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
詳細を見る

使用画像

css reset後イメージ

html(08/17)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フラワーショップ：華屋</title>
<meta name="description" content="フラワーショップ：華屋はあなたに世界中のお花をお届けします。">
<meta name="viewport" content="width=device-width">
<link href="css/style0.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
</head>
<body>

<header>
<div class="container">
<h1>フラワーショップ：華屋</h1>
<p>あなたに世界中のお花をお届けします。</p>
</div>
</header>

<!-- Navigation -->
<nav class="pcnav">
<ul class="container">
<li><a href="#">ホーム</a></li>
<li><a href="#">華屋について</a></li>
<li><a href="#">店舗案内</a></li>
<li><a href="#">ギフト</a></li>
<li><a href="#">お問合せ</a></li>
</ul>
</nav>

<!-- スマホ部品(9/13追加) -->
<div class="btn">
<i class="fas fa-leaf"></i>
</div>
<nav class="spnav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">華屋について</a></li>
<li><a href="#">店舗案内</a></li>
<li><a href="#">ギフト</a></li>
<li><a href="#">お問合せ</a></li>
</ul>
</nav>

<!--キービジュアル-->
<p class="keyVis">
<img src="img/flower.png" alt="花の一覧の画像">
</p>

<!-- ブーケセレクション -->
<main>

<section>
<h2>ブーケセレクション</h2>
<div class="container">
<section>
<a href="#">
<img src="img/flower01.jpg" alt="ブーケ01">
<h3>ブーケ01</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p class="more">詳細を見る</p>
</a>
</section>
<section>
<a href="#">
<img src="img/flower02.jpg" alt="ブーケ02">
<h3>ブーケ02</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p class="more">詳細を見る</p>
</a>
</section>
<section>
<a href="#">
<img src="img/flower03.jpg" alt="ブーケ03">
<h3>ブーケ03</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p class="more">詳細を見る</p>
</a>
</section>
</div><!--/.container-->
</section>

</main>

<!-- Footer -->
<footer>
<p><small>Copyright &copy; フラワーショップ：華屋 All rights reserved.</small></p>
</footer>    

</body>
</html>

<!DOCTYPE html>

<head>

<title>フラワーショップ：華屋</title>

</head>

<body>

<h1>フラワーショップ：華屋</h1>

<p>あなたに世界中のお花をお届けします。</p>

</div>

</header>

<li><a href="#">華屋について</a></li>

</ul>

</nav>

</div>

<ul>

<li><a href="#">華屋について</a></li>

</ul>

</nav>

</p>

<main>

<h2>ブーケセレクション</h2>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>

<p class="more">詳細を見る</p>

</a>

</section>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>

<p class="more">詳細を見る</p>

</a>

</section>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>

<p class="more">詳細を見る</p>

</a>

</section>

</div>

</section>

</main>

</footer>

</body>

</html>

指定校(header/nav/keyvisual)

css(08/19)

@charset "utf-8";

/*--Reset--*/
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
img{
max-width:100%;
}
body{
line-height: 1;
font-family:"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
text-align: center;
}
/* 共通css */
.container{
max-width:1000px;
margin:0 auto;
display: flex;
justify-content: space-between;
}
header,.keyVis,footer{
background:#fdd;
}
header,footer{
padding: 30px 0;
}
 .keyVis,main{
padding: 50px 0;
}

/* header */
header .container{
align-items: center;
}
h1{
color: #900;
background:
url(../img/logo.svg) no-repeat left center;
line-height: 50px;
padding-left:55px;
} 

/* Navigation */
nav{
padding: 20px 0;
}
nav li{
width:18%;
line-height: 50px;
}
nav a{
display: block;
border: 1px solid #900;
}
nav a:hover{
background:#fdd;
}

/* main content */
main h2{
color: #900;
margin-bottom: 20px;
}
main .container{
text-align: left;
}
main .container div{
width:calc(100% / 3);
}
main a{
display: block;
padding: 20px;
}
main a:hover{
background:#fdd;
}
main h3{
color: #900;
margin: 20px 0;
}
main a p:first-of-type{
margin-bottom: 20px;
line-height: 1.4;
}
.more{
 border: 1px solid #900;
background: #fff;
width:5em;
padding:10px 20px;
}

/*(09/13追加)*/
@media screen and (max-width:767px) {

/* Flex解除 */
.container{
display: block;
}

/* Header */
header{
padding: 10px 0;
}
h1{
width:fit-content;
margin: 0 auto;
}

.pcnav{
display: none;
}

/* スマホ部品 */
.btn{
display: block;  
line-height: 50px;
font-size: 35px;
color: #f77;
background: 
linear-gradient(#fff, #fcd);
}
.btn i{
text-shadow: 
1px 1px 1px #fff,
1px 1px 1px #fff,
-1px -1px 1px #900;
}
.spnav{
display: block;
position:absolute;
width:100%;
}
.spnav li{
line-height: 70px;
font-size: 24px;
}
.spnav a{
display: block;
color: #900;
border-bottom: 
1px solid #900;
background:
rgba(255, 230, 230, 0.9);
}
.spnav li:first-child a{
border-top: 1px solid #900;
}

/* 上下余白調整 */
 .keyVis,main{
padding: 20px 0;
}

/* ブーケ縦並び */
main .container section{
width:auto;
}
main .container section + section{
margin-top: 20px;
}
main a{
padding: 0;
}
/* 詳細を見る */
.more{
width:auto;
text-align: center;
background:#fdd;
padding:20px;
}

}

@media screen and (max-width:430px) {
    
h1{
font-size: 22px;
line-height: 40px;
padding-left:45px;
margin-bottom: 5px;
}

}