html { font-size: 100%; /* 16px */ } body{ color: #333; font-family: "M PLUS 1p"; } a { text-decoration: none; } li{ list-style: none; font-size: 1.1rem; } h1 { font-size: 2.4rem; font-family: 'Monoton', serif; } /* header */ #header { max-width: 1340px; display: flex; /* 親要素に対してflexを当てると子要素が横並びになる */ align-items: center; justify-content: space-between; margin: 0 auto; padding: 0 4%; height: 150px; } #header ul { display: flex; padding: 10px 0; align-items: center; } #header ul li { margin-left: 30px; } #header ul li a { color: #333; transition: all 0.3s; } #header ul li a:hover{ opacity: 0.5; text-decoration: underline; } /* flexbox */ div.container{ display: flex; justify-content: center; height: 700px; margin: 10px 0; } div.item-left{ display: flex; flex-direction: column; margin: 0 5px; overflow-y: scroll; width: 10%; } div.item-left a{ margin: 0 3px 3px; padding: 15px; color: #333; border: #333 1px solid; border-radius: 5px; text-align: center; } div.item-left a:hover{ background-color: #f6f6f6; } div.item-left button{ margin: 0 3px 3px; padding: 15px; color: #333; border: #333 1px solid; border-radius: 5px; text-align: center; } div.item-left button:hover{ background-color: #f6f6f6; } div.item-right{ aspect-ratio: 16 / 9; width: 70%; } iframe{ width: 100%; height: 100%; } /* footer */ #footer { width: 80%; margin: 0 auto; padding: 10px 0; color: #999; border-top: 1px solid #dbdddf; } /* iPad用 */ @media screen and (max-width: 1024px){ /* header */ #header { flex-direction: column; height: auto; line-height: 40px; margin: 30px 0; } h1{ font-size: 1.8rem; } #header li { font-size: 0.8rem; margin-top: 10px; } div.item-left a{ margin: 2px; padding: 5px 10px; } div.item-left button{ margin: 2px; padding: 5px 10px; } iframe{ width: 100vw; height: 100vh; } #footer{ width: 100%; text-align: center; padding: 10px; } div.container{ flex-direction: column; height: auto; } div.item-left{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: 6px; width: auto; } div.item-right{ width: 600px; height: auto; margin: 0 auto; } } /* 携帯用 */ @media screen and (max-width: 480px){ div.item-right{ width: 400px; height: auto; margin: 0 auto; } }