---------HTML---------
---------CSS---------<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---------
<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>