そらデンタルクリニック
歯医者
クリエイター： Leyco
ソースコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>そらデンタルクリニック</title>
<link rel="stylesheet" href="assets/css/destyle.css">
<link rel="stylesheet" href="assets/css/style.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=IBM+Plex+Sans+JP:wght@400;500;600&family=Open+Sans:ital@0;1&display=swap"
rel="stylesheet">
<link rel="icon" href="assets/img/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
</head>
<body>
<!------ローディング------>
<div class="loader">
<div class="loader__item">
<div class="pop_dental"></div>
<div class="pop_dental"></div>
<div class="pop_dental"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<span>LOADING</span>
</div>
</div>
<header>
<div class="header">
<div class="header__flex">
<div class="header__logo">
<img src="assets/img/logo.png" alt="">
<h1>そらデンタルクリニック</h1>
</div>
<div class="header__pc__tel">
<p>tel:<span>03-0000-0000</span></p>
</div>
<div class="header__navi__open">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<ul class="header__navi__list">
<li class="header__navi__menu"><a href="#">HOME</a></li>
<li class="header__navi__menu"><a href="#feature">当院の特徴</a></li>
<li class="header__navi__menu"><a href="#medicalMenu">診療科目</a></li>
<li class="header__navi__menu"><a href="#consultationHours">診療時間</a></li>
<li class="header__navi__menu"><a href="#news">お知らせ</a></li>
<li class="header__navi__sns header__navi__menu"><a href="#"><img src="assets/img/line_icon.png"
alt="ラインのロゴ"></a>
</li>
<li class="header__navi__sns header__navi__menu"><a href="#"><img src="assets/img/insta_icon.png"
alt="インスタグラムのロゴ"></a></li>
<li class="header__sp__tel">
<a href="tel:03-0000-0000">tel:<span>03-0000-0000</span></a>
</li>
</ul>
</div>
</div>
<div class="header__fv">
<div class="scrolldown"><span>Scroll</span></div>
<div class="header__fv__contents">
<picture>
<source srcset="assets/img/pc_top_me.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/sp_top_me.png" alt="ロゴ">
</picture>
<p>すこやかな毎日のために</p>
</div>
</div>
</header>
<main>
<!----イントロダクション---->
<section class="intro js-fade">
<div class="center"><img src="assets/img/dental_illust.png" alt="歯のイラスト"></div>
<p class="center">お口のお悩み、<br class="br_sp">
<span>丸ごと</span>お任せください
</p>
<p>年齢やライフスタイルなどによって、<br class="br_sp">
お口や歯のトラブルはさまざま。<br>
そらデンタルクリニックでは、患者様ひとりひとりのお悩みに寄り添い、最適な治療方法をご提案しております。</p>
</section>
<!--------当院の特徴-------->
<section id="feature">
<div class="container">
<h2 class="section__title">
<span class="section__title__ja">当院の特徴</span>
<span class="section__title__img"><img src="assets/img/title_under.png" alt="タイトル下かざり"></span>
<span class="section__title__en">features</span>
</h2>
<div class="feature__contents">
<div class="feature__content blue js-fade">
<div class="feature__content__img"><img src="assets/img/feature_1.jpg" alt="治療の画像"></div>
<div class="feature__content__inner">
<div class="sp_right"><img src="assets/img/num_01.png" alt="01"></div>
<div class="feature__content__text">
<h3>確かな技術と質の高い治療</h3>
<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</div>
</div>
</div>
<div class="feature__content white js-fade">
<div class="feature__content__img"><img src="assets/img/feature_2.jpg" alt="カウンセリングの画像">
</div>
<div class="feature__content__inner">
<div class="sp_right"><img src="assets/img/num_02.png" alt="02"></div>
<div class="feature__content__text">
<h3>丁寧なカウンセリング</h3>
<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</div>
</div>
</div>
<div class="feature__content blue js-fade">
<div class="feature__content__img"><img src="assets/img/feature_3.jpg" alt="滅菌された器具の画像">
</div>
<div class="feature__content__inner">
<div class="sp_right"><img src="assets/img/num_03.png" alt="03"></div>
<div class="feature__content__text">
<h3>徹底した滅菌対策</h3>
<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------診療科目-------->
<section id="medicalMenu">
<div class="container">
<h2 class="section__title">
<span class="section__title__ja">診療科目</span>
<span class="section__title__img"><img src="assets/img/title_under.png" alt="タイトル下かざり"></span>
<span class="section__title__en">medical menu</span>
</h2>
<ul class="medicalMenu__contents js-fade">
<li>
<picture>
<source srcset="assets/img/icon_normal.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/icon_normal_sp.png" alt="一般歯科のイラスト">
</picture>
<p>一般歯科</p>
</li>
<li>
<picture>
<source srcset="assets/img/icon_child.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/icon_child_sp.png" alt="小児歯科のイラスト">
</picture>
<p>小児歯科</p>
</li>
<li>
<picture>
<source srcset="assets/img/icon_straight.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/icon_straight_sp.png" alt="矯正歯科のイラスト">
</picture>
<p>矯正歯科</p>
</li>
<li>
<picture>
<source srcset="assets/img/icon_protect.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/icon_protect_sp.png" alt="予防歯科のイラスト">
</picture>
<p>予防歯科</p>
</li>
<li>
<picture>
<source srcset="assets/img/icon_decay.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/icon_decay_sp.png" alt="むし歯治療のイラスト">
</picture>
<p>むし歯治療</p>
</li>
<li>
<picture>
<source srcset="assets/img/icon_perio.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/icon_perio_sp.png" alt="歯周病ケアのイラスト">
</picture>
<p>歯周病ケア</p>
</li>
<li>
<picture>
<source srcset="assets/img/icon_implant.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/icon_implant_sp.png" alt="インプラントのイラスト">
</picture>
<p>インプラント</p>
</li>
<li>
<picture>
<source srcset="assets/img/icon_care.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/icon_care_sp.png" alt="歯のケアのイラスト">
</picture>
<p>訪問診療</p>
</li>
</ul>
</div>
</section>
<!-------診療時間-------->
<section id="consultationHours">
<div class="container">
<h2 class="section__title">
<span class="section__title__ja">診療時間</span>
<span class="section__title__img"><img src="assets/img/title_under.png" alt="タイトル下かざり"></span>
<span class="section__title__en">consultation hours</span>
</h2>
<picture>
<source srcset="assets/img/pc_hour.png" media="(min-width: 800px)" type="image/png">
<img src="assets/img/sp_hour.png" alt=”診療時間”>
</picture>
<p class="center">定休日：木曜・日曜</p>
</div>
</section>
<!---------お知らせ--------->
<section id="news">
<div class="container">
<h2 class="section__title">
<span class="section__title__ja">お知らせ</span>
<span class="section__title__img"><img src="assets/img/title_under.png" alt="タイトル下かざり"></span>
<span class="section__title__en">news</span>
</h2>
<ul class="news__list js-fade">
<li class="news__list__1">
<a href="#">
<div class="category">
<p>2024.XX.XX</p>
<p>お知らせ</p>
</div>
<p>院長出張のため担当医師が変わります</p>
</a>
</li>
<li class="news__list__2">
<a href="#">
<div class="category">
<p>2024.XX.XX</p>
<p>お知らせ</p>
</div>
<p>学校検診のため休診日が変わります</p>
</a>
</li>
<li class="news__list__3">
<a href="#">
<div class="category">
<p>2024.XX.XX</p>
<p>採用情報</p>
</div>
<p>歯科技師を募集しています（正社員・パート）</p>
</a>
</li>
</ul>
</div>
</section>
<!----------イメージ画像-------->
<div class="image"></div>
</main>
<footer>
<div class="footer__contents scrool">
<div class="footer__contents__text">
<div class="footer__logo"><img src="assets/img/logo.png" alt="ロゴ"></div>
<h2 class="footer__clinicName">そらデンタルクリニック</h2>
<p>〒144-0043 東京都大田区羽田X-X-X<br class="br_sp">
羽田クリニックビル３F</p>
<div class="footer__access">
<h3 class="footer__access-heading">アクセス</h3>
<ul class="footer__access-list">
<li>電車からお越しの方：JRより徒歩3分</li>
<li>バスからお越しの方：バス停より徒歩3分</li>
<li>車でお越しの方：契約駐車場があります</li>
</ul>
</div>
<div class="center footer__contact">
<div class="footer__tel">tel:<a href="#">03-0000-0000</a></div>
<a href="#" class="footer__button">WEB予約はこちら</a>
</div>
<div class="footer__sns">
<a href="#"><img src="assets/img/line_icon.png" alt="ラインのロゴ"></a>
<a href="#"><img src="assets/img/insta_icon.png" alt="インスタグラムのロゴ"></a>
</div>
</div>
<div class="footer__contents__map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6492.449772145497!2d139.74163269315537!3d35.54814779052154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018613e8e5ff96d%3A0x816cdc730df3a3a5!2z44CSMTQ0LTAwNDM!5e0!3m2!1sja!2sjp!4v1712128618164!5m2!1sja!2sjp"
style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
<a href="https://maps.app.goo.gl/jsVRdsnVncfYkSuJ6">大きな地図で見る</a>
</div>
</div>
<div class="footer__menu">
<div class="footer__menu__flex">
<ul class="footer__menu__navi">
<li><a href="#">HOME</a></li>
<li><a href="#feature">当院の特徴</a></li>
<li><a href="#medicalMenu">診療科目</a></li>
<li><a href="#consultationHours">診療時間</a></li>
<li><a href="#news">お知らせ</a></li>
</ul>
<p>©2024 Sora Dental Clinic</p>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="assets/main.js"></script>
</body>
</html>CSS
@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
/*----------------------共通設定----------------------------*/
:root {
--baseColor: #081B23;
--subColor: #e7f5f8;
--accentColor: #18728e;
--white: #ffffff;
--grey: #f4f4f4;
--mgBg: 50px;
--mgMd: 30px;
}
html {
scroll-behavior: smooth;
/*----スクロールでセクションがヘッダーに重ならないための設定----*/
scroll-padding-top: 100px;
}
body {
width: 100%;
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
color: var(--baseColor);
background: var(--white);
letter-spacing: 0.1em;
overflow-x: hidden;
}
img {
width: 100%;
object-fit: cover;
}
p {
font-size: 16px;
line-height: 1.7em;
}
a {
opacity: 1;
transition: all 0.5s ease;
}
a:hover {
opacity: 0.7;
}
.center {
text-align: center;
}
/*-------ローディング--------*/
.loader {
padding: 0;
margin: 0;
width: 100%;
height: 100vh;
background: radial-gradient(#D4F1F8, #E7F5F8);
position: fixed;
z-index: 1000;
}
.loader__item {
width: 200px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pop_dental {
width: 20px;
height: 20px;
position: absolute;
background-image: url("../img/dental_pop.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
left: 15%;
transform-origin: 0;
animation: pop_dental .5s alternate infinite ease;
}
@keyframes pop_dental {
0% {
top: 60px;
transform: scaleX(1.2);
}
40% {
transform: scaleX(1);
}
100% {
top: 0;
}
}
.pop_dental:nth-child(2) {
left: 45%;
animation-delay: .2s;
}
.pop_dental:nth-child(3) {
left: auto;
right: 15%;
animation-delay: .3s;
}
.shadow {
width: 20px;
height: 4px;
border-radius: 50%;
background-color: rgba(24, 114, 142, 0.2);
position: absolute;
top: 110px;
transform-origin: 50%;
z-index: -1;
left: 15%;
filter: blur(1px);
animation: shadow .5s alternate infinite ease;
}
@keyframes shadow {
0% {
transform: scaleX(1.5);
}
40% {
transform: scaleX(1);
opacity: .7;
}
100% {
transform: scaleX(.2);
opacity: .4;
}
}
.shadow:nth-child(4) {
left: 45%;
animation-delay: .2s
}
.shadow:nth-child(5) {
left: auto;
right: 15%;
animation-delay: .3s;
}
.loader span {
position: absolute;
top: 75px;
font-family: 'Open Sans', sans-serif;
font-size: 30px;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--white);
left: 15%;
}
/*------------jsでフェードイン-------------*/
.js-fade {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: all 1s;
}
.scroll {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
/*-----------ヘッダーナビ-------------*/
.header {
position: fixed;
z-index: 999;
width: 100%;
height: 80px;
background: var(--white);
}
.header__flex {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 15px;
}
.header__logo {
display: flex;
align-items: center;
}
.header__logo img {
width: 25px;
margin-right: 5px;
}
.header__pc__tel {
display: none;
}
.header__navi__list {
position: fixed;
z-index: 999;
top: 0;
right: -2000px;
width: 100%;
height: 100vh;
background: var(--subColor);
transition: all 0.6s;
padding-top: 50px;
font-size: 20px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
text-align: center;
}
/*アクティブクラスがついたら位置を0に*/
.header__navi__list.panelactive {
right: 0;
}
/*リストのレイアウト設定*/
.header__navi__list li a {
display: block;
text-align: center;
padding: 20px 0;
opacity: 1;
}
/*-----ハンバーガーメニューでは非表示-----*/
.header__navi__sns {
display: none;
}
/*-------------ハンバーガー---------------*/
.header__navi__open {
position: fixed;
z-index: 9999;
top: 10px;
right: 15px;
cursor: pointer;
width: 50px;
height: 50px;
transition: all 1s ease;
}
/*ボタン内側*/
.header__navi__open span {
display: inline-block;
transition: all .4s;
/*アニメーションの設定*/
position: absolute;
left: 14px;
height: 2px;
border-radius: 2px;
background: var(--accentColor);
}
.header__navi__open span:nth-of-type(1) {
top: 15px;
width: 30px;
}
.header__navi__open span:nth-of-type(2) {
top: 26px;
width: 30px;
}
.header__navi__open span:nth-of-type(3) {
top: 37px;
width: 30px;
}
/*---activeでの動き---*/
.header__navi__open.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-135deg);
}
.header__navi__open.active span:nth-of-type(2) {
opacity: 0;
}
.header__navi__open.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(675deg);
}
/*-------FV部分-------*/
.header__fv {
width: 100%;
height: 100vh;
background-image: url("../img/fv.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.header__fv__contents {
width: 90%;
position: absolute;
top: 60%;
left: 0;
}
.header__fv__contents img {
object-fit: contain;
width: 280px;
}
.header__fv__contents p {
margin-left: 15px;
font-weight: 600;
}
/*------------スクロールダウン-------------*/
.scrolldown {
position: absolute;
bottom: 10px;
right: 50px;
}
/*Scrollテキストの描写*/
.scrolldown span {
/*描画位置*/
position: absolute;
left: 10px;
bottom: 10px;
/*テキストの形状*/
color: var(--baseColor);
font-size: 14px;
letter-spacing: 0.05em;
/*縦書き設定*/
writing-mode: vertical-rl;
}
/* 丸の描写 */
.scrolldown:before {
content: "";
/*描画位置*/
position: absolute;
bottom: 0;
left: -4px;
/*丸の形状*/
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--baseColor);
/*丸の動き1.6秒かけて透過し、永遠にループ*/
animation: circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
0% {
bottom: 70px;
}
100% {
bottom: -5px;
}
}
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
0% {
opacity: 0
}
50% {
opacity: 1;
}
80% {
opacity: 0.9;
}
100% {
opacity: 0;
}
}
/* 線の描写 */
.scrolldown:after {
content: "";
/*描画位置*/
position: absolute;
bottom: 0;
left: 0;
/*線の形状*/
width: 2px;
height: 70px;
background: var(--baseColor);
}
/*-------イントロダクション-------*/
.intro {
padding: var(--mgBg) 15px;
}
.intro img {
width: 60px;
object-fit: contain;
margin: 0 auto var(--mgMd) auto;
}
.intro p:first-of-type {
font-size: 24px;
font-weight: 500;
margin-bottom: var(--mgMd);
}
.intro p span {
position: relative;
}
.intro p span::after {
content: '';
position: absolute;
width: 100%;
height: 10px;
background: var(--subColor);
border-radius: 10px;
bottom: 4px;
left: 0;
z-index: -1;
}
/*--------セクションタイトル共通項目-------*/
.section__title {
text-align: center;
margin-bottom: var(--mgMd);
}
.section__title span {
display: block;
}
.section__title__ja {
font-size: 22px;
font-weight: 400;
}
.section__title__img {
width: 25px;
object-fit: contain;
margin: -5px auto 10px auto;
}
.section__title__en {
font-family: "Open Sans", sans-serif;
font-size: 18px;
}
/*---------当院の特徴---------*/
#feature {
background: var(--grey);
padding: var(--mgBg) 15px;
}
.feature__content {
display: flex;
flex-direction: column;
padding: 15px;
border-radius: 5px;
margin-bottom: 30px;
}
.feature__content:last-child {
margin-bottom: 0;
}
.blue {
background: var(--accentColor);
color: var(--white);
}
.white {
background: var(--white);
color: var(--baseColor);
}
.feature__content__img img {
border-radius: 5px;
}
.feature__content__inner img {
width: 58px;
display: inline-block;
}
.sp_right {
text-align: right;
}
h3 {
font-weight: 600;
font-size: 18px;
margin-bottom: 5px;
}
/*---------診療科目---------*/
#medicalMenu {
background: linear-gradient(#E7F5F8, #D4F1F8);
padding: var(--mgMd) 15px;
}
#medicalMenu .container {
border-radius: 10px;
border: 2px solid var(--white);
padding: var(--mgMd) 10px;
}
.medicalMenu__contents {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
justify-items: center;
align-items: center;
}
.medicalMenu__contents li {
border-radius: 50%;
background: var(--white);
width: 150px;
height: 150px;
text-align: center;
padding: 30px 0;
}
.medicalMenu__contents li picture {
display: block;
height: 60px;
width: 90px;
margin: 0 auto 10px;
}
/*--------診療時間-------*/
#consultationHours {
padding: var(--mgBg) 15px;
}
#consultationHours picture {
display: block;
margin: 0 auto 10px;
max-width: 345px;
}
/*-------お知らせ---------*/
#news {
padding: var(--mgMd) 15px;
background: var(--grey);
}
#news .container {
background: var(--white);
border-radius: 10px;
padding: var(--mgMd) 15px;
}
.news__list a {
display: block;
}
/*---リストの余白調整---*/
.news__list__1,
.news__list__2 {
border-bottom: 1px dashed var(--baseColor);
}
.news__list__1 a {
padding-bottom: 30px;
}
.news__list__2 a {
padding: 30px 0;
}
.news__list__3 a {
padding-top: 30px;
}
/*-----日付・カテゴリー調整-----*/
.category {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.category p:nth-child(1) {
margin-right: 10px;
}
.category p:nth-child(2) {
background: var(--subColor);
font-size: 14px;
padding: 5px 15px;
border-radius: 30px;
line-height: 1em;
}
/*------イメージ画像------*/
.image {
width: 100%;
height: 220px;
background-image: url("../img/clinic_image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
/*--------フッター--------*/
.footer__contents {
padding: var(--mgMd) 15px;
}
.footer__logo {
text-align: center;
}
.footer__logo img {
width: 40px;
margin-bottom: 15px;
}
.footer__contents__text {
max-width: 375px;
margin-inline: auto;
}
.footer__contents__text p {
line-height: 1.3em;
margin-bottom: 25px;
}
.footer__clinicName {
font-size: 24px;
margin-bottom: 15px;
}
.footer__access p {
margin-bottom: 5px;
}
.footer__access-heading {
font-size: 18px;
font-weight: normal;
margin-bottom: 4px;
}
.footer__access {
margin-bottom: 20px;
}
.footer__access-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.footer__contact {
display: flex;
flex-direction: column;
margin-bottom: 25px;
gap: 25px;
}
.footer__tel a {
font-size: 26px;
}
.footer__button {
display: block;
padding: 13px 50px;
background: var(--accentColor);
color: var(--white);
border-radius: 30px;
}
.footer__sns {
display: flex;
justify-content: center;
margin-bottom: 25px;
gap: 50px;
}
.footer__sns img {
width: 30px;
margin-bottom: 0;
}
.footer__contents__map iframe {
filter: grayscale(30%);
width: 100%;
height: 180px;
margin-bottom: 10px;
}
.footer__contents__map a {
display: inline-block;
position: relative;
}
.footer__contents__map a::after {
font-family: "Material Symbols Outlined";
/* CDNで読み込んだものを指定 */
content: "\e89e";
/* Code Point */
color: var(--accentColor);
vertical-align: middle;
font-size: 20px;
}
.footer__menu {
background: var(--accentColor);
color: var(--white);
padding: var(--mgMd) 15px;
}
.footer__menu__navi {
display: flex;
flex-wrap: wrap;
}
.footer__menu__navi li {
width: 50%;
margin-bottom: 30px;
}
.footer__menu__navi li:last-of-type {
margin-bottom: 50px;
}
.footer__menu p {
font-size: 14px;
}
/*-----------------------レスポンシブ------------------------*/
@media screen and (min-width: 800px) {
html {
scroll-padding-top: 200px;
}
/*----改行解除-------*/
.br_sp {
display: none;
}
/*------ヘッダー調整-----*/
.header {
height: 160px;
padding: 0 15px;
}
.header__flex {
padding: 40px 0 60px 0;
}
.header__logo h1 {
font-size: 26px;
}
.header__navi__list {
position: relative;
z-index: 999;
top: 0;
right: 0;
width: 100%;
height: 0;
background: var(--white);
transition: all 0.6s;
padding-top: 0;
font-size: 16px;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.header__navi__menu {
display: block;
padding: 0 0 0 40px;
}
.header__navi__list li a {
padding-top: 0;
}
/*------SNS表示------*/
.header__navi__sns {
display: block;
}
.header__navi__sns img {
width: 25px;
}
.header__sp__tel {
display: none;
}
.header__pc__tel {
display: block;
text-align: right;
font-size: 21px;
}
.header__pc__tel span {
font-size: 26px;
}
.header__navi__menu a {
padding: 0 40px;
}
/*--------ハンバーガーアイコン非表示------*/
.header__navi__open {
display: none;
}
/*-------FV-------*/
.header__fv__contents img {
width: 500px;
}
#consultationHours picture {
max-width: none;
}
/*---------診療科目---------*/
.medicalMenu__contents {
max-width: 950px;
margin: 0 auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px;
}
.medicalMenu__contents li {
border-radius: 50%;
background: var(--white);
max-width: 200px;
max-height: 200px;
text-align: center;
padding: 20px 0;
}
.medicalMenu__contents li picture {
display: block;
height: 83px;
width: 133px;
margin: 0 auto 10px;
}
.footer__access {
margin-bottom: 36px;
}
.footer__access-list {
margin-left: 20px;
}
/*----footerのボタン横並び-----*/
.footer__contents {
width: 80%;
margin: 0 auto;
}
.footer__contents__text {
max-width: none;
}
.footer__contact {
flex-direction: row;
align-items: center;
gap: 65px;
margin: 0 0 36px;
}
}
@media screen and (min-width: 1100px) {
:root {
--mgBg: 70px;
--mgMd: 35px;
}
/*------セクション余白設定------*/
.container {
max-width: 1200px;
margin: 0 auto;
}
/*------ヘッダー調整-----*/
.header {
padding: 0 85px;
}
/*------FV-----*/
.header__fv__contents {
top: 60%;
left: 85px;
}
.header__fv__contents img {
width: 610px;
}
.header__fv__contents p {
margin-left: 10px;
font-size: 25px;
}
/*-------イントロダクション-------*/
.intro {
max-width: 850px;
margin: 0 auto;
}
.intro img {
width: 80px;
}
.intro p:first-of-type {
font-size: 36px;
}
.intro p:nth-of-type(2) {
font-size: 23px;
}
/*--------セクションタイトル共通項目-------*/
.section__title__ja {
font-size: 36px;
}
.section__title__img {
width: 50px;
margin: 0 auto 10px auto;
}
.section__title__en {
font-size: 20px;
}
/*---------当院の特徴---------*/
.feature__contents {
margin-bottom: var(--mgBg);
}
.feature__content {
flex-direction: row;
padding: 0;
border-radius: 10px;
margin-bottom: 120px;
position: relative;
}
.feature__content:last-child {
margin-bottom: 0;
}
.blue,
.white {
background: var(--grey);
}
.blue .feature__content__inner {
position: absolute;
top: 50px;
right: 0;
background: var(--accentColor);
color: var(--white);
max-width: 700px;
width: 60%;
height: 400px;
z-index: 1;
border-radius: 10px;
}
.white .feature__content__inner {
position: absolute;
top: 50px;
left: 0;
background: var(--white);
color: var(--baseColor);
max-width: 700px;
width: 60%;
height: 400px;
z-index: 1;
border-radius: 10px;
}
.blue .feature__content__img,
.white .feature__content__img {
max-width: 700px;
width: 60%;
z-index: 10;
}
.white {
flex-direction: row-reverse;
}
.feature__content__img img {
border-radius: 10px;
}
.feature__content__inner img {
width: 112px;
margin-top: 20px;
}
.blue .feature__content__inner img {
margin-right: 20px;
}
.white .sp_right {
text-align: left;
}
.white .feature__content__inner img {
margin-left: 20px;
}
.feature__content__text {
width: 330px;
height: fit-content;
position: absolute;
inset: 0;
margin: auto;
}
.blue .feature__content__text {
transform: translateX(60px);
}
.white .feature__content__text {
transform: translateX(-60px);
}
h3 {
font-size: 24px;
margin-bottom: 20px;
}
/*---------診療科目---------*/
.medicalMenu__contents {
gap: 50px;
}
.medicalMenu__contents li {
border-radius: 50%;
background: var(--white);
width: 200px;
height: 200px;
text-align: center;
padding: 40px 0;
}
.medicalMenu__contents li img {
height: 83px;
}
.medicalMenu__contents p {
font-size: 18px;
}
/*--------診療時間-------*/
#consultationHours {
padding: var(--mgBg) 15px;
}
#consultationHours .container {
max-width: 900px;
}
/*-------お知らせ---------*/
#news .container {
display: flex;
justify-content: space-between;
padding: 50px;
}
#news .section__title {
text-align: left;
}
#news .section__title__img {
margin-left: 0;
}
.news__list {
width: 70%;
}
.news__list a {
display: block;
}
.news__list li a {
display: flex;
}
.news__list li a > p {
font-size: 18px;
}
/*---リストの余白調整---*/
.news__list__1 a,
.news__list__2 a,
.news__list__3 a {
padding: 30px 0 30px 20px;
}
.news__list__3 a {
border-bottom: 1px dashed var(--baseColor);
}
/*-----日付・カテゴリー調整-----*/
.category {
margin-right: 50px;
}
.category p:nth-child(1) {
margin-right: 30px;
}
.category p:nth-child(2) {
background: var(--subColor);
font-size: 14px;
padding: 5px 15px;
border-radius: 30px;
line-height: 1em;
}
/*------イメージ画像----*/
.image {
height: 400px;
background-attachment: fixed;
}
/*------フッター--------*/
.footer__contents {
width: 100%;
max-width: 1200px;
padding-block: var(--mgBg);
display: flex;
justify-content: space-between;
gap: 45px;
}
.footer__contents__text {
padding: 0;
flex: 1;
}
.footer__logo {
text-align: left;
}
.footer__contents__text p {
margin-bottom: 20px;
}
.footer__clinicName {
font-size: 28px;
}
.footer__contact {
justify-content: flex-start;
}
.footer__tel a {
font-size: 26px;
}
.footer__button {
padding: 13px 50px;
background: var(--accentColor);
color: var(--white);
border-radius: 30px;
margin-bottom: 0;
}
.footer__sns {
display: flex;
justify-content: flex-start;
margin-bottom: 25px;
gap: 50px;
}
.footer__sns img {
width: 40px;
}
.footer__contents__map {
flex: 1;
}
.footer__contents__map iframe {
height: 400px;
}
.footer__menu {
padding: 50px 15px;
}
.footer__menu__flex {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.footer__menu__navi {
flex-wrap: nowrap;
}
.footer__menu__navi li {
width: auto;
margin: 0 40px 0 0;
}
.footer__menu__navi li:last-of-type {
margin-bottom: 0;
}
.footer__menu p {
font-size: 14px;
}
}
JS
$(function () {
$(window).scroll(function () {
$('.js-fade').each(function () {
var pos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > pos - windowHeight + 100) {
$(this).addClass('scroll');
}
});
});
});
/*ハンバーガーメニュー*/
$(".header__navi__open").click(function () {//ボタンがクリックされたら
$(this).toggleClass('active');//ボタン自身に activeクラスを付与し
$(".header__navi__list").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与
});
$(".header__navi__list a").click(function () {//ナビゲーションのリンクがクリックされたら
$(".header__navi__open").removeClass('active');//ボタンの activeクラスを除去し
$(".header__navi__list").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去
});
/*ローディング*/
$(function () {
function end_loader() {
$('.loader').fadeOut(800);
}
$(window).on('load', function () {
setTimeout(function () {
end_loader();
}, 2000)
})
})解説
まずは、模写コーディングの準備を読んで準備をしましょう。そして、模写コーディングの手順を参考にしながら挑戦してみましょう。