【ソースコード】中級編：コーポレートサイト／固定サイドメニュー
目次
※コーディングの解説はCSSのコメントを参照
ディレクトリ構成
corporate3
├─img
│ ├─favicon.ico
│ ├─logo.svg
│ ├─icon-document.png
│ ├─icon-seminar.png
│ ├─icon-talk.png
│ ├─project1.jpg
│ ├─project2.jpg
│ ├─project3.jpg
│ └─project4.jpg
│
├─css
│ └─style.css
│
├─js
│ └─main.js
│
├─video
│ └─video.mp4
│
└─index.html
HTML（index.html）
別タブで開く
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>明るいHOUSE</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキスト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<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@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<header id="header">
<h1 class="site-title">
<a href="index.html"><img src="img/logo.svg" alt="明るいHOUSE"></a>
</h1>
<nav id="navi">
<ul class="nav-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>
<ul class="nav-sns">
<li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
<li><a href="https://www.facebook.com/" target="_blank">facebook</a></li>
<li><a href="https://www.instagram.com/" target="_blank">instagram</a></li>
</ul>
</nav>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div id="mask"></div>
</header>
<div class="container">
<main>
<div id="video">
<video class="bg-video" src="video/video.mp4" loop autoplay muted playsinline></video>
</div>
<section id="project">
<div class="wrapper">
<h2 class="sec-title">建築事例をご紹介</h2>
<ul class="list">
<li>
<a href="#">
<img src="img/project1.jpg" alt="">
<p class="name">PROJECT_01</p>
</a>
</li>
<li>
<a href="#">
<img src="img/project2.jpg" alt="">
<p class="name">PROJECT_02</p>
</a>
</li>
<li>
<a href="#">
<img src="img/project3.jpg" alt="">
<p class="name">PROJECT_03</p>
</a>
</li>
<li>
<a href="#">
<img src="img/project4.jpg" alt="">
<p class="name">PROJECT_04</p>
</a>
</li>
</ul>
</div>
</section>
<section id="feature">
<div class="wrapper">
<h2 class="sec-title">明るいHOUSEの特徴</h2>
<ul class="list">
<li>
<a href="#">design</a>
<p class="title">デザイン</p>
<p>テキストテキストテキスト</p>
</li>
<li>
<a href="#">quality</a>
<p class="title">性能</p>
<p>テキストテキストテキスト</p>
</li>
<li>
<a href="#">support</a>
<p class="title">サポート</p>
<p>テキストテキストテキスト</p>
</li>
</ul>
</div>
</section>
<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 id="contact">
<div class="wrapper">
<h2 class="sec-title">お問い合わせ</h2>
<p>お問い合わせは下記からお願いいたします。</p>
<div class="link">
<a class="item" href="#">
<img src="img/icon-document.png" alt=""><br>資料請求
</a>
<a class="item" href="#">
<img src="img/icon-seminar.png" alt=""><br>Web説明会
</a>
<a class="item" href="#">
<img src="img/icon-talk.png" alt=""><br>個別相談
</a>
</div>
</div>
</section>
</main>
<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>
</div>
</body>
</html>
CSS（style.css）
別タブで開く
style.css
@charset "UTF-8";
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;
}
/* サイドメニューの横幅分だけ左にmarginをとる */
.container {
margin-left: 300px;
}
/* コンテンツ幅を設定するための共通クラス */
.wrapper {
max-width: 900px;
padding: 80px 20px;
margin: 0 auto;
}
.site-title {
width: 200px;
line-height: 1px;
margin-bottom: 30px;
}
.site-title a {
display: block;
}
/*
セクションタイトル用の共通クラス
両サイドの線は疑似要素で作成して、Flexboxで横並びに配置
※beforeが左の線、afterが右の線
*/
.sec-title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.75rem;
margin-bottom: 60px;
text-align: center;
}
.sec-title::before,
.sec-title::after {
border-top: 1px solid;
content: "";
width: 28%;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
/*
サイドのロゴとグローバルナビゲーションは「header」タグで囲む
※サイドに配置しているが、ロゴとグローバルナビゲーションを含んだヘッダー要素のため、
「aside」タグではなく「header」タグを使用します。
「aside」タグは、メインコンテンツとは直接関係ない補足的な情報をサイドバーとして配置する場合に使用します。
例えば、Codejump内の「中級編：ブログサイト」のような使い方です。
中級編：ブログサイト デモ
https://code-jump.com/demo/html/blog/
*/
#header {
width: 300px;
height: 100%;
background-color: #fff;
padding: 40px 50px 30px 45px;
position: fixed;
top: 0;
/* 画面の高さが低くてメニューが隠れてしまった場合に、縦スクロールが出るよう設定 */
overflow-y: auto;
}
#header .nav-menu {
margin-bottom: 60px;
}
#header li {
font-size: 0.875rem;
padding: 8px 0;
}
/*-------------------------------------------
Video
-------------------------------------------*/
/*
動画を全画面表示
*/
#video {
width: 100%;
height: 100vh;
}
/*
「position: fixed;」で動画を固定し、「top: -220px;」で表示位置を調整
z-indexでマイナスを設定して、他のコンテンツの下に隠れるようにする
*/
#video .bg-video {
position: fixed;
top: -220px;
z-index: -10;
}
/*-------------------------------------------
Project
-------------------------------------------*/
/* 背景に黒の透過グラデーションを設定 */
#project {
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
color: #fff;
}
#project .list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#project .list li {
width: 47%;
border: solid 1px #fff;
margin-bottom: 50px;
position: relative;
}
/* 下段の2つはマージンを設定しない */
#project .list li:last-child,
#project .list li:nth-last-child(2) {
margin-bottom: 0;
}
#project .list li a {
display: block;
}
/* 疑似要素を使用して、テキストの下に「box-shadow」で影を付ける */
#project .list li a::after {
content: "";
box-shadow: 0 -30px 15px -1px #2e2e2e inset;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#project .list .name {
color: #fff;
font-size: 0.75rem;
position: absolute;
bottom: 4px;
left: 7px;
z-index: 5;
}
/*-------------------------------------------
Feature
-------------------------------------------*/
/* 背景に黒の透過を設定 */
#feature {
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding-bottom: 80px;
}
#feature .list {
display: flex;
justify-content: space-between;
}
#feature .list li {
width: 30%;
font-size: 0.875rem;
text-align: center;
}
/*
円を作成
レスポンシブに対応した可変サイズの円を作成する場合は、
widthに100%を設定して、paddingで上下を50%に設定
今回は円の中にテキストが入っているのと、枠線をつけているため、
50%から上下それぞれテキストの高さ（10px）とボーダー（1px）をマイナスしている
※テキストの高さは、ディベロッパーツールで20pxと確認できるため、
上下で分割してそれぞれ10pxとなる。
*/
#feature .list li a {
width: 100%;
border: solid 1px #fff;
border-radius: 50%;
color: #fff;
display: block;
padding: calc(50% - 11px) 0;
margin-bottom: 15px;
text-align: center;
position: relative;
/* ホバー時用の要素を隠すために設定 */
overflow: hidden;
}
/*
ホバー時のスライドを疑似要素で作成
「left: -100%;」で左側に隠しておく
*/
#feature .list li a::before {
content: "";
width: 100%;
height: 100%;
background-color: #fff;
position: absolute;
top: 0;
left: -100%;
opacity: 0.3;
transition: 0.5s;
}
/* ホバー時に「left: 0;」を設定して右に移動させる */
#feature .list li a:hover::before {
left: 0;
}
#feature .list .title {
font-size: 1rem;
font-weight: bold;
margin-bottom: 5px;
}
/*-------------------------------------------
Flow
-------------------------------------------*/
#flow {
background-color: #fff;
padding-top: 40px;
}
#flow .step {
display: flex;
margin-top: 60px;
}
#flow .figure {
position: relative;
}
/* 図形下の黄色い棒線を作成 */
#flow .figure::before {
content: "";
width: 50px;
height: 600px;
background-color: #ffdd00;
position: absolute;
top: 0;
left: 75px;
}
/*
図形の四角部分を作成
*/
#flow .figure li {
width: 200px;
height: 80px;
line-height: 80px;
background-color: #414141;
color: #fff;
font-size: 0.875rem;
margin-bottom: 60px;
position: relative;
text-align:center;
}
/*
図形の三角部分を疑似要素で作成
「position」を使用して、四角の下に配置
*/
#flow .figure li::before {
content: "";
border-top: 30px solid #414141;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
position: absolute;
top: 80px;
right: 0;
left: 0;
margin: 0 auto;
}
#flow .figure li:last-child {
margin-bottom: 0;
}
#flow .description {
margin-left: 10%;
}
#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;
}
/*-------------------------------------------
Contact
-------------------------------------------*/
#contact {
background-color: #fff;
padding-bottom: 80px;
}
#contact .link {
display: flex;
justify-content: space-between;
margin-top: 60px;
}
#contact .link .item {
width: 30%;
border: solid 1px #121212;
display: block;
font-size: 0.875rem;
position: relative;
padding: 50px 0;
text-align: center;
transition: 0.1s;
}
#contact .link .item::before {
content: "";
border-top: 20px solid transparent;
border-right: 20px solid #121212;
position: absolute;
right: 4px;
bottom: 4px;
}
/*
ホバー時は枠線を太くする
「border」ではなく「outline」を使用することで、ホバー時にレイアウトがずれるのを防ぎます。
※詳細を知りたい方は、borderとoutlineの違いについて検索してみてください。
*/
#contact .link .item:hover {
outline: solid 3px #121212;
}
#contact .link .item img {
margin-bottom: 5px;
}
/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
background-color: #121212;
color: #fff;
padding: 20px 0;
}
#footer .menu {
display: flex;
justify-content: center;
margin: 30px 0 60px 0;
}
#footer .menu li {
border-right: solid 1px #fff;
font-size: 0.875rem;
padding: 0 20px;
}
#footer .menu li:last-child {
border-right: none;
}
#footer .menu li a {
color: #fff;
}
#footer .copyright {
font-size: 0.75rem;
text-align: center;
}
/*-------------------------------------------
トップへ戻るボタン
-------------------------------------------*/
/*
右下に固定で配置
表示・非表示の切り替えはjQueryで行うため、詳細は「main.js」のコメントを参照
*/
#to-top {
width: 50px;
height: 50px;
background-color: #121212;
border: solid 1px #fff;
border-radius: 50%;
position: fixed;
right: 25px;
bottom: 25px;
}
/*
中の三角は疑似要素で作成
*/
#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;
}
/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 960px) {
.container {
margin-left: 0;
}
.wrapper {
padding: 60px 20px;
}
.site-title {
width: 180px;
margin-bottom: 0;
position: relative;
left: 18px;
top: 10px;
}
.sec-title {
font-size: 1.25rem;
margin-bottom: 30px;
}
.sec-title::before,
.sec-title::after {
width: 18%;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
width: 100%;
height: 72px;
padding: 0;
z-index: 10;
}
/*
ハンバーガーメニュー
※ハンバーガーメニューの説明は他の課題と重複するため割愛
*/
#navi {
width: 300px;
background: #fff;
padding: 25px;
position: fixed;
top: 0;
left: -300px;
bottom: 0;
opacity: 0;
overflow-y: auto;
transition: 0.5s;
z-index: 20;
}
.open #navi {
left: 0;
opacity: 1;
}
#navi ul.nav-menu {
margin-bottom: 30px;
}
#navi ul li {
padding: 10px 0;
}
.hamburger {
width: 30px;
height: 30px;
cursor: pointer;
position: fixed;
top: 22px;
right: 18px;
transition: 0.5s;
z-index: 20;
}
.hamburger span {
width: 30px;
height: 2px;
background-color: #121212;
border-radius: 4px;
display: block;
position: absolute;
left: 0;
transition: 0.5s;
}
.hamburger span:nth-child(1) {
top: 4px;
}
.hamburger span:nth-child(2) {
top: 14px;
}
.hamburger span:nth-child(3) {
bottom: 4px;
}
.open .hamburger span {
background-color: #fff;
}
.open .hamburger span:nth-child(1) {
transform: translateY(10px) rotate(-315deg);
}
.open .hamburger span:nth-child(2) {
opacity: 0;
}
.open .hamburger span:nth-child(3) {
transform: translateY(-10px) rotate(315deg);
}
#mask {
display: none;
transition: 0.5s;
}
.open #mask {
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
display: block;
opacity: 0.8;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
/*-------------------------------------------
Video
-------------------------------------------*/
/*
スマホの場合は、動画が見切れすぎないよう高さを調整
*/
#video {
height: 80vh;
}
#video .bg-video {
height: 520px;
top: 72px;
left: 0;
right: 0;
margin: 0 auto;
}
/*-------------------------------------------
Project
-------------------------------------------*/
#project .list {
flex-direction: column;
}
#project .list li {
width: 100%;
margin-bottom: 30px;
}
#project .list li:nth-last-child(2) {
margin-bottom: 30px;
}
/*-------------------------------------------
Feature
-------------------------------------------*/
#feature {
padding-bottom: 60px;
}
/*-------------------------------------------
Flow
-------------------------------------------*/
#flow {
padding-top: 0;
}
#flow .step {
flex-direction: column;
align-items: center;
margin-top: 30px;
}
#flow .figure {
margin-bottom: 80px;
}
/*
図形下の黄色い棒線を中央に配置
*/
#flow .figure::before {
left: 0;
right: 0;
margin: 0 auto;
}
/*
図形（四角部分）の横幅を、画面幅から80pxマイナスしてサイズを調整
※80pxは任意の数値ですので、図形をもっと小さくして横の余白とりたい場合は、
ここの数値を大きくする等して調整が可能です。
*/
#flow .figure li {
width: calc(100vw - 80px);
}
/*
図形（三角部分）の横幅を設定
※上記同様、図形のサイズにあわせて調整を行う
*/
#flow .figure li::before {
border-left: calc(50vw - 40px) solid transparent;
border-right: calc(50vw - 40px) solid transparent;
}
#flow .description {
margin-left: 50px;
}
/*-------------------------------------------
Contact
-------------------------------------------*/
#contact {
padding-bottom: 60px;
}
#contact .link {
flex-direction: column;
align-items: center;
margin-top: 30px;
}
#contact .link .item {
width: 60%;
margin: 20px 0 0 0;
}
#contact .link .item:first-child {
margin-top: 0;
}
/*-------------------------------------------
フッター
-------------------------------------------*/
#footer .menu {
flex-wrap: wrap;
}
#footer .menu li {
margin-bottom: 10px;
}
}
JavaScript（main.js）
別タブで開く
main.js
$(function(){
/*=================================================
ハンバーガーメニュー
解説は、「中級編：ストアサイト（インテリア）」参照
===================================================*/
$('.hamburger').on('click', function() {
if ($('#header').hasClass('open')) {
$('#header').removeClass('open');
} else {
$('#header').addClass('open');
}
});
// #maskのエリアをクリックした時にメニューを閉じる
$('#mask').on('click', function() {
$('#header').removeClass('open');
});
// リンクをクリックした時にメニューを閉じる
$('#navi a').on('click', function() {
$('#header').removeClass('open');
});
/*=================================================
トップに戻る
===================================================*/
let pagetop = $('#to-top');
// 最初に画面が表示された時は、トップに戻るボタンを非表示に設定
pagetop.hide();
// スクロールイベント（スクロールされた際に実行）
$(window).scroll(function() {
// スクロール位置が700pxを超えた場合
if ($(this).scrollTop() > 700) {
// トップに戻るボタンを表示する
pagetop.fadeIn();
// スクロール位置が700px未満の場合
} else {
// トップに戻るボタンを非表示にする
pagetop.fadeOut();
}
});
// クリックイベント（ボタンがクリックされた際に実行）
pagetop.click(function() {
// 0.5秒かけてページトップへ移動
$('body,html').animate({scrollTop: 0}, 500);
// イベントが親要素へ伝播しないための記述
// ※詳しく知りたい方は「イベント バブリング」または「jQuery バブリング」で調べてみてください
return false;
});
});