模写サイト
COFFEE / ストアサイト（カフェ）
スマホサイズとPCサイズ(完成図)
リセットCSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
全体のスタイル
全体のスタイル
<style>
html{
font-size: 100%;
}
body{
font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-size: 0.9rem;
line-height: 1.7;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
}
</style>
header
headerのhtml
<header id="header">
<nav>
<ul>
<li><a href="#menu">MENU</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#location">LOCATION</a></li>
</ul>
</nav>
<h1 class="site-title"><img src="https://code-step.com/demo/html/store/img/logo.svg" alt=""></h1>
</header>
<style>
.site-title {
text-align: center;
/*position: relative;は親要素の#header*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(1px 1px 10px #c0c0c0);
}
#header {
/*position: absolute;は子要素のh1.site-title*/
position: relative;
background-image: url('https://code-step.com/demo/html/store/img/mainvisual.jpg');
width: 100%;
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding: 20px 40px;
}
nav ul {
display: flex;
justify-content: flex-end;
}
nav li {
margin-left: 30px;
}
nav li a {
color: #fff;
font-weight: bold;
transition: all 0.3s ease;
filter: drop-shadow(1px 1px 2px #121212);
}
nav li a:hover {
color: #e03131;
}
</style>
section#menu
完成図
section_id="menu"のhtml
<section id="menu">
<div class="menu-img fixed-bg">
<h2 class="sec-title">MENU</h2>
</div>
<div class="menu-content wrapper">
<div class="menu-item">
<h3 class="item-title">COFFEE</h3>
<dl>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
{{-- -繰り- --}}
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
</dl>
</div>
<div class="menu-item">
<h3 class="item-title">FOOD</h3>
<dl class="food">
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
{{-- -繰り- --}}
</dl>
<h3 class="item-title">OTHER</h3>
<dl>
<dt>XXXXXXXX</dt>
<dd>¥500</dd>
{{-- -繰り- --}}
</dl>
</div>
</div>
</section>
スマホ
PCへのレスポンシブ
767以下
<style>
.wrapper {
max-width: 1000px;
padding: 30px 16px 60px 16px;
margin: 0 auto;
text-align: center;
}
#menu {
margin-top: 10px;
}
#menu .menu-img {
background-image: url('https://code-step.com/demo/html/store/img/menu.jpg');
/*absoluteは子要素のh3.sec-title*/
position: relative;
}
.fixed-bg {
/*div.menu-imgのheight*/
height: 94px;
/* スマホ時は背景をスクロールするように変更 */
background-attachment: scroll;
background-size: cover;
background-position: center;
}
.sec-title {
font-size: 2rem;
color: #fff;
filter: drop-shadow(1px 1px 10px #c0c0c0);
/*absoluteは親のdiv.menu-img*/
position: absolute;
top: 26%;
/*width:100%で親のdiv.menu-imgと同じ幅になる*/
/*left:0;right:0;でも同じ結果になる*/
width: 100%;
/*上の結果余白が生じてセンター揃えになる*/
text-align: center;
}
.item-title {
font-size: 1.25rem;
margin-bottom: 25px;
display: inline-block;
border-bottom: solid 6px #e03131;
}
#menu .menu-item dl {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
}
#menu .menu-item dt {
width: 87%;
text-align: left;
border-bottom: dotted 1px #000;
margin-bottom: 25px;
}
#menu .menu-item dd {
width: 13%;
text-align: right;
padding-top: 8px;
}
#menu .menu-item dl.food {
margin-bottom: 10px;
}
</style>
767以上
<style>
@media screen and (min-width: 767px) {
.wrapper {
padding: 90px 16px 150px 16px;
}
#menu {
margin-top: 20px;
}
.sec-title {
font-size: 4.5rem;
top: 30%;
}
.fixed-bg {
height: 300px;
/* PC時は背景を固定するように変更 */
background-attachment: fixed;
}
.item-title {
font-size: 2.5rem;
margin-bottom: 70px;
}
#menu .menu-content {
display: flex;
}
#menu .menu-item {
width: 50%;
padding: 0 45px;
}
#menu .menu-item dl {
margin-bottom: 0px;
}
#menu .menu-item:first-child {
border-right: solid 1px #000;
}
#menu .menu-item dl.food {
margin-bottom: 55px;
}
}
</style>
section#about
完成
既に設定したCSS
section_id="aboutのhtml
<section id="about">
<div class="about-img fixed-bg">
<h2 class="sec-title">ABOUT</h2>
</div>
<div class="about-content wrapper">
<div class="about-item">
<h3 class="item-title">COFFEE</h3>
<ul>
<li>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</li>
<li>
<!-- 上と同じ -->
</li>
<li>
<!-- 上と同じ -->
</li>
<li>
<!-- 上と同じ -->
</li>
</ul>
<a class="Btn" href="#"><span>Read More</span></a>
</div>
</div>
</section>
追加CSS .sec-title{ position:absolute }のrelativeは#about .about-imgになる。
②のスタイルを以下に変更すると
レスポンシブ設定
liが50%なので完全にマージンは０。余白はliのpadding:2%;
#about
<style>
#about {
margin-top: 20px;
}
#about .about-img {
background-image: url('https://code-step.com/demo/html/store/img/about.jpg');
/*absoluteは子要素のh2.sec-title{ABOUT}*/
position: relative;
}
#about ul {
margin-bottom: 40px;
}
#about li {
line-height: 2;
text-align: left;
padding: 2%;
}
.Btn {
margin: 0 auto;
display: table;
padding: 10px 50px;
position: relative;
}
.Btn::before {
content: '';
width: 15%;
height: 30%;
position: absolute;
top: 0;
left: 0;
border-top: 3px solid #f0001f;
border-left: 3px solid #f0001f;
transition: 0.5s;
}
.Btn::after {
content: '';
position: absolute;
width: 15%;
height: 30%;
bottom: 0;
right: 0;
border-bottom: 3px solid #f0001f;
border-right: 3px solid #f0001f;
transition: 0.5s;
}
.Btn:hover::before {
width: 100%;
height: 100%;
}
.Btn:hover::after {
width: 100%;
height: 100%;
}
@media screen and (min-width: 767px) {
#about ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#about li {
width: 50%;
}
}
</style>
section#location
完成図 スマホもPCも完全に同じ
section_id="location"
<section id="location">
<div class="location-img fixed-bg">
<h2 class="sec-title">LOCATION</h2>
</div>
<div class="location-content wrapper">
<div class="location-item">
<h3 class="item-title">OUR STORE</h3>
<div class="item-map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d13123.424218274253!2d135.514589058137!3d34.683582270400244!3m2!1i1024!2i768!4f13.1!2m1!1z5aSn6Ziq5Z-O!5e0!3m2!1sja!2sjp!4v1642362333213!5m2!1sja!2sjp"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="item-info">
<p>
X-XX-XX, Ebisuminami, Shibuya-ku, Tokyo 150-0022<br>
東京都渋谷区恵比寿南X-XX-XX
</p>
<p>
Open 7 days a Week<br>
9:00am to 10:00pm
</p>
<p>Tel : XX-XXXX-XXXX</p>
</div>
</div>
</div>
</section>
スマホとPCのスタイル 黄色のsec-titleと水色のitem-titleはすでに設定済み
#location
<style>
#location {
margin-top: 20px;
}
#location .location-img {
background-image: url('https://code-step.com/demo/html/store/img/location.jpg');
position: relative;
}
#location .item-map {
/* グーグルマップをグレースケールにする */
/* 画像をグレースケールにする */
filter: grayscale(1);
margin-bottom: 20px;
}
/* グーグルマップのサイズを設定 */
#location .item-map iframe {
width: 100%;
height: 400px;
border: 0;
}
#location .item-info {
text-align: left;
}
#location .item-info p {
margin-bottom: 10px;
}
</style>
footer
<style>
#footer {
font-size: 0.5rem;
padding: 10px 0;
text-align: center;
}
</style>
<footer id="footer">
<p>© COFFEE</p>
</footer>
JQUERY(スムーススクロール)
JQUERY
$(function(){
/*=================================================
スムーススクロール
===================================================*/
// ページ内リンクをクリックした時,
$('a[href^="#"]').click(function(){
// リンクを取得
let href= $(this).attr("href");
// ジャンプ先のhashを取得
let target = $(href == "#" || href == "" ? 'html' : href);
//上の$()のなかは三項演算子
//if(href == "#" || href == ""){
// target = $('html');
//}else{
// target = $(href);
//}
// トップからジャンプ先の要素までの距離を取得
let position = target.offset().top;
// animateでスムーススクロールを行う
// 600はスクロール速度で単位はミリ秒
$("html, body").animate({scrollTop:position}, 600, "swing");
//$(window).scrollTop(300);で上から300pxまで移動できる
//これをアニメーションにすると
//$('html, body').animate({scrollTop:300},function(){終了後の処理});
//600,swingはオプション秒数とアニメの演出
return false;
});
})
ランディングページ
参考サイト
完成図
ナビゲーション開いている時
リセットCSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
全体のスタイル
全体のスタイル
<style>
html {
font-size: 100%;
}
body {
color: #333;
font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
letter-spacing: 0.1em;
}
a {
color: #333;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
li {
list-style: none;
}
</style>
header
完成図
naviが閉じているとき
スマホとPC
naviが開いているとき
スマホとPC
headerのhtml
<header id="header">
<h1 class="site-title">
<a href="#"><img src="https://code-step.com/demo/html/lp/img/logo-r.svg" alt="BBB英会話スクール"></a>
</h1>
<nav id="navi">
<img class="logo" src="https://code-step.com/demo/html/lp/img/logo-w.svg" alt="BBB英会話スクール">
<ul class="menu">
<li><a href="#reason">BBBが選ばれる理由</a></li>
<li><a href="#voice">受講生の声</a></li>
<li><a href="#summary">スクールの概要</a></li>
</ul>
<a class="btn" href="#">無料体験に申し込む</a>
</nav>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</header>
スマホのスタイル
htmlの構造
ナビバーに係るcss 閉じた時とOPEN時
jqueryのtoggleClass() humbergerをactiveでtoggleして#naviもactiveでtoggleさせている。
<script>
$('.hamburger').on('click', function() {
// ハンバーガーメニューの共通処理を呼び出す
hamburger();
});
// メニューのリンクをクリックした時
$('#navi a').on('click', function() {
// ハンバーガーメニューの共通処理を呼び出す
hamburger();
});
function hamburger() {
// toggleClassを使用することで、hamburgerクラスにactiveクラスが存在する場合は削除、
// 存在しない場合を追加する処理を自動で行ってくれる
$('.hamburger').toggleClass('active');
if ($('.hamburger').hasClass('active')) {
// hamburgerクラスにactiveクラスが存在する場合は、naviにもactiveクラスを追加する
$('#navi').addClass('active');
} else {
// hamburgerクラスにactiveクラスが存在しない場合は、naviからactiveクラスを削除する
$('#navi').removeClass('active');
}
}
</script>
html構造 3つの画像リストがあるが、表示されているのは１つだけで交互にfadeIn,fadeOutする。
css構造
text(titleとbtn)
ul.fade>li>img*3のアニメーション以外のCSS
これで画像３枚の座標が一致するため重なって表示される。
メモ1/4：下のコードでいいと思ったら画像の通りになったので調べてみた。
メモ2/4：li要素を100%にしてimg要素をautoにした。
● li要素はtop:0;right:0;を起点に横幅が#mainvisualと一緒になった。
● その下のimgはli要素を起点にtop:0;left:0;の普段通りの位置になっている。
● -->これでimg要素を100%にしたらobj-fit-coverでイメージ通りになるのか。
メモ3/4：どうでもいいメモ：li,img要素ともにautoにした場合。
●li要素はpos-absoluteでblock要素のwidth:100%;を喪失して、子要素の幅だけになった。
●上は分かっていたので、img要素でwidth:100%;にして、幅一杯に広げようと思ったんです。
●そうすると、li要素は子要素のimgと同じ幅になるから、横幅一杯になると思ったんです。
●実動作は、img要素100%はli要素100%の幅であって、li要素の幅はimg要素の幅なので変わらない。
メモ4/4：結局、最初に想定していたのはこっちの動作だった。気持ち悪いけど、こっちのほうが直感的
メモ総括：普通ul要素にrelativeがあるが、今回はその上の#mainvisualにrelativeがあったりもした。
そういういみでもli要素ではなくてliの下のimg要素にpos-absoluteしてもいいと思う。
ul.fade>li>img*3のアニメーション以外のレスポンシブに係るCSS
メモ②：なんでレスポンシブの時になんで#mainvisualにheight:720px;なんてやるのか疑問になったので調べてみた。
メモ②1/2：まずはある時、
メモ②1/2：ない時、高さが喪失している。が、形は大きくは崩れていないが、
●マージンボトム120px;は完全に効いていない。
メモ②結論：position:relative;したら子要素と同じ高さをrelative要素にも設定した方がいいと思う。
マージンをもたせたかったら必須。
ある時とない時、マージンボトムがなくなってもうてる。
ul.fade>li>img*3のアニメーションに係るCSS
３枚の画像を15秒かけて一周してまた、最初から繰り返すアニメーション。
だから、33%以内に表示非常時を繰り返す必要がある。
流石に5秒かけてゆっくり表示したら遅いので半分ぐらいの15%で表示させている。
よって、5枚なら、20%以内に表示非表示させることになる。
#mainvisual
<style>
#mainvisual {
height: 490px;
margin-bottom: 80px;
position: relative;
}
#mainvisual .text {
position: absolute;
/* 両端に16pxづつ余白を作る */
width: calc(100% - 32px);
top: 310px;
left: 16px;
z-index: 10;
}
/* 「text-shadow」で文字の輪郭に白い影をつけることで、 */
/* 文字が背景画像に埋もれないようにする */
#mainvisual .text .title {
font-size: 1.75rem;
font-weight: bold;
text-shadow: 0 4px 6px #fff;
margin-bottom: 10px;
}
#mainvisual .text .btn {
background-color: #ff2a2a;
/* 文字の下に影をつけてボタンに立体感を出す */
border-bottom: 6px solid #9a0413;
border-radius: 10px;
color: #fff;
font-size: 1.5rem;
display: block;
padding: 15px 35px;
text-align: center;
transition: 0.3s;
position: relative;
}
#mainvisual .text .btn::after {
content: "";
width: 16px;
height: 16px;
border-top: solid 3px #fff;
border-right: solid 3px #fff;
transform: rotate(45deg);
position: absolute;
top: 26px;
right: 30px;
}
/* ホバー時は、opacityで透過させながら「transform: scale(1.05);」で */
/* 少しだけボタンのサイズを大きくする */
#mainvisual .text .btn:hover {
opacity: 0.9;
transform: scale(1.05);
}
#mainvisual .fade li {
position: absolute;
top: 0;
right: 0;
/* pos-relativeの要素の幅 */
width: 100%;
/* 最初は3枚の画像を非表示にしておく */
opacity: 0;
/* アニメーションを実行 */
/* fade：下で定義している「@keyframes fade」を実行 */
/* 15s：「@keyframes fade」の処理を15秒かけて実行 */
/* infinite：アニメーションの処理を無限に繰り返す */
animation: fade 15s infinite;
}
#mainvisual .fade li img {
width: 100%;
height: 300px;
object-fit: cover;
}
/* 1枚目の画像のアニメーション実行タイミングを設定 */
/* 「animation-delay: 0s;」ですぐに実行 */
#mainvisual .fade li:nth-child(1) {
animation-delay: 0s;
}
/* 2枚目の画像のアニメーション実行タイミングを設定 */
/* 「animation-delay: 5s;」で5秒後に実行 */
#mainvisual .fade li:nth-child(2) {
animation-delay: 5s;
}
/* 3枚目の画像のアニメーション実行タイミングを設定 */
/* 「animation-delay: 10s;」で10秒後に実行 */
#mainvisual .fade li:nth-child(3) {
animation-delay: 10s;
}
/* 「box-shadow」で画像のまわりをぼかす */
#mainvisual .fade li::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
/* 親要素の.fade liの幅になる left:0;right:0;*/
left: 0;
right: 0;
box-shadow: inset 0px 0px 20px 20px #fff;
}
/* アニメーション処理 */
/* 上の「animation」で15sを指定しているので下記の処理を15秒かけて実行 */
/* 0%が0秒を表し、100%が15秒後を表す。 */
/* 0%の「opacity: 0;」で非表示の状態からスタートし、 */
/* 15%になるまでの間に少しづつ画像を表示（フェードイン）させる。 */
/* そこから30%の時点までは画像を表示させたままの状態を維持し、 */
/* 45%の時点に向けて画像を非表示（フェードアウト）する。 */
/* そこから100%まで非表示の状態を維持する。 */
@keyframes fade {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
30% {
opacity: 1;
}
45% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@media screen and (min-width: 900px) {
#mainvisual {
/* height: 720px; */
margin-bottom: 120px;
}
#mainvisual .text {
top: 280px;
left: 10%;
width: auto;
}
#mainvisual .text .title {
font-size: 2.875rem;
margin-bottom: 30px;
}
#mainvisual .fade li {
width: 75%;
}
#mainvisual .fade li img {
width: 100%;
height: 720px;
}
}
</style>
<div id="mainvisual">
<div class="text">
<p class="title">話して学ぼう！<br>BBB英会話スクール</p>
<a class="btn" href="#">無料体験はこちら</a>
</div>
<ul class="fade">
<li><img src="https://code-step.com/demo/html/lp/img/mainvisual1.jpg" alt=""></li>
<li><img src="https://code-step.com/demo/html/lp/img/mainvisual2.jpg" alt=""></li>
<li><img src="https://code-step.com/demo/html/lp/img/mainvisual3.jpg" alt=""></li>
</ul>
</div>
section#reason
完成図
htmlの構造
cssの構造 スマホアニメーション以外のCSS
cssの構造 アニメーション以外のレスポンシブCSS
アニメーションにかかるCSSとJQUERY
JQUERYのinViews.min.jsを使用している。
これは、メチャクチャ便利。
section#voice
完成図
htmlの構造 スマホ時、コメントと画像の順番が逆になっている。
CSSの構造 スマホ
横並びにすることが多いd-flexを順序を入れ替えるのに使用してある。
その際、横向きをセンターにするのにjustify-content:center;ではなく.align-items:center;になる。
いつも横向きはjustify-content:centerだが、軸方向が縦になったため、align-items:center
d-flexの軸方向が縦なら平行方向は縦。横なら横。
平行方向の位置はjustify-contentプロパティで決定する。
今回は軸方向は縦で横向きへの(交差方向への)移動なのでalign-items:center;を使ってcenterにする。
#voice .item-left,rightにalign:items:center;がある時(textの位置はleft、centerではない)
#voice .item-left,rightにalign:items:center;がない時
交差方向にはデフォルトでストレッチがかかる。
レスポンシブに係るCSS
.student { text-left }は意味ないよね・・・。
アニメーションにかかるCSSとJQUERY
section#summary
完成図
html構造
css構造 スマホ アニメーション以外のCSS
span要素をd-blockにして幅を効かせている。inline要素はpもmも持てない。
$samary .menu .li{ width:100%; }は消し忘れ。不必要。
2つともinlineの時
上がblockで下がinlineの時 block要素にすると改行がかかる。
上がblockで下がinline-blockの時 lessonの幅の下の所だけにmargineがかかっている。
レスポンシブに係るアニメーション以外のCSS
アニメーションに係るCSS
section#sumary
<style>
#summary {
background: url("https://code-step.com/demo/html/lp/img/bg.gif");
margin-bottom: 80px;
padding: 60px 0;
margin-bottom: 120px;
animation: fall 10s infinite linear;
}
/* アニメーション処理 */
/* 10秒かけて背景画像の位置「background-position」を移動させる動作を繰り返す */
@keyframes fall {
0% {
background-position: 0 0;
}
100% {
background-position: -700px 700px;
}
}
#summary .menu li {
background-color: #fff;
margin-bottom: 32px;
border-radius: 20px;
padding: 30px;
}
#summary .menu li:nth-child(3) {
margin-bottom: 32px;
}
#summary .menu-title {
font-weight: bold;
line-height: 1;
text-align: center;
}
#summary .menu-title .ja {
font-size: 1.5rem;
display: block;
margin-bottom: 15px;
}
#summary .menu-title .en {
font-size: 1rem;
/* display: block; */
display: inline-block;
margin-bottom: 30px;
}
@media screen and (min-width: 900px) {
#summary .menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#summary .menu li {
width: 48%;
padding: 60px;
}
/* 3つ目以降はmargin-bottomを設定しない */
#summary .menu li:nth-child(n + 3) {
margin-bottom: 0;
}
#summary .menu-title .ja {
font-size: 1.75rem;
}
#summary .menu-title .en {
font-size: 1.125rem;
}
}
</style>
<!-- スクールの概要 -->
<section id="summary">
<div class="wrapper">
<h2 class="section-title">スクールの概要</h2>
<ul class="menu">
<li>
<h3 class="menu-title">
<span class="ja">レッスン内容</span>
<span class="en">LESSON</span>
</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<h3 class="menu-title">
<span class="ja">料金プラン</span>
<span class="en">PRICE</span>
</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<h3 class="menu-title">
<span class="ja">講師のご紹介</span>
<span class="en">TEACHER</span>
</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<h3 class="menu-title">
<span class="ja">BBBのQ&A</span>
<span class="en">Q&A</span>
</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
</ul>
</div>
</section>
footer
完成図
htmlの構造
CSSの構造 スマホ
CSSの構造 レスポンシブ設定
コーポレートサイト
リファレンスサイト
完成図
全体のスタイル
<style>
html {
font-size: 100%;
}
body {
color: #121212;
font-family: 'Noto Sans JP', sans-serif;
}
a {
color: #121212;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
li {
list-style: none;
}
</style>
header
htmlの構造 header固定(スマホの時はtop,pcの時はleftに固定される)
cssの構造 スマホ
ナビに係るCSS
ハムバーガーにかかるCSS
レスポンシブに係るCSS @media screen and (min:width:960px){}
section#video
メインビジュアルの背景にVIDEO
htmlの構造
ビデオが他のセクションの背景になっていたからてっきり下の画像コードだと思った
cssの構造 スマホ
cssの構造 レスポンシブ
<style>
.container {
margin-left: 0;
}
#video {
height: 80vh;
width: 100%;
}
#video .bg-video {
position: fixed;
/* #header(ナビ)の高さ分下に下げている */
top: 72px;
left: 0;
right: 0;
/* height: 100%; = 100vh */
/* height,whidthを設定しない場合,自要素の幅と高さになる */
width: 100%;/*widthを設定したらdefaultでheightはautoになる*/
z-index: -10;
}
@media screen and (min-width: 900px) {
.Container {
margin-left: 300px;
}
#video {
width: 100%;
height: 100vh;
}
/* 「position: fixed;」で動画を固定し、 */
/* 「top: -220px;」で表示位置を調整 */
/* なんでtop:-220px;しているのか不思議だった */
/* 理由はheight: 100%; */
/* これはviewportに対して100%になる */
/* 下に余白を開けたいのでtop:-220px; */
/* top: -220px; */
/* height: 100%; */
#video .bg-video {
height: 80vh;
top: 0;
left: 300px;
/* width: 100%; */
object-fit: cover;
}
}
</style>
<div class="Container">
<main>
<div id="video">
<video class="bg-video" src="https://code-step.com/demo/html/corporate3/video/video.mp4" loop
autoplay muted playsinline></video>
</div>
</main>
</div>
section#product
htmlの構造
CSSの構造 スマホ .sec-title{text-centerは不要}
レスポンシブにかかるCSS
<style>
.wrapper {
max-width: 900px;
margin: 0 auto;
padding: 60px 20px;
}
.sec-title {
font-size: 1.25rem;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.sec-title::before,
.sec-title::after {
width: 18%;
border-top: 1px solid;
content: "";
}
#project {
/* 背景に透明なグラデーションができている気がする */
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
color: #fff;
}
#project .list li {
width: 100%;
margin-bottom: 30px;
border: solid 1px #fff;
/* absoluteは2つある */
/* li a::after{} と .list .name{} */
position: relative;
}
#project .list li a {
display: block;
}
/* 疑似要素を使用して、テキストの下に「box-shadow」で影を付ける */
#project .list li a::after {
content: "";
box-shadow: 0 -30px 15px -1px #2e2e2e inset;
/* relativeは親の親のli要素 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#project .list .name {
color: #fff;
font-size: 0.75rem;
/* relativeは親の親のli要素 */
position: absolute;
bottom: 4px;
left: 7px;
z-index: 5;
}
@media screen and (min-width: 900px) {
.wrapper {
padding: 80px 20px;
}
.sec-title {
font-size: 1.75rem;
margin-bottom: 60px;
}
.sec-title::before,
.sec-title::after {
width: 28%;
}
#project .list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#project .list li {
width: 47%;
margin-bottom: 50px;
}
/* 下段の2つはマージンを設定しない */
#project .list li:last-child,
/*:nth-last-child 後ろからn番目 (1~)*/
#project .list li:nth-last-child(2) {
margin-bottom: 0;
}
}
</style>
<section id="project">
<div class="wrapper">
<h2 class="sec-title">建築事例をご紹介</h2>
<ul class="list">
<li>
<a href="#">
<img src="https://code-step.com/demo/html/corporate3/img/project1.jpg" alt="">
<p class="name">PROJECT_01</p>
</a>
</li>
<li>
<a href="#">
<img src="https://code-step.com/demo/html/corporate3/img/project2.jpg" alt="">
<p class="name">PROJECT_02</p>
</a>
</li>
<li>
<a href="#">
<img src="https://code-step.com/demo/html/corporate3/img/project3.jpg" alt="">
<p class="name">PROJECT_03</p>
</a>
</li>
<li>
<a href="#">
<img src="https://code-step.com/demo/html/corporate3/img/project4.jpg" alt="">
<p class="name">PROJECT_04</p>
</a>
</li>
</ul>
</div>
</section>
section#feature
htmlの構造
CSSの構造 スマホ
レスポンシブにかかるCSS
section#flow
html構造
CSSの構造 スマホ
ボーダーによる三角形
1pxのボーダーは線になるが、
100pxとかになると線というより方形になる。heigth:100px;なら正方形。
作りたい三角形は底辺calc(100vw-80px) * 高さ30pxの三角形
高さ30pxのborder-top (boder:30pxは上と下で60pxになる)
pos-absoluteの幅はright:0;left:0;でpos-relativeと同じになって、この場合calc(100vw-80px)になる。
leftとrightを半分の幅で透明にしてやると下向き三角形ができる。上向きや左右も同じ原理
トップとレフト トップとライト
レフトとライトを空白にすると三角形になる。
CSSの構造 レスポンシブ
<style>
#flow {
padding-top: 0;
background-color: #fff;
}
#flow .step {
display: flex;
margin-top: 30px;
flex-direction: column;
align-items: center;
}
#flow .figure {
position: relative;
margin-bottom: 80px;
}
/*図形下の黄色い棒線を中央に配置 */
#flow .figure::before {
position: absolute;
content: "";
width: 50px;
height: 600px;
background-color: #ffdd00;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
display: inline-block;
}
/* ※80pxは任意の数値ですので、 */
/* 図形をもっと小さくして */
/* 横の余白とりたい場合は、 */
/* ここの数値を大きくする等して調整が可能です */
#flow .figure li {
width: calc(100vw - 80px);
height: 80px;
line-height: 80px;
background-color: #414141;
color: #fff;
font-size: 0.875rem;
margin-bottom: 60px;
text-align: center;
position: relative;
}
/* 図形（三角部分）の横幅を設定 ※上記同様、*/
/* 図形のサイズにあわせて調整を行う */
#flow .figure li::before {
content: "";
border-left: calc(50vw - 40px) solid transparent;
border-right: calc(50vw - 40px) solid transparent;
border-top: 30px solid #414141;
position: absolute;
top: 80px;
right: 0;
left: 0;
}
#flow .description {
margin-left: 50px;
}
#flow .description dt {
border-bottom: solid 1px #121212;
font-size: 1.25rem;
padding-bottom: 8px;
margin-bottom: 10px;
position: relative;
}
/* 丸数字を作成 */
/* 「position」を使用して、タイトルの左側に配置 */
#flow .description dt span {
width: 35px;
height: 35px;
line-height: 35px;
background-color: #414141;
border-radius: 50%;
color: #fff;
display: block;
font-size: 1rem;
text-align: center;
position: absolute;
bottom: 0;
left: -45px;
}
#flow .description dd {
margin-bottom: 43px;
}
#flow .description dd:last-child {
margin-bottom: 0;
}
@media screen and (min-width: 900px) {
#flow {
padding-top: 40px;
}
/* figureとdescriptionを横並びに変更 */
#flow .step {
flex-direction: row;
margin-top: 60px;
}
/* 図形の四角部分を作成 */
/* 幅を200pxに縮小 */
#flow .figure li {
width: 200px;
}
/* 図形の三角部分を疑似要素で作成 */
/* 「position」を使用して、四角の下に配置 */
/* 幅を200pxに縮小したので合わせて縮小 */
#flow .figure li::before {
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#flow .figure li:last-child {
margin-bottom: 0;
}
#flow .description {
margin-left: 10%;
}
}
</style>
<section id="flow">
<div class="wrapper">
<h2 class="sec-title">家ができるまでの流れ</h2>
<p>お問い合わせいただいてから、家が完成するまでの流れです。</p>
<div class="step">
<ol class="figure">
<li>1.ヒアリング</li>
<li>2.プラン提案</li>
<li>3.契約</li>
<li>4.着工</li>
<li>5.完成</li>
</ol>
<dl class="description">
<dt><span>1</span>ヒアリング</dt>
<dd>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
<dt><span>2</span>プラン提案</dt>
<dd>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
<dt><span>3</span>契約</dt>
<dd>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
<dt><span>4</span>着工</dt>
<dd>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
<dt><span>5</span>完成</dt>
<dd>
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
</dl>
</div>
</div>
</section>
section#contact
htmlの構造
cssの構造 スマホ
CSSの構造 レスポンシブ
<style>
#contact {
background-color: #fff;
padding-bottom: 60px;
}
#contact .link {
margin-top: 30px;
}
#contact .link .item {
display: block;
width: 60%;
/* センターに配置 */
margin: 20px auto 0 auto;
padding: 50px 0;
border: solid 1px #121212;
font-size: 0.875rem;
text-align: center;
transition: 0.1s;
position: relative;
}
#contact .link .item::before {
content: "";
border-top: 20px solid transparent;
border-right: 20px solid #121212;
position: absolute;
right: 4px;
bottom: 4px;
}
#contact .link .item:first-child {
margin-top: 0;
}
#contact .link .item:hover {
outline: solid 3px #121212;
/* ホバー時は枠線を太くする */
/* 「border」ではなく「outline」を使用することで、 */
/* ホバー時にレイアウトがずれるのを防ぎます。 */
/* ※詳細を知りたい方は、borderとoutlineの違い */
/* について検索してみてください。 */
}
#contact .link .item img {
margin-bottom: 5px;
}
@media screen and (min-width: 900px) {
#contact {
padding-bottom: 80px;
}
#contact .link {
display: flex;
justify-content: space-between;
}
#contact .link .item {
width: 30%;
margin-top: 0;
}
}
</style>
<section id="contact">
<div class="wrapper">
<h2 class="sec-title">お問い合わせ</h2>
<p>お問い合わせは下記からお願いいたします。</p>
<div class="link">
<a class="item" href="#">
<img src="https://code-step.com/demo/html/corporate3/img/icon-document.png" alt=""><br>資料請求
</a>
<a class="item" href="#">
<img src="https://code-step.com/demo/html/corporate3/img/icon-seminar.png" alt=""><br>Web説明会
</a>
<a class="item" href="#">
<img src="https://code-step.com/demo/html/corporate3/img/icon-talk.png" alt=""><br>個別相談
</a>
</div>
</div>
</section>
footer
htmlの構造
cssの構造
<style>
#to-top {
width: 50px;
height: 50px;
border: 1px solid #fff;
border-radius: 50%;
position: fixed;
right: 25px;
bottom: 25px;
background-color: #121212;
}
#to-top::after {
content: '';
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #fff;
position: relative;
left: 17px;
bottom: 3px;
}
#footer {
padding: 50px 30px 10px;
background-color: #222;
color: #fff;
}
#footer ul.menu {
display: flex;
flex-wrap: wrap;
align-content: space-around;
justify-content: center;
height: 80px;
}
#footer ul.menu li a{
display: block;
color: #fff;
padding: 0 10px;
border-left: 1px solid #fff;
}
#footer ul.menu li:nth-child(1) {
border-left: none;
}
.copyright {
text-align: center;
}
</style>
<footer id="footer">
<a id="to-top" href="#"></a>
<ul class="menu">
<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>
<li><a href="#">会社概要</a></li>
</ul>
<p class="copyright">Copyright © 2021 Akarui HOUSE All Rights Reserved.</p>
</footer>
↧