1.source code HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> title </title> <link rel="stylesheet" href="style.css"> </head> <body> <article> <header> <div class="top"> <div class="en1"></div> <div class="en2"></div> <h1>サイト名</h1> </div> </header> <div class="clm1"> <div id="box"> <div class="ttl">1.title</div><div class="con"> <p>本文</p> </div> </div> <div id="box"> <div class="ttl">2.title</div><div class="con"> <p>本文</p> </div> </div> </div> <div class="clm2"> <div id="box"> <div class="ttl">3.title</div><div class="con"> <p>本文</p> </div> </div> <div id="box"> <div class="ttl">4.title</div><div class="con"> <p>本文</p> </div> </div> </div> <footer> template by <a href="https://404f.chillout.jp/empty/">真空</a> </footer> </article> </body> </html> CSS @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap') *{margin:0; padding: 0;} body{ color:#000; font-size:12px; letter-spacing:2.5px; line-height:2.5; font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal; text-align: center; } article{ width: 90%; margin: 5% auto; } /* リンク */ a { position: relative; display: inline-block; padding: .1em; text-decoration: none; color:#000; text-decoration:none; } a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: #4d7599; -webkit-transition: all .3s ease; transition: all .3s ease; } a:hover::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } a:visited{ color:#000; } a:hover{ color:#4d7599; } /* header */ header{ position: relative; margin-bottom: 1em; text-align:center; width: 100%; height: 210px; position: relative; } .en1{ width: 200px; height: 175px; border: 1px solid #aaa; background-color: #ddd; border-radius: 45% 26% 26% 58% / 58% 30% 46% 28% ; margin: 0 auto; position: relative; } .en2{ width: 200px; height: 175px; border: 1px solid #aaa; background-color: transparent; border-radius: 58% 30% 46% 28% / 45% 60% 26% 58% ; margin: -175px auto; position: relative; } h1{ color: #4d7599; position: absolute; bottom: 25px; left: 50%; font-size: 24px; text-transform: uppercase; letter-spacing: 0; white-space: nowrap; transform: translate(-40%, 0) rotate(-10deg); -webkit-transform: translate(-40%, 0) rotate(-10deg); -ms-transform: translate(-40%, 0) rotate(-10deg); } /* リスト */ ul.list { margin: 0; padding:0.5em; list-style-type:none; } ul.list li { position:relative; padding: 0em 0.3em 0.3em 1.3em; } ul.list li:before { position:absolute; content:''; top: 0.6em; left: 0.2em; border-style: solid; border-width: 5px 5px 5px 8px; border-color: transparent transparent transparent #4d7599; } /* カラム */ .clm1{ display: inline-block; align-items: flex-start; vertical-align: top; padding: 10px; margin-bottom: -20px; } .clm2{ display: inline-block; align-items: flex-start; vertical-align: top; padding: 10px; } #box{ display: flex; margin-bottom: 30px; } /* コンテンツ */ .ttl{ writing-mode: vertical-rl; padding: 2px; margin-right: -5px; color:#aaa; text-align: left; } .con{ width: 350px; padding: 5px; text-align: left; overflow-wrap: anywhere; } /* 装飾 */ input{ width:100px; border:1px solid rgba(46,41,48,.4); background:#fff; color:#000; font-size:10px; line-height:1.8; } textarea{ width:200px; border:1px solid #aaa; background:#fff; color:#000; font-size:10px; line-height:1.5_; } mark{ background-color: #eee; } /* footer */ footer{ margin: 5% auto; } /* メディアクエリ */ @media screen and (max-width:758px){ .con{ width: 300px; text-align: left; } } 1.smartphone sample スマホ閲覧サンプル headerの別のサンプルはこちら