2022-12-23

タイムラインを作成

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。

Vertical Timeline

さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。

<div class="cd-timeline js-cd-timeline">
<div class="container max-width-lg cd-timeline__container">


<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 1</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2019/10</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->




<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->


</div><!-- container -->
</div><!-- cd-timeline -->

その他のタイムライン

https://codepen.io/paulhbarker/pen/apvGdv

https://codepen.io/cjl750/pen/mXbMyo

https://codepen.io/viktorjs/pen/KQZYjo

https://codepen.io/bcarvalho/pen/RZqmZX

12月22日完成データ（モバイル幅で作成するwebサイト）

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>モバイル幅で作成するwebサイト</title>
<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=Zen+Dots&display=swap" rel="stylesheet">

<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<header>
<h1>sneakers-shop</h1>
<nav id="pc-nav">
<ul>
<li><a href="#top">トップ</a></li>
<li><a href="#item">商品紹介</a></li>
<li><a href="#question">よくある質問</a></li>
<li><a href="#shop">店舗情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<div class="logo-box">
<p><img src="img/logo.svg" alt=""></p>

<div class="logo-2">
<img src="img/logo2.svg" alt="">
</div>
</div><!-- /.logo-box -->


<div class="container">

<div class="sp-header">
<h2><a href="#top">sneakers-shop</a></h2>
<p id="ham-btn"><span></span></p>
</div><!-- /.sp-header -->
<nav id="sp-nav">
<ul>
<li><a href="#top">トップ</a></li>
<li><a href="#item">商品紹介</a></li>
<li><a href="#question">よくある質問</a></li>
<li><a href="#shop">店舗情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>

<div class="main-visual">
<img src="img/main2.jpg" alt="">
</div>

<div class="main-copy">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quo magnam. Quasi, dicta iste!</p>
</div>

<div id="item">
<h4>商品紹介</h4>

<input type="radio" value="all" name="item" checked id="all">

<label for="all" class="current">All</label>

<input type="radio" value="mens" name="item" id="mens">

<label for="mens">Mens</label>

<input type="radio" value="womens" name="item" id="womens">

<label for="womens">Womens</label>

<div class="grid">
<div class="photo-box" data-category="mens">
<img src="img/01.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/02.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/03.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/04.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/05.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/06.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/07.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/08.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/09.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/10.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/03.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/04.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->


</div><!-- /.grid -->
</div><!-- /.item -->



<div id="question">
<h4>よくある質問</h4>

<details open>
<summary>
<h5>返品・交換はできますか？</h5>
</summary>
<p>室内での試し履き、化粧箱があれば返品・同商品のサイズ交換対応をしております。</p>
</details>

<details>
<summary>
<h5>注文した商品はいつ届きますか。</h5>
</summary>
<p>神奈川県の配送センターより出荷し、国内であればご注文日から2、3日前後でお届けいたします。</p>
</details>

<details>
<summary>
<h5>コンビニ受け取りはできますでしょうか。</h5>
</summary>
<p>当ストアではコンビニ受け取りサービスは行っておりません。</p>
</details>

</div><!-- /.question -->



<div id="shop">
<h4>店舗情報</h4>
<dl class="shop-list">
<dt>住所</dt>
<dd>東京都豊島区南池袋</dd>
<dt>最寄り駅</dt>
<dd>JR池袋駅から徒歩5分</dd>
<dt>電話番号</dt>
<dd><a href="tel:0300001111" class="phone">03-0000-1111</a></dd>
<dt>営業時間</dt>
<dd>11:00~20:00</dd>
</dl>


<div class="map-wrapper">
<h5>Map</h5>
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9452892496847!2d139.71212651460664!3d35.72756403503821!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1671668773279!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div><!-- /.map-wrapper -->
</div><!-- /.shop -->
<footer>
<p><small>&copy; <span id="year"></span> sneakers-shop All rights reserved</small></p>
<ul class="sns">
<li><a href="#"><img src="img/icon1.svg" alt=""></a></li>
<li><a href="#"><img src="img/icon2.svg" alt=""></a></li>
<li><a href="#"><img src="img/icon3.svg" alt=""></a></li>
</ul>
<p class="to-top"><a href="#top">トップへ</a></p>


</footer>
</div><!-- /.container -->


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
<script>
$(function(){

//ハンバーガーボタン
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#sp-nav').toggleClass('slide');
});

//spナビのコントロール
$('#sp-nav').on('click',function(){
$(this).removeClass('slide');
$('#ham-btn').removeClass('is-active');
});


//フィルタリング部分
$('label').on('click',function(){
$(this).addClass('current').siblings('label').removeClass('current');
});

//西暦の取得
let thisYear = new Date().getFullYear();
if(thisYear > 2022){
$('#year').text('2022-'+thisYear);
}else{
$('#year').text(thisYear);
}

});
</script>
</body>
</html>

style.css

@charset "utf-8";

/* PC部分のレイアウト */
body{
width: 100%;
background-repeat: repeat;
background-color: #e3d9e4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%236f8fcf' fill-opacity='0.41'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

header{
width: 100%;
height: 80px;
background-color: #f6f0d1;
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
h1{
font-family: 'Zen Dots', cursive;
font-size: 36px;
}

#pc-nav>ul{
display: flex;
}
#pc-nav li{
margin: 0 20px;
}
#pc-nav a{
padding: 20px 0;
color: #222;
position: relative;
display: block;
text-align: center;
overflow: hidden;
}
#pc-nav a::after{
display: block;
content: "";
width: 100%;
height: 5px;
background-color: #6ca1e2;
position: absolute;
transform: translateX(-100%);
transition: 0.2s;
}
#pc-nav a:hover::after{
transform: translateX(0);
}

.logo-box{
display: flex;
align-items: center;
width: 36%;
height: 400px;
background-color: #e9cae9;
position: fixed;
left: 10%;
top: 120px;
}
.logo-box>p{
width: 100%;
}
.logo-2{
position: absolute;
right: -80px;
top: -60px;
width: 180px;
height: 180px;
animation: move 20s linear infinite;
}
@keyframes move{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}


/* sp部分のレイアウト */
.container{
max-width: 500px;
background-color: #fef9ee;
margin: 120px 0 100px 55%;
box-shadow: 0 0 6px #bdbdbd;
}
html{
scroll-behavior: smooth;
}
#top{
scroll-margin-top: 120px;
}
#item{
scroll-margin-top: 100px;
margin-bottom: 100px;
}
#question{
scroll-margin-top: 100px;
margin-bottom: 100px;
}
#shop{
scroll-margin-top: 100px;
margin-bottom: 100px;
}
#ham-btn{
display: none;
}
.sp-header{
display: none;
}
#sp-nav{
display: none;
}
/* .containerの中身部分 */
.main-visual{
width: 100%;
height: 320px;
margin-bottom: 50px;
}
.main-visual>img{
object-fit: cover;
object-position: right center;
width: 100%;
height: 100%;
}
.main-copy{
padding: 0 20px;
font-family: 'Zen Dots', cursive;
margin-bottom: 100px;
}
.main-copy>h3{
font-size: 24px;
margin-bottom: 14px;
text-align: center;
}
.main-copy>p{
line-height: 2;
}
h4{
font-size: 26px;
padding: 10px 0 20px 10px;
}

/* 商品情報部分 */
.grid{
columns: 2;
column-gap: 20px;
padding: 0 10px;
}
.photo-box{
margin-bottom: 40px;
padding: 10px;
transition: 0.2s;
break-inside: avoid;/* 中身が途中で改行されないようにする */
}
.photo-box>p{
margin-top: 10px;
line-height: 1.6;
}
.photo-box:hover{
box-shadow: 0 0 6px #6b6b6b;
}

/* フィルタリング部分 */
[type="radio"]{
display: inline-block;
transform: scale(1.5);
margin: 20px 5px;
accent-color: #a7121c;
display: none;
}
label{
display: inline-block;
border: 1px solid #555;
padding: 10px 24px;
margin: 0 10px 20px;
cursor: pointer;
}
label.current,label:hover{
background-color: #555;
color: #FFF;
}

.box{
width: 200px;
height: 200px;
background-color: #bdbdbd;
}
#mens:checked~.grid>.photo-box:not([data-category="mens"]){
display: none;
}
#womens:checked~.grid>.photo-box:not([data-category="womens"]){
display: none;
}


/* 質問部分 */
details{
padding: 10px;
}
summary{
display: block;/* 黒い矢印を消すiOS版 */
list-style: none;/* 黒い矢印を消す */
}
summary::-webkit-details-marker{
display: none;/* 黒い矢印を消すiOS版 */
}
summary>h5{
font-size: 20px;
background-color: #e3d9e4;
padding: 10px 20px;
}
summary>h5::before{
display: inline-block;
content: "Q";
color: #e93479;
font-size: 22px;
margin-right: 10px;
}
details>p{
background-color: #f6f0d1;
padding: 10px 20px;
}
summary>h5:hover{
cursor: pointer;
background-color: #d5c6d7;
}


/* 店舗情報部分 */
.shop-list{
width: 96%;
margin: 0 auto 50px;
display: flex;
flex-wrap: wrap;
border: 1px solid #6b6b6b;
}
.shop-list>dt{
width: 30%;
background-color: #cfdef0;
padding: 20px 0 20px 10px;
border-right: 1px solid #6b6b6b;
}
.shop-list>dd{
width: 70%;
padding: 20px 0 20px 10px;
}
.shop-list>:is(dt:nth-of-type(n+2),dd:nth-of-type(n+2)){
border-top: 1px solid #6b6b6b;
}
.phone{
pointer-events: none;
color: #222;
}

.map-wrapper{
width: 96%;
margin:0 auto 50px;
}
#shop h5{
font-size: 24px;
margin-bottom: 16px;
}
.g-map{
width: 100%;
aspect-ratio: 1 / 0.8;/* 横の比率/縦の比率 */
}

/* footer部分 */
footer{
background-color: #e1ecf9;
}
footer>p{
text-align: center;
padding: 20px 0;
font-size: 18px;
}
.sns{
display: flex;
justify-content:right;
margin-bottom: 30px;
}
.sns>li{
width: 44px;
margin: 0 6px;
}
.sns img{
transition: 0.2s;
}
.sns img:hover{
filter: opacity(70%)
}
.to-top{
width: 100%;
padding: 0;
background-color: #3d3d3d;
}
.to-top>a{
display: block;
color: #FFF;
padding: 20px 0;
}

@media (max-width:1200px){
header{
padding: 0 20px;
}
.logo-box{
left: 5%;
}
.container{
margin: 120px 10px 100px 45%;
}
}

@media (max-width:900px){
header{
display: none;
}
.logo-box{
display: none;
}
.container{
margin: 0 auto;
}

/* ハンバーガーボタン */
#ham-btn{
display: block;
width: 60px;
height: 60px;
background-color: #d0eca0;
position: relative;
}
#ham-btn>span{
display: block;
width: 30px;
height: 3px;
background-color: #222;
position: absolute;
top: -16px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
#ham-btn>span::after{
display: block;
content: "";
width: 30px;
height: 3px;
background-color: #222;
position: absolute;
top: 16px;
transition: 0.2s;
}
#ham-btn.is-active>span{
transform: rotate(45deg);
top: 0;
}
#ham-btn.is-active>span::after{
top: 0;
transform: rotate(90deg);
}
.sp-header{
width: 100%;
background-color: #FFF;
box-shadow: 0 4px 4px #DDD;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
position: fixed;
top: 0;
right: 0;
left: 0;
margin: auto;
z-index: 100;
}
.sp-header>h2>a{
font-family: 'Zen Dots', cursive;
color: #222;
}

/* sp用ナビ */
#sp-nav{
display: block;
width: 100%;
height: calc(100vh - 60px);
background-color: #5559;
position: fixed;
top: 60px;
left: 0;
z-index: 100;
padding-left: 30%;
transform: translateX(100%);
transition: 0.2s;
}
#sp-nav.slide{
transform: translateX(0);
}
#sp-nav>ul{
background-color: #555;
height: calc(100vh - 60px);
padding: 80px 30px 0;
}
#sp-nav li{
margin-bottom: 18px;
}
#sp-nav a{
display: block;
color: #FFF;
border-bottom: 1px solid #FFF;
}

}


@media (max-width:500px){
/* 商品情報部分 */
.grid{
columns: 1;
}
label{
display: block;
width: 60%;
margin: 10px 20px;
}
}

2022-12-20

12月20日の作業データ（家具屋のECサイト）

2022年11月クラス

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>家具屋のECサイトの作成</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Furniture-store</h1>
</header>
<nav id="g-nav">
<ul>
<li><a href="#">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>

<nav id="g-nav-sp">
<ul>
<li><a href="#">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>

<main>
<div class="content-wrapper">
  <div class="content-box">
    <div class="content-txt">
      <h2>Lorem, ipsum dolor.</h2>
      <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p>
      <p class="more-btn"><a href="#">view more</a></p>
    </div><!-- /.content-txt -->
    <div class="content-img">
      <img src="img/main01.jpg" alt="">
    </div><!-- /.content-img -->
  </div><!-- /.content-box -->
  <div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
<div class="content-img">
<img src="img/main02.jpg" alt="">
</div><!-- /.content-img -->
  </div><!-- /.content-box -->
  <div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
<div class="content-img">
<img src="img/main03.jpg" alt="">
</div><!-- /.content-img -->
  </div><!-- /.content-box -->
</div><!-- /.content-wrapper -->

<div class="col-1">
<h2>Lorem ipsum dolor<br>sit amet consectetur</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet perferendis deserunt voluptatem vero quidem.</p>
</div><!-- /.col-1 -->

<div class="col-3-wrapper">

<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-1.jpg" alt="">
</div>
<div class="col-3-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="icon"><img src="img/icon-1.svg" alt=""></p>
</div>
</div><!-- /.col-3-box -->

<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-2.jpg" alt="">
</div>
<div class="col-3-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="icon"><img src="img/icon-2.svg" alt=""></p>
</div>
</div><!-- /.col-3-box -->

<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-3.jpg" alt="">
</div>
<div class="col-3-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="icon"><img src="img/icon-3.svg" alt=""></p>
</div>
</div><!-- /.col-3-box -->
</div><!-- /.col-3-wrapper -->
</main>

<footer>
<p><small>&copy; 2022 Furniture-store</small></p>
<ul class="sns">
<li><a href="#">tw</a></li>
<li><a href="#">インスタ</a></li>
<li><a href="#">mail</a></li>
</ul>
</footer>
</body>
</html>

style.css

@charset "utf-8";

/* 変数の設定 */
:root{
--color_1:#eeeed1;
--color_2:#d1eed7;
--color_3:#eed9d1;
--color_4:#efd9f2;
--color_5:#ddeed1;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
img{
vertical-align: bottom;
}

/* PCレイアウト */
header{
height: 100px;
background-color: var(--color_1);
text-align: center;
}
h1{
line-height: 100px;
}
#g-nav{
height: 50px;
background-color: var(--color_2);
}
#g-nav>ul{
display: flex;
justify-content: center;
align-items: center;
height: 50px;
max-width: 960px;
margin: 0 auto;
}
#g-nav li{
margin: 0 20px;
}
#g-nav a{
color: #222;
padding: 10px 14px;
}
#g-nav a:hover{
text-decoration: underline 4px #ee96eb;
text-underline-offset: 5px;
}
/* sp用のナビは非表示にする */
#g-nav-sp{
display: none;
}

/* メイン部分のレイアウト */
main{
padding: 10px;
max-width: 1366px;
margin: 0 auto 10px;
}
.content-box{
display: flex;
justify-content: space-between;
height: 600px;
margin-bottom: 10px;
}
.content-box:nth-of-type(odd){
flex-direction: row-reverse;
}
.content-txt{
width: calc((100% - 20px) / 3);
background-color: var(--color_3);
padding: 40px;
}
.content-txt>h2{
margin-bottom: 40px;
}
.text{
font-size: 18px;
line-height: 2;
margin-bottom: 60px;
}
.more-btn{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #f9fcde;
}
.more-btn>a{
display: block;
line-height: 50px;
text-align: center;
color: #222;
}
.more-btn>a::after{
display: inline-block;
content: "";
width: 10px;
height: 10px;
border-top: 1px solid #222;
border-right: 1px solid #222;
transform: rotate(45deg);
margin-left: 16px;
}

.content-img{
width: calc((100% - 20px) / 3 * 2 + 10px);
height: 600px;
}
.content-img>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.content-box:nth-of-type(2)>.content-txt{
background-color: var(--color_4);
}
.content-box:nth-of-type(3)>.content-txt{
background-color: var(--color_5);
}

2022-12-12

12月12日の作業データ(スニーカーショップ)

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>モバイル幅で作成するwebサイト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<header>
<h1>sneakers-shop</h1>
<nav id="pc-nav">
<ul>
<li><a href="#top">トップ</a></li>
<li><a href="#item">商品紹介</a></li>
<li><a href="#question">よくある質問</a></li>
<li><a href="#shop">店舗情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<div class="logo-box"></div>
<div class="container">
<div class="sp-header">
<h2>sneakers-shop</h2>
<p id="ham-btn"><span></span></p>
</div><!-- /.sp-header -->
<nav id="sp-nav">
<ul>
<li><a href="#top">トップ</a></li>
<li><a href="#item">商品紹介</a></li>
<li><a href="#question">よくある質問</a></li>
<li><a href="#shop">店舗情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<div class="main-visual">
<img src="img/main2.jpg" alt="">
</div>
<div class="main-copy">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quo magnam. Quasi, dicta iste!</p>
</div>
<div id="item">
<h4>商品紹介</h4>
</div><!-- /.item -->
<div id="question">
<h4>よくある質問</h4>
</div><!-- /.question -->
<div id="shop">
<h4>店舗情報</h4>
</div><!-- /.shop -->
<footer>
<p><small>&copy; 2022 sneakers-shop All rights reserved</small></p>
<ul class="sns">
<li><a href="#">インスタ</a></li>
<li><a href="#">tw</a></li>
<li><a href="#">LINE</a></li>
</ul>
<p class="to-top"><a href="#top">トップへ</a></p>
</footer>
</div><!-- /.container -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
<script>
$(function(){
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
});
});
</script>
</body>
</html>

style.css

@charset "utf-8";

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;}

/* PC部分のレイアウト */
body{
width: 100%;
background-repeat: repeat;
background-color: #e3d9e4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%236f8fcf' fill-opacity='0.41'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

header{
width: 100%;
height: 80px;
background-color: #f6f0d1;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}

#pc-nav>ul{
display: flex;
}
#pc-nav li{
margin: 0 20px;
}
#pc-nav a{
padding: 20px 0;
color: #222;
position: relative;
display: block;
text-align: center;
overflow: hidden;
}
#pc-nav a::after{
display: block;
content: "";
width: 100%;
height: 5px;
background-color: #6ca1e2;
position: absolute;
transform: translateX(-100%);
transition: 0.2s;
}
#pc-nav a:hover::after{
transform: translateX(0);
}

.logo-box{
width: 36%;
height: 400px;
background-color: #73d2b4;
position: fixed;
left: 10%;
top: 120px;
}
/* sp部分のレイアウト */
.container{
max-width: 500px;
background-color: #fef9ee;
margin: 120px 0 100px 55%;
box-shadow: 0 0 6px #bdbdbd;
}
html{
scroll-behavior: smooth;
}
#top{
scroll-margin-top: 120px;
}
#item{
height: 100vh;
scroll-margin-top: 100px;
}
#question{
height: 100vh;
scroll-margin-top: 100px;
}
#shop{
height: 100vh;
scroll-margin-top: 100px;
}




#ham-btn{
display: none;
}

@media (max-width:1200px){
header{
padding: 0 20px;
}
.logo-box{
left: 5%;
}
.container{
margin: 120px 10px 100px 45%;
}
}

@media (max-width:900px){
header{
display: none;
}
.logo-box{
display: none;
}
.container{
margin: 0 auto;
}

/* ハンバーガーボタン */
#ham-btn{
display: block;
width: 60px;
height: 60px;
background-color: #d0eca0;
position: relative;
}
#ham-btn>span{
display: block;
width: 30px;
height: 3px;
background-color: #222;
position: absolute;
top: -16px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
#ham-btn>span::after{
display: block;
content: "";
width: 30px;
height: 3px;
background-color: #222;
position: absolute;
top: 16px;
transition: 0.2s;
}
#ham-btn.is-active>span{
transform: rotate(45deg);
top: 0;
}
#ham-btn.is-active>span::after{
top: 0;
transform: rotate(90deg);
}
.sp-header{
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
}



}

2022-12-12

svgデータ

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 637.5 166.5" style="enable-background:new 0 0 637.5 166.5;" xml:space="preserve">
<path id="XMLID_3_" d="M47.7,126c0,18.9,0.4,21.2,11.9,22.5l4.9,0.5c1.1,0.9,0.7,4-0.4,4.5c-10.3-0.4-16.2-0.5-23.4-0.5
	c-7.6,0-14,0.2-22,0.5c-1.1-0.5-1.4-3.4-0.4-4.5l3.8-0.5c10.4-1.4,10.8-3.6,10.8-22.5V59.6c0-15.3-0.4-18.4-8.5-19.3L18,39.6
	c-1.3-1.1-1.1-3.8,0.4-4.5c9.5-1.3,20.7-1.4,35.6-1.4s26.1,2,34.6,7.2c8.3,5.2,14.4,14.6,14.4,27c0,16.6-10.3,24.8-18,28.6
	c-7.9,3.8-17.5,5.4-24.8,5.4c-1.3-0.5-1.3-3.2-0.2-3.6C79.4,94.7,86.4,83.7,86.4,68c0-17.5-10.3-28.8-29-28.8
	c-9.5,0-9.7,0.7-9.7,6.5V126z"/>
<path id="XMLID_5_" d="M189.9,116.8c0,22.5-15.5,38.7-38,38.7c-20.7,0-36.9-14.6-36.9-37.1c0-22.7,17.1-38.9,38.3-38.9
	C173.5,79.6,189.9,94.7,189.9,116.8z M151.2,85c-11.9,0-20.7,11.3-20.7,31.1c0,16.4,7.4,34,23.2,34s20.7-16.6,20.7-30.4
	C174.4,104.4,168.3,85,151.2,85z"/>
<path id="XMLID_8_" d="M213.8,101.3c0-7,0-7.9-4.9-11.2l-1.6-1.1c-0.7-0.7-0.7-2.7,0.2-3.2c4.1-1.4,13.7-6.1,18.2-8.8
	c0.9,0.2,1.4,0.5,1.4,1.3v10.4c0,0.9,0.2,1.4,0.5,1.6c6.3-5.2,13.1-10.8,19.8-10.8c4.5,0,8.1,2.9,8.1,7.2c0,5.9-4.9,8.3-7.7,8.3
	c-1.8,0-2.7-0.5-4-1.3c-2.7-1.8-5.4-2.9-7.9-2.9c-2.9,0-5,1.6-6.5,3.6c-1.8,2.5-2.3,7.7-2.3,13.9v24.5c0,13,0.4,15.1,7.2,15.7
	l6.5,0.5c1.3,0.9,0.9,4-0.4,4.5c-8.5-0.4-13.7-0.5-20-0.5c-6.5,0-11.9,0.2-16.6,0.5c-1.3-0.5-1.6-3.6-0.4-4.5l3.4-0.5
	c6.7-1.1,6.8-2.7,6.8-15.7V101.3z"/>
<path id="XMLID_10_" d="M288.3,89.6c-3.1,0-3.2,0.5-3.2,4.3v33.7c0,10.4,1.3,20,13.1,20c1.8,0,3.4-0.4,4.9-0.9
	c1.6-0.5,4-2.5,4.5-2.5c1.4,0,2.2,2,1.8,3.1c-3.2,3.8-9.7,8.3-18.9,8.3c-15.5,0-18.7-8.6-18.7-19.4V94.9c0-4.9-0.2-5.2-3.8-5.2h-5
	c-1.1-0.7-1.3-2.7-0.5-3.8c5.2-1.6,9.7-4,11.5-5.6c2.3-2.2,5.8-7,7.6-10.6c0.9-0.4,3.1-0.4,3.8,0.9v8.1c0,3.2,0.2,3.4,3.2,3.4h20
	c2.2,1.6,1.8,6.5,0.2,7.6H288.3z"/>
<path id="XMLID_12_" d="M344.7,89.6c-3.1,0-3.1,0.4-3.1,5.2v38c0,13,0.4,15.1,6.8,15.7l6.5,0.5c1.3,0.9,0.9,4-0.4,4.5
	c-8.1-0.4-13.3-0.5-19.6-0.5c-6.5,0-11.9,0.2-17.3,0.5c-1.3-0.5-1.6-3.6-0.4-4.5l4.1-0.5c6.7-0.9,6.8-2.7,6.8-15.7v-38
	c0-4.9,0-5.2-3.6-5.2h-6.3c-1.1-0.7-1.3-2.3-0.5-3.4l7.7-3.8c1.4-0.7,2.7-1.8,2.7-3.6c0-10.4,1.3-21.6,5.6-31.7
	c4.5-10.3,14.6-22.9,32.4-22.9c9.5,0,17.6,4.3,17.6,10.8c0,3.6-3.4,6.5-6.8,6.5c-2,0-3.1-0.7-4.3-2.2c-3.4-4-8.5-7.9-14.4-7.9
	c-5.6,0-10.1,3.4-12.8,9.9c-3.2,8.3-4,21.4-4,30.4V77c0,4.9,0,5,3.1,5h20.5c2,1.8,0.7,6.8-1.3,7.6H344.7z"/>
<path id="XMLID_14_" d="M444.6,116.8c0,22.5-15.5,38.7-38,38.7c-20.7,0-36.9-14.6-36.9-37.1c0-22.7,17.1-38.9,38.3-38.9
	C428.2,79.6,444.6,94.7,444.6,116.8z M405.9,85c-11.9,0-20.7,11.3-20.7,31.1c0,16.4,7.4,34,23.2,34c15.8,0,20.7-16.6,20.7-30.4
	C429.1,104.4,423,85,405.9,85z"/>
<path id="XMLID_17_" d="M480,132.8c0,13,0.4,14.8,6.8,15.7l4.3,0.5c1.3,0.9,0.9,4-0.4,4.5c-5.9-0.4-11.2-0.5-17.5-0.5
	c-6.5,0-11.9,0.2-17.3,0.5c-1.3-0.5-1.6-3.6-0.4-4.5l4.1-0.5c6.7-0.9,6.8-2.7,6.8-15.7V51.5c0-10.6-0.2-11.7-5.6-14.9l-1.8-1.1
	c-0.9-0.5-0.9-3.1,0-3.6c4.5-1.4,13-4.1,19.4-7.6c0.7,0,1.4,0.4,1.8,1.1c-0.2,5.4-0.5,14.4-0.5,22.3V132.8z"/>
<path id="XMLID_19_" d="M513,101.3c0-7,0-7.9-4.9-11.2l-1.6-1.1c-0.7-0.7-0.7-2.7,0.2-3.2c4.1-1.4,14.4-6.1,18.5-8.8
	c0.9,0,1.6,0.4,1.8,1.1c-0.4,6.3-0.7,14.9-0.7,22.3v32.4c0,13,0.4,14.8,6.8,15.7l3.8,0.5c1.3,0.9,0.9,4-0.4,4.5
	c-5.4-0.4-10.6-0.5-16.9-0.5c-6.5,0-11.9,0.2-16.9,0.5c-1.3-0.5-1.6-3.6-0.4-4.5l3.8-0.5c6.7-0.9,6.8-2.7,6.8-15.7V101.3z M527.9,50
	c0,6.5-4.5,9.4-9.5,9.4c-5.6,0-9.2-4.1-9.2-9c0-5.9,4.3-9.7,9.7-9.7C524.3,40.7,527.9,45,527.9,50z"/>
<path id="XMLID_22_" d="M622.8,116.8c0,22.5-15.5,38.7-38,38.7c-20.7,0-36.9-14.6-36.9-37.1c0-22.7,17.1-38.9,38.3-38.9
	C606.4,79.6,622.8,94.7,622.8,116.8z M584.1,85c-11.9,0-20.7,11.3-20.7,31.1c0,16.4,7.4,34,23.2,34c15.8,0,20.7-16.6,20.7-30.4
	C607.3,104.4,601.2,85,584.1,85z"/>
</svg>

2022-12-12

自身のスキルを説明する

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。

htmlの授業ではhtml5を中心に学習しました。HTMLはマークアップ言語であり文書構造（アウトライン）を示す物です。html5ではheader要素やnav要素といった新しい要素を使用する事で、より明確に文書構造を示すことができるようになりました。h1~h6を使用し、適切な見出しの設定を行いました。これらはWHATWG（Web Hypertext Application Technology Working Group）の仕様に準拠した形で記述しています。

また以下の項目も学びました。

picture要素を使い、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分ける「アートディレクション」が可能。
video要素やaudio要素を使用することで、動画データや音声データをシンプルに扱う事が出来る。
フォーム関連の新しい属性やautocomplete属性などを使う事で、今までJavaScript等で行う事が一般的だった入力補助や入力チェックなどの機能を簡単に導入でき、短い作業時間でユーザーにとっても解り易いフォームを作る事が出来る。
HTML APIを使う事で様々は事が出来るようになります。授業ではHistory APIを使用して、ページ毎にユニークなタイトルやh1要素を指定出来る無限スクロールを作成しました。

developer.mozilla.org

css3

cssの授業ではcss3を中心に学びました。css3を使う事で今までビットマップ画像でしか表現出来なかった事がベクター形式であるcssで表現出来るようになりました。この事で、どんな解像度にも対応出来るマルチデバイス対応が容易になりました。

flexboxやgridレイアウト

今まではfloatやpositionを使ったレイアウトが一般的でしたが、マルチデバイスに対応させる為に煩雑な対応が必要でした。この新しいレイアウト方法を使用する事で、マルチデバイスに対応でき、かつ自由なレイアウトが容易に出来るようになりました。

様々な単位

vh、vwや％、remなどを使用する事で、様々なレイアウトをマルチデバイスに対応出来るようになりました。

ビットマップ画像の表示

フルードイメージやobject-fitを使用する事で、画像のアスペクト比に囚われない自由な画像表示が可能になります。

ブラウザ対応

上記で挙げた技術はブラウザーによっては未対応な物もあるので、「can i use」等のサイトで細かく対応ブラウザーとバージョンをチェックする必要があります。場合によってはベンダープレフィックスを使用して対応させます。

チーム作業を見据えた命名規則

他人が見てもざっくり命名意図がわかる、保守性を考えた命名規則を使用したコーディングが出来ます。

カスタムプロパティを使用したデザイン設計

メインカラーや余白の基準値などを予め変数として保存しておき、必要なところで使用する事で一貫性のあるデザインが可能になります。

SVG

SVG画像を使用する事で、拡大縮小に強く、どのような解像度のデバイスにも対応出来ます。またSVG画像はXML形式で記述されている為CSSで簡単に操作が出来、CSS3のアニメーション機能とも相性が良く、webサイトに簡単にマイクロインタラクションを導入する事が出来ます。
さらに、Ajaxを使う事でhtmlファイルにインラインで挿入した冗長なSVGアニメーションの記述を外部ファイル化し、htmlファイルをシンプルにする事が出来ます。

Javascript/jQuery

DOMの操作
if文、for文
ランダムを使ったおみくじ
Ajaxでのファイル操作
clcikイベントやscrollイベントの設定
css3のアニメーション機能と連動（ハイブリッドアニメーション）
様々なライブラリーを利用
Ajaxを使った無限スクロール

特にAjaxでは読み込むデータを外部ファイル化し、非同期通信する事で必要な物を必要な分だけ必要な時に読み込む、という現在webアプリなどで主流になっているSPA（シングル・ページ・アプリケーション）の元となる考え方を学びました。またFetch APIを使った非同期通信も行いました。

PHP/Wordpress

xampp/mampを使った仮想サーバーの構築
get/postを使ったデータ通信
データベースとの接続およびデータの挿入や検索
includeを使ったテンプレート化
sessionを使ったデータ保存
バーチャルホストを設定して、ルートパスを有効にする
wpのオリジナルテーマの作成
wpを本番環境にデプロイする

photoshop

アートボードを使用して、カンプやバナーを複数サイズ展開させる
アセット機能を使った画像書き出し
調整フィルターを使用した画像補正
フィルター機能を使用した画像加工

SASS

SCSS記法でのSASS
@importを使ってパーシャルファイルを読み込む
演算をする
if文を使う
変数を使う
@mixinを使ったメディアクエリの設定
Dart SASSで@useを使ってパーシャルファイルを読み込む
コンパイラーを使ってcssにコンパイルする

Git

gitの基本設定
githubとの連動（ローカルにクローンを作成）
ブランチモデルに沿ったバージョン管理
githubでissue管理
github pagesを使ったホスティング

2022-12-08

2022年のデザインツールの動向調査

uxtools.co

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

タイムラインを作成

Vertical Timeline

その他のタイムライン

タイムラインインフォグラフィック

12月22日完成データ（モバイル幅で作成するwebサイト）

12月20日の作業データ（家具屋のECサイト）

12月12日の作業データ(スニーカーショップ)

svgデータ

自身のスキルを説明する

html5

css3

flexboxやgridレイアウト

様々な単位

ビットマップ画像の表示

ブラウザ対応

チーム作業を見据えた命名規則

カスタムプロパティを使用したデザイン設計

SVG

Javascript/jQuery

PHP/Wordpress

photoshop

SASS

Git

2022年のデザインツールの動向調査