index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新しいcssを使ってみる</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=Dela+Gothic+One&family=Gabarito&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>サイトタイトル</h1> </header> <main> <section id="news"> <h2 data-en="NEWS">お知らせ</h2> <dl id="news-list"> </dl> </section> <section id="gallary"> <h2 data-en="GALLARY">ギャラリー</h2> <div class="photo-wrapper"> <div class="photo-box"> <img src="img/01.jpg" alt=""> </div> <div class="photo-box"> <img src="img/02.jpg" alt=""> </div> <div class="photo-box"> <img src="img/03.jpg" alt=""> </div> <div class="photo-box"> <img src="img/01.jpg" alt=""> </div> <div class="photo-box"> <img src="img/02.jpg" alt=""> </div> </div><!-- /.photo-wrapper --> </section> <section id="map"> <h2 data-en="ACCESS">店舗情報</h2> <div class="map-outer"> <iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1839490227894!2d-73.98812288878855!3d40.75797873468086!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2z44K_44Kk44Og44K644K544Kv44Ko44Ki!5e0!3m2!1sja!2sjp!4v1697454905692!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> </section> </main> <footer> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(function(){ //ajax $('#news-list').load('news.txt'); }); </script> </body> </html>
style.css
@charset "utf-8"; /* 変数の登録 */ :root{ --font_ja:'Dela Gothic One', sans-serif; --font_en:'Gabarito', sans-serif; --color_1:#2853b9; --color_2:#a92157; } *{ margin: 0; padding: 0; line-height: 1.0; box-sizing: border-box; } ul{ list-style: none; } a{ text-decoration: none; } img{ vertical-align: bottom; max-width: 100%; } /* グラデーション部分 */ header{ width: 100%; height: 100vh; background-color: #111; display: flex; justify-content: center; align-items: center; >h1{ color: transparent; font-size: 90px; font-family: var(--font_ja); background-image: linear-gradient(to right, #bfeaeb 0%, #e8a1a4 100%); padding: 10px; background-clip: text; -webkit-background-clip: text; } } /* 共通部分 */ section{ padding: 140px 10px; >h2{ text-align: center; font-size: 40px; font-family: var(--font_ja); color: var(--color_1); margin-bottom: 60px; &::before{ content: attr(data-en); display: block; font-family: var(--font_en); font-size: 28px; color: var(--color_2); } } } /* お知らせ */ #news-list{ width: 60%; margin: 0 auto 100px; font-size: 18px; display: flex; flex-wrap: wrap; >dt{ width: 30%; margin-bottom: 30px; line-height: 1.8; border-bottom: 2px solid var(--color_2); padding: 10px; } >dd{ width: 70%; margin-bottom: 30px; line-height: 1.8; border-bottom: 2px solid var(--color_2); padding: 10px; } } #news-list>dt:nth-of-type(n+4){ display: none; } #news-list>dd:nth-of-type(n+4){ display: none; } /* ギャラリー部分 */ .photo-wrapper{ width: 80%; margin: 0 auto 100px; display: flex; flex-wrap: wrap; gap: 80px 40px;/* 上下の余白、左右の余白 */ } .photo-box{ width: calc((100% - 80px) / 3); aspect-ratio: 1 / 0.3;/* 横/縦 */ >img{ object-fit: cover; object-position: center top; width: 100%; height: 100%; } } /* map部分 */ .map-outer{ width: 60%; aspect-ratio: 1 / 0.6; margin: 0 auto 100px; >.g-map{ width: 100%; height: 100%; filter: grayscale(1);/* 1~0までの間で白黒 */ transition: 0.3s; &:hover{ filter: grayscale(0); } } } footer{ width: 100%; height: 100px; background-color: var(--color_1); }
