@media (orientation: landscape) { h1 { color: green; background-color: #dbebc4 ; border: solid 3px green; padding: 0.2em; border-radius: 0.5em; width: 25%; 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 { text-align: left; } .image { height: 250px; } .button { width: 20%; height: 40px; } .stamp{ clear: left; text-align: center; margin: auto; width: 80%; } .stamp img { width: 17%; height: 17%; } } @media (orientation: portrait) { h1 { color: green; background-color: #dbebc4 ; border: solid 3px green; padding: 0.2em; border-radius: 0.5em; width: 50%; 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; } .stamp{ clear: left; text-align: center; margin: auto; } .stamp img{ width: 32%; height: 32%; } } body { background-color: #ffffcc; } /* タブ機能を制御するラジオボタン(非表示にする) */ #tabcheck1, #tabcheck2, #tabcheck3, #tabcheck4 { display: none; } /* タブ(共通装飾+非選択状態の装飾) */ .tab { display: inline-block; border-width: 1px 1px 0px 1px; border-style: solid; border-color: black; border-radius: 0.75em 0.75em 0px 0px; padding: 0.75em 1em; color: black; background-color: #e0e0e0; font-weight: bold; } /* タブにマウスポインタが載った際の装飾 */ .tab:hover { background-color: #ccffcc; color: green; cursor: pointer; } /* チェックが入っているラジオボタンの隣にあるタブの装飾(=選択状態のタブ) */ input:checked + .tab { color: red; background-color: #ffffcc; position: relative; z-index: 10; } /* タブの中身(共通装飾+非選択状態の装飾) */ .tabcontent { display: none; border: 1px solid black; margin-top: -1px; padding: 1em; position: relative; z-index: 0; background-color: #ffffcc; } /* チェックが入っているラジオボタンに対応するタブの中身を表示する */ #tabcheck1:checked ~ #tabcontent1 {display: block;} #tabcheck2:checked ~ #tabcontent2 {display: block;} #tabcheck3:checked ~ #tabcontent3 {display: block;} #tabcheck4:checked ~ #tabcontent4 {display: block;} #WebGL-output { display: inline-block; } .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; } #next { display: inline-block; } .choices { flex-wrap: wrap; width: 100%; margin: 0; padding-left: 0; } #result { margin: 10px 0px; font-size: 20px; font-weight: bold; } .correct { color: red; font-size: 30px; font-weight: bold; } .incorrect { color: blue; font-size: 30px; font-weight: bold; } .center { text-align: center; } .commentary { font-size: 20px; } .none { display: none; margin: 10px; } /* アイコンの色指定 */ .icon-skyblue { filter: brightness(150%); } .icon-brown { filter: hue-rotate(175deg) brightness(90%); } .icon-purple { filter: hue-rotate(80deg); } .icon-orange { filter: hue-rotate(190deg) brightness(140%); } .icon-blue { filter: hue-rotate(0deg); } .icon-pink { filter: hue-rotate(120deg) brightness(140%); } .icon-white { filter: brightness(170%) grayscale(100%); } .icon-black { filter: brightness(70%) grayscale(100%); } .icon-darkgold { filter: hue-rotate(200deg) brightness(120%); } .icon-red { filter: hue-rotate(150deg); }