24/11/30 18:32:33.42 OExCjJKo9
<html><style>
<!--フレックス教室だナ！columnは縦並び、rowは横並びだナ！
justify-contentとalign-itemsで位置を調整するんだナ！
marginで位置を調整するけど、absoluteも使えるんだナ！
vh、vwは細かい調整が必要な時に使うんだナ！%はきちんと空白が取れるんだナ--!>
body{display: flex;flex-direction: column;justify-content: flex-start;
align-items: stretch;width: 100vw;height: 100vh;}
.mc{display: flex;flex-direction: row;justify-content: flex-start;
align-items: stretch;width: 100%;height: 100%;}
.dog{width: 20%;height: 100%;font-size: 200%;}
.pc{display: flex;flex-direction: column;justify-content: flex-start;
align-items: flex-start;width: 100%;height: 30%;}
.pr{display: flex;flex-direction: row;justify-content: flex-start;
align-items: stretch;width: 100%;height: 100%;}
.pr2{display: flex;flex-direction: row-reverse;justify-content: flex-start;
align-items: stretch;width: 100%;height: 100%;margin-left:10%;}
.f1{background: #4caf50;color: white;display: flex;flex-direction: column;
justify-content: flex-start;width: 1%;height: 0%;}</style>