Cafeコーディング - CSS記述
Cafeコーディング - CSS記述
記述例
@charset "UTF-8"; /* ------------------------------------------ reset ------------------------------------------ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; vertical-align: bottom; } /* ------------------------------------------ body ------------------------------------------ */ body { color: #525c6a; font-size: 16px; font-family: 'Noto Sans JP', sans-serif; line-height: 1.0; } /* ------------------------------------------ layout(共通) ------------------------------------------ */ .container { width: min(90%, 1040px); margin: 0 auto; } h2 { position: relative; margin-bottom: 40px; font-size: 30px; font-weight: 600; line-height: 1.6; text-align: center; letter-spacing: .14em; } h2::first-line { font-size: 15px; } h2::after { content: ''; width: 22px; height: 3px; display: inline-block; background-color: #c2c2c2; position: absolute; bottom: -16px; left: 49%; } /* ------------------------------------------ header ------------------------------------------ */ .header > .container { display: flex; align-items: center; padding: 25px 0; } .header h1 { width: 143px; margin-right: auto; } /* ------------------------------------------ nav ------------------------------------------ */ .gnav ul { display: flex; gap: 36px; margin-top: 8px; } .gnav li { font-size: 15px; font-weight: 600; letter-spacing: .16em; } .gnav a { position: relative; display: block; } .gnav a:hover, .gnav a.current{ padding-bottom: 6px; border-bottom: 2px solid #c2c2c2; } /* ------------------------------------------ key-visual ------------------------------------------ */ .key-visual { text-align: center; } /* ------------------------------------------ main ------------------------------------------ */ .main-conent { padding: 90px 0 120px; } /* ------------- about ------------- */ .about { text-align: center; margin-bottom: 120px; } .about > p { margin-bottom: 40px; font-size: 14px; line-height: 1.5; letter-spacing: .14em; } .recommend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .recommend > li { width: 320px; padding-bottom: 40px; border-bottom: 1px solid #74859f; text-align: left; } .recommend img { margin-bottom: 24px; } .recommend h3 { margin-bottom: 10px; font-size: 18px; } .recommend p { font-size: 14px; line-height: 1.5; letter-spacing: .04em; } /* ------------- menu ------------- */ .menu { margin-bottom: 100px; padding: 100px 50px; background-color: #e8edf3; } .menu-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; margin-top: 56px; } .menu h3 { padding: 20px; background-color: #74859f; color: #fff; font-size: 16px; } .menu dl { display: grid; grid-template-columns: 14em 1fr; margin-bottom: 36px; font-size: 15px; } .menu dt { padding-left: 20px; border-bottom: 1px solid #74859f; line-height: 3.0; } .menu dd { padding-right: 20px; text-align: right; border-bottom: 1px solid #74859f; line-height: 3.0; } /* ------------- access ------------- */ .access-wrap { display: grid; grid-template-columns: 680px 1fr; gap: 40px; margin-top: 50px; } .map { width: 680px; height: 420px; } .gmap { width: 100%; height: 100%; } /* ------------- info ------------- */ .info > h3 { margin-bottom: 20px; padding: 10px 0 20px; border-bottom: 3px solid #74859f; } .address { margin-bottom: 20px; } .address li { line-height: 1.4; } .info dl { display: grid; grid-template-columns: 5em 1fr; margin-bottom: 16px; padding: 14px 16px; background-color: #dddddd; } .info dt, .info dd { line-height: 1.4; } .info p { margin-bottom: 30px; font-size: 14px; line-height: 1.4; } /* ------------- SNS ------------- */ .sns { display: flex; gap: 20px; } .sns li a { display: block; align-items: center; width: 70px; height: 70px; padding-top: 16px; background-color: #74859f; border-radius: 50%; text-align: center; } i.fa-twitter, i.fa-envelope { color: #fff; font-size: 40px; } /* ------------------------------------------ footer ------------------------------------------ */ .footer { position: relative; padding: 20px 0; background-color: #74859f; color: #fff; font-size: 14px; letter-spacing: .14em; } /* ------------------------------------------ page-top ------------------------------------------ */ .page-top { text-align: center; } i.fa-angle-up { position: absolute; top: -30px; width: 70px; height: 70px; padding-top: 18px; border-radius: 50%; background-color: #bacae1; color: #fff; font-size: 36px; text-align: center; z-index: 100; }