/*========= 上部固定させるためのCSS ===============*/ #header{ position: fixed;/*fixedを設定して固定*/ height: 70px;/*高さ指定*/ width:100%;/*横幅指定*/ z-index: 999;/*最前面へ*/ /*以下はレイアウトのためのCSS*/ display: flex; justify-content: space-between; align-items: center; background:#333; color:#fff; text-align: center; padding: 20px; } /*==ふわっと出現させるためのCSS*/ /* 上に上がる動き */ #header.UpMove{ position: fixed; width:100%; animation: UpAnime 0.5s forwards; } @keyframes UpAnime{ from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-100px); } } /* 下に下がる動き */ #header.DownMove{ position: fixed; width:100%; animation: DownAnime 0.5s forwards; } @keyframes DownAnime{ from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } } /*以下は検証用のレイアウトのためのCSS*/ nav ul{ list-style: none; display: flex; justify-content: center; } nav ul li a{ text-decoration: none; color: #666; padding:10px; } section{ padding:300px 0; } /*================================================== スライダーのためのcss ===================================*/ .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/ width:94%; margin:0 auto; } .slider img { width:100%;/*スライダー内の画像を横幅100%に*/ height:auto; } /*slickのJSで書かれるタグ内、スライド左右の余白調整*/ .slider .slick-slide { margin:0 10px; } /*矢印の設定*/ /*戻る、次へ矢印の位置*/ .slick-prev, .slick-next { position: absolute;/*絶対配置にする*/ top: 42%; cursor: pointer;/*マウスカーソルを指マークに*/ outline: none;/*クリックをしたら出てくる枠線を消す*/ border-top: 2px solid #666;/*矢印の色*/ border-right: 2px solid #666;/*矢印の色*/ height: 15px; width: 15px; } .slick-prev {/*戻る矢印の位置と形状*/ left: -1.5%; transform: rotate(-135deg); } .slick-next {/*次へ矢印の位置と形状*/ right: -1.5%; transform: rotate(45deg); } /*ドットナビゲーションの設定*/ .slick-dots { text-align:center; margin:20px 0 0 0; } .slick-dots li { display:inline-block; margin:0 5px; } .slick-dots button { color: transparent; outline: none; width:8px;/*ドットボタンのサイズ*/ height:8px;/*ドットボタンのサイズ*/ display:block; border-radius:50%; background:#ccc;/*ドットボタンの色*/ } .slick-dots .slick-active button{ background:#333;/*ドットボタンの現在地表示の色*/ } /*========= レイアウトのためのCSS ===============*/ body{ background:#eee; } h2,p { text-align:center; padding:20px; } ul{ margin: 0; padding: 0; list-style: none; } a{ color: #333; } a:hover, a:active{ text-decoration: none; } .img-box{ margin: 10px; } .img-box img{ width: 400px; height: 400px; object-fit: cover; }