/*各箱のディスプレイ設定-----------------------------*/
.displayBlock{/*displayBlockというクラスの箱*/
    display: block;/*ブロック指定*/
    border: solid 0.2vw #b00;/*境界線 赤*/}
.displayInline *{/*displayInlineというクラスの箱*/
    display: inline;/*インライン指定*/
    border: solid 0.2vw #b00;/*境界線 赤*/}
.displayFlex{/*displayFlexというクラスの箱*/
    display: flex;/*フレックス指定*/
    border: solid 0.2vw #b00;/*境界線 赤*/}
.displayGrid{/*gridの基本の形を作ります*/
    width: auto;/*大箱の横幅を指定します*/
    height: auto;/*大箱の高さを指定します*/
    display: grid;/*グリッド型式にします*/
    grid-template-columns: repeat(3,5vw);
    /*並び順6vw幅で3ブロック*/
    grid-auto-rows: 10vw;
    /*1ブロックの高さを決めます*/
    border: solid 0.2vw #b00;/*境界線 赤*/}
.divFloat > div{
    /*divFloatの要素全ての要素のプロパティを*/
    float: left;/*フロート属性とします*/}

/*div,p共通の設定------------------------------------*/
.div1{/*div要素A*/
    width: 5vw;height: 10vw;/*横5vw高さ10vw*/
    background-color: #ace;/*中身の色 薄青*/}
.div2{/*div要素B*/
    width: 5vw;height: 10vw;/*横5vw高さ10vw*/
    background-color: #2ce;/*中身の色 濃い青*/}
.p1,.p2{/*pタグ両方*/
    background-color:transparent;
    /*中身の色*/}透明
,.div1,.div2,.p1,.p2{/*全ての要素*/
    border: solid 0.2vw #0b0;/*境界線 緑*/}

/*grid内の設定---------------------------------------*/
.g0{/*箱の組成*/
    width: auto;height: auto;margin: 0;
    background-color: #2ce;/*中身の色濃い青*/
    border: solid 0.1vw #111;/*境界線 黒*/}
.grid3{/*箱の組成*/
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}