/* 画面が横長のとき */ @media (orientation: landscape) { h1 { color: blue; background-color: #add8e6; border: solid 3px blue; padding: 0.2em; border-radius: 0.5em; width: 25%; margin: 0.5em auto; text-align: center; } h2 { color: green; background-color: #dbebc4 ; padding: 0.4em 0.5em; border-left: solid 6px green; border-bottom: solid 3px green; width: 15%; margin: 0.5em auto; text-align: center; } #playmap { display: inline-block; width: 80%; height: 400px; } #editmap { display: inline-block; width: 80%; height: 400px; } #item-box { display: flex; flex-direction: row; justify-content: space-between; } .item { width: 100%; text-align: center; } .form { margin-top: -1em; text-align: left; } .image { height: 250px; } .button { width: 20%; height: 40px; } } /* 画面が縦長のとき */ @media (orientation: portrait) { h1 { color: blue; background-color: #add8e6 ; border: solid 3px blue; padding: 0.2em; border-radius: 0.5em; width: 60%; margin: 0.5em auto; text-align: center; } h2 { color: green; background-color: #dbebc4 ; padding: 0.4em 0.5em; border-left: solid 6px green; border-bottom: solid 3px green; width: 40%; margin: 0.5em auto; text-align: center; } .map { margin: 0 auto; text-align: center; } .quiz { text-align: center; } #playmap { display: inline-block; width: 95%; height: 400px; } #editmap { display: inline-block; width: 95%; height: 400px; } .image { width: 95%; } .button { width: 20%; height: 40px; } } body { background-color: #ffffcc; } .question { margin: 10px 0 15px 0; font-size: large; } .button { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; margin: 0 10px; padding: 0; border: solid 1px; outline: none; font-size: 15px; text-decoration: none; cursor: pointer; } #result { margin: 10px 0px; font-size: 20px; font-weight: bold; } .center { text-align: center; } /* 「正解!!」の色とフォント */ .correct { color: red; font-size: 30px; font-weight: bold; } /* 「不正解…」の色とフォント*/ .incorrect { color: blue; font-size: 30px; font-weight: bold; } /* 要素を非表示にする */ .none { display: none; margin: 10px; } /* アイコンの色指定 */ .icon-blue { filter: hue-rotate(0deg); } .icon-red { filter: hue-rotate(150deg); }