<divclass="flex">　/* flexコンテナー */<div>1</div>　/* flexアイテム */<div>2</div>　/* flexアイテム */<div>3</div>　/* flexアイテム */</div>

.flex{background-color:grey;display:flex;}.flex>div{background-color:white;margin:10px10px;}

.flex{background-color:grey;display:flex;/* 追加 */}.flex>div{background-color:white;margin:10px10px;}

.flex{background-color:grey;display:flex;justify-content:center;/* 追加　*/align-items:center;/* 追加 */}.flex>div{~省略〜}

.left:after{position:absolute;content:'';top:100%;left:10px;border:15pxsolidtransparent;border-top:15pxsolid#e0edff;width:0;height:0;}

border-top:5pxsolidred;border-left:5pxsolidblue;border-tight:5pxsolidgreen;border-bottom:5pxsolidyellow;

<divclass="gridContainer"><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 1"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 2"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 3"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 4"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 5"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 6"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 7"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 8"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 9"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 10"></div></div>

.gridContainer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:10px;margin:10px;}.girdItem{border:1pxsolid#000;}

.gridContainer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:10px;margin:10px;}

.gridContainer{display:-ms-grid;-ms-grid-columns:1fr10px1fr10px1fr10px1fr;-ms-grid-rows:1fr10px1fr;margin:10px;}

gulp.task("default",()=>{returngulp.src("src/style.css").pipe(autoprefixer({grid:true}))// grid: true の設定による自動配置の設定（現在は非推奨）.pipe(gulp.dest("dist"));});

gulp.task("default",()=>{returngulp.src("src/style.css").pipe(autoprefixer({grid:'autoplace'}))// 現在の CSS Grid 自動配置のオプション設定.pipe(gulp.dest("dist"));});

.gridContainer{display:grid;grid-template:"areaA areaB areaC areaD"1fr"areaE areaF areaG areaH"1fr/1fr1fr1fr1fr;gap:10px;margin:10px;}.girdItem{border:1pxsolid#000;}

.gridContainer{display:-ms-grid;-ms-grid-columns:1fr10px1fr10px1fr10px1fr;-ms-grid-rows:1fr10px1fr;margin:10px;}

gulp-postcss: css/top.css
autoprefixer: xxx/top.css:16:3: Can not find grid areas: areaA, areaB, areaC, areaD, areaE, areaF, areaG, areaH

.gridContainer{display:grid;grid-template:". . . ."1fr". . . ."1fr/1fr1fr1fr1fr;gap:10px;margin:10px;}

.gridContainer{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px;}

.gridContainer{display:-ms-grid;-ms-grid-columns:1fr10px1fr10px1fr10px1fr;margin:10px;}

gulp-postcss: css/top.css
autoprefixer: xxx/top.css:16:3: Autoplacement does not work without grid-template-rows property

<divclass="gridContainer-2x2"><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 1"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 2"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 3"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 4"></div></div><divclass="gridContainer-3x2"><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 1"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 2"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 3"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 4"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 5"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 6"></div></div><divclass="gridContainer-4x2"><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 1"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 2"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 3"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 4"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 5"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 6"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 7"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 8"></div></div>

.gridContainer-2x2{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:10px;margin:10px;text-align:center;}.gridContainer-3x2{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;margin:10px;text-align:center;}.gridContainer-4x2{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:10px;margin:10px;text-align:center;}

<divclass="gridContainer -col2 -row2"><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 1"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 2"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 3"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 4"></div></div><divclass="gridContainer -col3 -row2"><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 1"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 2"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 3"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 4"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 5"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 6"></div></div><divclass="gridContainer -col4 -row2"><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 1"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 2"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 3"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 4"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 5"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 6"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 7"></div><divclass="girdItem"><imgsrc="/img/doggo.png"alt="イッヌ 8"></div></div>

.gridContainer{display:grid;gap:10px;margin:10px;text-align:center;&.-col2{grid-template-columns:repeat(2,1fr);}&.-col3{grid-template-columns:repeat(3,1fr);}&.-col4{grid-template-columns:repeat(4,1fr);}&.-row2{grid-template-rows:repeat(2,1fr);}}

.gridContainer{display:-ms-grid;display:grid;gap:10px;margin:10px;text-align:center;}.gridContainer.-col2{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);}.gridContainer.-col3{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);}.gridContainer.-col4{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr);}.gridContainer.-row2{-ms-grid-rows:(1fr)[2];grid-template-rows:repeat(2,1fr);}

.gridContainer{display:grid;margin:10px;text-align:center;&.-col2.-row2{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:10px;}&.-col3.-row2{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;}&.-col4.-row2{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:10px;}}

<buttonid="button">文字色が変わるよ</button><h2id="text">文字色が変わるよ</h2>

.font-color{color:pink;}

constchange=document.getElementById('button');change.addEventListener('click',()=>{document.getElementById('text').classList.toggle('font-color');});

<buttonid="button">文字が変わるよ</button><h2id="text">文字色が変わるよ</h2>

constchange=document.getElementById('button');change.addEventListener('click',()=>{document.getElementById('text').innerHTML='<h2>変わったね</h2>';});

<divclass="parent"><pclass="child">テキストテキストテキスト</p></div>

.parent{line-height:1;}.parent.child{display:inline;line-height:1.8;<-きく！background:linear-gradient(transparent60%,#faaa1e60%);}

<nav><ul><li><ahref="index.html">Top page</a></li><li><ahref="resume\index.html">Resume</a></li><li><ahref="works\index.html">Works</a></li></ul></nav>

a{text-decoration:none;}a:hover{text-decoration:underline;}

<imgsrc="../photo/travel.PNG"class="button buttonTravel">

.buttonTravel{cursor:pointer;box-shadow:10px10pxrgb(120,162,224);}.buttonTravel:hover{cursor:pointer;/* 影を消す */box-shadow:none;/* 拡大する */transform:scale(1.1);}

// transitionは1行でまとめると、
transition: all 1s ease 2s;

// transitionを構成する詳細プロパティ
transition-property: all; // 変化対象のCSS
transition-duration: 1s; // 変化の開始から終了までの時間
transition-timing-function: ease; // 変化の仕方
transition-delay: 2s; // 変化がいつ始まるか(遅延)

<div class="flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

.flex {
  display: flex;
  justify-content: flex-end;
}
.flex > :first-child {
  margin-right: auto;
}

<h1style="text-align: center; font-size: x-large">吉野家1000円ガチャ</h1><pstyle="text-align: center; font-size: large"><b>イートイン</b></p><pstyle="text-align: center"><ahref="yoshinoya1000-eatin.html"class="btn-square">イートインガチャを回す</a></p><divid="result"class="waku"style="background-color: #FFE7BF"></div><pstyle="text-align: center"><aclass="share-7"id="getResult"><iclass="fab fa-twitter"></i></a></p><script src="jsfile/gacha-yo-eatin.js"></script><br><br><pstyle="text-align: center; font-size: small"><ahref="yoshinoya1000.html">吉野家1000円ガチャ</a></p><pstyle="text-align: center; font-size: small">respect for <ahref="https://saizeriya-1000yen.herokuapp.com"target="_blank">サイゼリア1000円ガチャ</a></p><pstyle="text-align: center; font-size: small">made by <ahref="https://twitter.com/akr_trader"target="_blank">AKR</a></p>

letgetResult=document.getElementById('getResult');letresult=document.getElementById('result');varmenu={"牛丼(小盛)":332,"牛丼(並盛)":352,"牛丼(アタマの大盛)":452,"牛丼(大盛)":452,"牛丼(特盛)":632,"牛丼(超特盛)":722,"豚丼(小盛)":318,"豚丼(並盛)":338,"豚丼(アタマの大盛)":438,"豚丼(大盛)":498,"豚丼(特盛)":618,"豚丼(超特盛)":708,"牛カルビ丼(小盛)":528,"牛カルビ丼(並盛)":548,"牛カルビ丼(アタマの大盛)":648,"牛カルビ丼(大盛)":708,"牛カルビ丼(特盛)":828,"牛カルビ丼(超特盛)":918,"牛皿定食(並盛)":498,"牛皿定食(大盛)":598,"牛皿定食(特盛)":698,"牛カルビ定食":598,"炙り塩鯖定食":598,"鯖みそ定食":598,"牛鮭定食":548,"豚鮭定食":548,"鰻重(一枚盛)":788,"スパイシーカレー(並盛)":328,"スパイシーカレー(大盛)":418,"チキンスパイシーカレー(並盛)":514,"チキンスパイシーカレー(大盛)":604,ライザップ牛サラダ:500,ライザップ牛サラダエビアボガド:600,とん汁:186,しじみ汁:158,あさり汁:158,味噌汁:65,生野菜サラダ:102,ポテトサラダ:130,ごぼうサラダ:130,エビアボガドサラダ:198,牛小鉢:167,玉子:65,半熟玉子:75,ねぎ玉子:102,チーズ:102,お新香:102,キムチ:102,鮭:195,ご飯:139,のり:65,のり:65,納豆:84,"牛皿(並盛)":302,"牛皿(大盛)":402,"牛皿(特盛)":502,"豚皿(並盛)":288,"豚皿(大盛)":388,"豚皿(特盛)":488,"牛カルビ皿":458,"鰻皿(一枚盛)":698,"瓶ビール":417,"冷酒":315,}varmenucalorie={"牛丼(小盛)":488,"牛丼(並盛)":652,"牛丼(アタマの大盛)":741,"牛丼(大盛)":863,"牛丼(特盛)":1030,"牛丼(超特盛)":1169,"豚丼(小盛)":530,"豚丼(並盛)":707,"豚丼(アタマの大盛)":797,"豚丼(大盛)":931,"豚丼(特盛)":1172,"豚丼(超特盛)":1319,"牛カルビ丼(小盛)":618,"牛カルビ丼(並盛)":802,"牛カルビ丼(アタマの大盛)":1019,"牛カルビ丼(大盛)":1136,"牛カルビ丼(特盛)":1327,"牛カルビ丼(超特盛)":1502,"牛皿定食(並盛)":739,"牛皿定食(大盛)":797,"牛皿定食(特盛)":968,"牛カルビ定食":966,"炙り塩鯖定食":830,"鯖みそ定食":895,"牛鮭定食":712,"豚鮭定食":800,"鰻重(一枚盛)":670,"スパイシーカレー(並盛)":539,"スパイシーカレー(大盛)":691,"チキンスパイシーカレー(並盛)":747,"チキンスパイシーカレー(大盛)":898,ライザップ牛サラダ:404,ライザップ牛サラダエビアボガド:430,とん汁:176,しじみ汁:42,あさり汁:51,味噌汁:20,生野菜サラダ:25,ポテトサラダ:122,ごぼうサラダ:70,エビアボガドサラダ:83,牛小鉢:130,玉子:76,半熟玉子:76,ねぎ卵:103,チーズ:98,お新香:13,キムチ:26,鮭:133,ご飯:386,のり:5,のり:5,納豆:98,"牛皿(並盛)":257,"牛皿(大盛)":315,"牛皿(特盛)":486,"豚皿(並盛)":320,"豚皿(大盛)":394,"豚皿(特盛)":634,"牛カルビ皿":416,"鰻皿(一枚盛)":242,"瓶ビール":215,"冷酒":185,}varmenulength=0;varmenucalorielength=0;varary=[];vararycalorie=[];for(iinmenu){menulength++;ary.push(menu[i]);}for(iinmenucalorie){menucalorielength++;arycalorie.push(menucalorie[i]);}varrand=Math.floor(Math.random()*menulength);varkey=Object.keys(menu);lettotal=ary[rand];lettotalcalorie=arycalorie[rand];varkey1=key[rand];result.innerHTML='<p style="text-align: center"><b>イートインガチャ結果</b></p><p><strong style="font-size: large">'+key[rand]+'</strong>：'+ary[rand]+'円　'+arycalorie[rand]+'kcal</p>';while(total<=1700){varrand2=Math.floor(Math.random()*menulength);total=total+ary[rand2];totalcalorie=totalcalorie+arycalorie[rand2];key1=key1+'，'+key[rand2];if(total<=844){document.getElementById('result').innerHTML+='<p><strong style="font-size: large">'+key[rand2]+'</strong>：'+ary[rand2]+'円　'+arycalorie[rand2]+'kcal</p>';}elseif(total<=909){document.getElementById('result').innerHTML+='<p><strong style="font-size: large">'+key[rand2]+'</strong>：'+ary[rand2]+'円　'+arycalorie[rand2]+'kcal</p>';break;}else{total=total-ary[rand2];totalcalorie=totalcalorie-arycalorie[rand2];key1=key1.replace('，'+key[rand2],'');}}document.getElementById('result').innerHTML+='<br><p style="text-align: center">税抜合計：'+total+'円<br><b>税込合計：'+Math.floor(total*1.1)+'円<br>カロリー合計：'+totalcalorie+'kcal </b></p>';getResult.addEventListener('click',functiontwitText(){vars,url;s="吉野家1000円ガチャの結果は………"+key1+"　で税込合計"+Math.floor(total*1.1)+"円で，カロリーの合計は"+totalcalorie+"kcal です。";url='hiraocafe.com/yoshinoya1000.html';if(s!=""){if(s.length>140){//文字数制限alert("テキストが140字を超えています");}else{//投稿画面を開くurl="http://twitter.com/share?url="+escape(url)+"&text="+s;window.open(url,"_blank","width=600,height=300");}}})

<divclass="hoge"></div>

<divid="hoge"></div>

<div></div><div></div><div></div>

<div><h2></h2></div>

heigh:100px;

width:100px;

background-color:#fff;

color:#fff;

text-align:center;

margin:10px;

padding:10px;

<divclass="jacket"><divclass="building"><!-- ビルの上っぽそうなのでそのパーツを1まとまりにしました --><divclass="ami"></div><!-- 網っぽいところ --><divclass="block"></div><!-- ブロックっぽいところ --><divclass="tile"></div><!-- 床っぽいところ --></div><pclass="left_text">YOASOBI</p><!-- 左の文字 --><pclass="right_text">夜に駆ける</p><!-- 右の文字 --><figure><imgsrc="hito.png"alt="人のイラスト"></figure><!-- ここだけ画像。好きな画像を入れてね。 --></div>

.jacket{width:500px;height:500px;background:#F35975;position:relative;}

.building{width:100%;position:absolute;left:0;bottom:0;}

.building.ami{width:100%;height:95px;background-color:#fff;background:linear-gradient(-45deg,#4960765%,transparent5%,transparent45%,#49607645%,#49607655%,transparent55%,transparent95%,#49607695%),linear-gradient(45deg,#4960765%,transparent5%,transparent45%,#49607645%,#49607655%,transparent55%,transparent95%,#49607695%);background-size:10px10px;}

.building.block{width:100%;height:20px;background:linear-gradient(#b78d9760%,#99899380%,#838190);}

.building.tile{width:100%;height:130px;border-top:solid5px#415971;background:linear-gradient(#707c8e2%,#5369805%,#536980);position:relative;}.building.tile::before{content:'';width:90px;height:90px;background:linear-gradient(-45deg,transparent,transparent49.3%,#41597149.3%,#41597150.7%,transparent50.7%,transparent);position:absolute;top:0;left:0;display:block;}.building.tile::after{content:'';width:90px;height:90px;background:linear-gradient(45deg,transparent,transparent49.3%,#41597149.3%,#41597150.7%,transparent50.7%,transparent);position:absolute;top:0;right:0;display:block;}

.left_text{color:#04274B;font-size:28px;font-family:"HG創英角ｺﾞｼｯｸUB","HG創英角ｺﾞｼｯｸ","他のゴシック系フォントなど";/* ※基本的にブラウザではこのフォントでは表示されません */letter-spacing:1.35em;line-height:1;writing-mode:vertical-rl;position:absolute;top:90px;left:0;margin:0;}.right_text{color:#04274B;font-size:50px;font-family:"游明朝",YuMincho,"游教科書体","他の明朝系フォントなど";line-height:1;letter-spacing:0.5em;writing-mode:vertical-rl;position:absolute;top:0;right:0;margin:0;}

figure{position:absolute;left:25%;bottom:0;margin:0;}

<div class="jacket">
    <div class="building"> <!-- ビルの上っぽそうなのでそのパーツを1まとまりにしました -->
        <div class="ami"></div> <!-- 網っぽいところ -->
        <div class="block"></div> <!-- ブロックっぽいところ -->
        <div class="tile"></div> <!-- 床っぽいところ -->
    </div>
    <p class="left_text">YOASOBI</p> <!-- 左の文字 -->
    <p class="right_text">夜に駆ける</p> <!-- 右の文字 -->
    <figure><img src="hito.png" alt="人のイラスト"></figure> <!-- ここだけ画像。好きな画像を入れてね。 -->
</div>




<style>
    .jacket {
        width: 500px;
        height: 500px;
        background: #F35975;
        position: relative;
    }

    .building {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .building .ami {
        width: 100%;
        height: 95px;
        background-color: #fff;
        background: linear-gradient(-45deg, #496076 5% ,transparent 5%, transparent 45%, #496076 45%, #496076 55%, transparent 55%, transparent 95%, #496076 95%),linear-gradient(45deg, #496076 5% ,transparent 5%, transparent 45%, #496076 45%, #496076 55%, transparent 55%, transparent 95%, #496076 95%);
        background-size: 10px 10px;
    }

    .building .block {
        width: 100%;
        height: 20px;
        background: linear-gradient(#b78d97 60%, #998993 80%, #838190);
    }

    .building .tile {
        width: 100%;
        height: 130px;
        border-top: solid 5px #415971;
        background: linear-gradient(#707c8e 2%, #536980 5%, #536980);
        position: relative;
    }

    .building .tile::before {
        content: '';
        width: 90px;
        height: 90px;
        background: linear-gradient(-45deg, transparent, transparent 49.3%, #415971 49.3%, #415971 50.7%, transparent 50.7%, transparent);
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }

    .building .tile::after {
        content: '';
        width: 90px;
        height: 90px;
        background: linear-gradient(45deg, transparent, transparent 49.3%, #415971 49.3%, #415971 50.7%, transparent 50.7%, transparent);
        position: absolute;
        top: 0;
        right: 0;
        display: block;
    }



    .left_text {
        color: #04274B;
        font-size: 28px;
        font-family: "HG創英角ｺﾞｼｯｸUB", "HG創英角ｺﾞｼｯｸ", "他のゴシック系フォントなど"; /* ※基本的にブラウザではこのフォントでは表示されません */
        letter-spacing: 1.35em;
        line-height: 1;
        writing-mode: vertical-rl;
        position: absolute;
        top: 90px;
        left: 0;
        margin: 0;
    }

    .right_text {
        color: #04274B;
        font-size: 50px;
        font-family: "游明朝", YuMincho, "游教科書体", "他の明朝系フォントなど";
        line-height: 1;
        letter-spacing: 0.5em;
        writing-mode: vertical-rl;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    figure {
        position: absolute;
        left: 25%;
        bottom: 0;
        margin: 0;
    }

</style>

<ion-header><ion-toolbarcolor="secondary"><ion-title>ホーム
    </ion-title></ion-toolbar></ion-header><ion-contentclass="home"></ion-content>

.home{background-color:#fff5cc;}

/** Ionic CSS Variables **/:root{/** 省略 **/--ion-background-color:#ffffff;}

ion-content{--ion-background-color:#fcfde8;}

/** Ionic CSS Variables **/:root{/** 省略 **/--ion-background-color:#000000;}