@charset "UTF-8"; body { color: black; font-size: 18px; background-color: #FFFFA5; } a { text-decoration: none; } img { max-width: 100%; } li{ list-style: none; } .section-title { display: inline-block; font-size: 24px; text-align: center; margin-bottom: 45px; } .wrapper { max-width: 960px; margin: 0 auto 100px auto; padding: 0 4%; text-align: center; } /*------------------------------------------- ヘッダー -------------------------------------------*/ #header { background-color: #00A834; } .header-inner{ display: flex; justify-content: space-between; align-items: center; margin: 0 auto; } .site-title { line-height: 1px; padding: 10px 0; } .site-title a { display: block; color: #fff; font-size: 23px; } .header-inner ul { display: flex; padding: 20px 0; } .header-inner li { margin-left: 30px; } .header-inner li a { color: #fff; font-size: 18px; } .header-inner li a:hover { opacity: 0.7; } /*------------------------------------------- Mainvisual -------------------------------------------*/ #mainvisual { margin-bottom: 80px; } #mainvisual img { width: 100%; max-width: 1920px; height: 600px; object-fit: cover; } /*------------------------------------------- movie -------------------------------------------*/ /*------------------------------------------- ーボタン -------------------------------------------*/ *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } .btn, a.btn, button.btn { font-size: 1rem; font-weight: 700; <a href="" class="btn btn-css"> <div class="midashi">CSS</div>Webページ<br>デザイン </section> </main> </body> </html> line-height: 1.5; position :relative; display:inline-block; padding:1rem 2rem; width: 12rem; /*ボタンの横幅*/ margin: 0.2rem; /*余白*/ cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; letter-spacing: 0.1em; border-radius: 0.5rem; } /*------------------------------------------- ーボタンそれぞれ -------------------------------------------*/ .midashi{font-size: 1.5rem;} .btn-html, /*------------------html------------------*/ a.btn-html { color: #fff; background-color: #eb6100; } .btn-html:hover, a.btn-html:hover { color: #fff; background: #f57920; } .btn-css,/*-------------------css---------------------*/ a.btn-css { color: #fff; background-color: #4aeb00; } .btn-css:hover, a.btn-css:hover { color: #fff; background: #69f628; } /*------------------------------------------- footer -------------------------------------------*/ #footer { font-size: 16px; padding: 20px 0; text-align: center; background-color: #00A834; } /*------------------------------------------- SP -------------------------------------------*/ @media screen and (max-width: 600px) { body { font-size: 15px; } /*------------------------------------------- ヘッダー -------------------------------------------*/ .site-title a { font-size: 15px; } .header-inner ul { padding: 10px 0; } .header-inner li a { font-size: 14px; } }