タイトル

メイン
---------HTML---------
       <body>
       <h1>タイトル</h1>
 
       <main>メイン</main>

       <nav>ナビ</nav>

       <aside id="side">サイド
                <div class="wrapper">     -追加-
                <div id="text-button" onclick="location.href='/'"> -追加-
       </aside>

       <footer>フッター</footer>

       <aside id="ad">広告</aside> 

       </body>

       
---------HTML---------
---------CSS---------
     
      <style>
      body {
         width: 1000px;
         display: grid;
         margin: 0;
      min-height: 60vh;/*  ビューポート高さの 60%  */
      grid-template-rows: 70px 80px 1fr 80px;
         /*上(title), (nav) 他,(main),(footer) 縦行*/
      grid-template-columns: 80px 1fr 300px;
                                         /*横並び列*/
         grid-template-areas:
        "title  title  title "
        "nav    main   ad    "
        "nav    main   side  "
        "footer footer footer";
       }
      body > * {
        margin: 3px;
        padding: 10px;
       }
     h1 {
         grid-area: title;
         background: #faa;
         border-radius: 30px 30px 0 0;
     }
     main {
         grid-area: main;
         background: #afa;
     }
     nav {
         grid-area: nav;
         background: #aaf;
     }
     #side {
         grid-area: side;
         background: #faf;
     }
     footer {
         grid-area: footer;
         background: #aaa;
         font-size: 1.5em;
         text-align: center;
         border-radius: 0 0 30px 30px;
     }
     #ad {
        grid-area: ad;
        background: #888;
     }
 #element{            - 以下は追加 -
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(200px, 50%, 1000px);
  padding: 1.5rem 1rem;
  color: #fff;
  background: #468eef;
  border-radius: 5px;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.13);
  margin: 0 auto;
} 
.element{
  display: flex;                              /*表示:フレクッス;*/
  justify-content: center;                 /* コンテナ内全体の主軸方向(初期値では横方向)の揃え位置*/
  align-items: center;                    /* コンテナ内全体の交差軸方向(初期値では縦方向)の揃え位置*/
  width: clamp(250px, 50%, 500px);    /*幅:クランプ(最小幅, 推奨幅, 最大幅); */
  padding: 0rem 1rem;                /* */
  color: #fff;                         /*色 */
  background: #468eef;                 /*背景 */
  border-radius: 5px;                           /* */
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.13);  /* rgba( 赤, 緑, 青, 透明度 )*/
  margin: 1px auto;                               /*上下0は不要? 左右自動 */
}
 
     </style>
<style>                    -----------------------------以下はページ内に追加こちら側優先している--------------------------
h1{ background: #CCCCFF;}
#side{background: #CCCCFF;} 
.h{
  width: 400px;
  background: #CCCCFF;
  margin: 0 300px 0 100px;}
.wrapper{
  background: non;
  color: #fff; 
  display: grid;
}
#ad{background: #ccffff;}
#text-button {
  display: flex;
  cursor: pointer;
  width: clamp(250px, 50%, 500px);
  background: #468eef;                 /*背景 */
  text-align: center;
  border: 0.5px solid #232323;
  padding: 10px;
}
</style>