html{ scroll-behavior: smooth; scroll-padding-top: 100px; } body { font-family: 'Noto Sans JP', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; width: 100%; } p{ margin: 2% 2%; font-size:clamp(0.875rem, 0.818rem + 0.24vw, 1rem); } .navbar { background-color: #02465b; color: #f4f4f4; width: 100%; position: sticky;/* 2行だけの記述でfixedと同じ配置ができる*/ top: 0; z-index: 100; box-shadow: 0px 4px 8px #adadad; } .barContainer { width: 80%; margin: auto; padding: 1em 0; display: flex; justify-content: space-between; align-items: center; } .navbar h1 { margin: 0; padding: 0; font-size: clamp(1.75rem, 1.693rem + 0.24vw, 1.875rem); } .navbar nav ul { list-style: none; margin: 0; padding: 0; display: flex; } .navbar nav ul li { margin-right: 1em; } .navbar nav ul li a { text-decoration: none; color: #f4f4f4; } .navbar nav ul li a:hover { border-bottom: 2px solid #ccb540; } /* ここまでは共通で記載する */ .category{ border-bottom: 1px solid #acacac; width: 100%; } .categoryContainer{ display: grid; grid-template-columns: repeat(auto-fit, 300px); justify-content: center; grid-gap:1em; /* ウィンドウに合わせて自動で改行(中央揃え左揃え)を再現するにはflexboxでは難しかった。 flex-wrap:wrapとjustify-content:centerでは改行した時に真ん中配置から始まっちゃう(>_<) しかし、gridなら4行でいけた。もっと短くできるかも。 */ } #eventContainer { width: 98%; margin:0 auto; } .event-item { background-color: #ffffff; border-radius: 10px; box-shadow: 0px 0px 8px #acacac; padding: 0; text-align: center; width: 100%; margin: .5em auto; } .event-item:hover { transform: scale(1.1); transition: transform 0.3s ease; } .event-item img { width: 100%; height: 25vh; object-fit: cover; border-radius: 10px 10px 0 0 ; padding: 0; } .event-item a img:hover{ opacity:0.5; } .event-item h3 { font-size: clamp(1rem, 0.943rem + 0.24vw, 1.125rem); margin: 0 1em; border-bottom: 2px solid #acacac; text-align: center; } @media screen and (max-width: 1036px){ .navbar{ width: 100%; } #eventContainer{ width: 95%; margin: 0 auto; } .category{ width: 80%; margin: 1em auto; } @media screen and (max-width: 820px){ .category{ text-align: center; } .barContainer { width: 80%; margin: auto; padding: 1em 0; flex-direction: column; } @media screen and (max-width: 430px){ .categoryContainer{ display: block; } .event-item{ width: 90%; margin-bottom: 10%; } .barContainer { width: 95%; } } }