揺れる緑に焦がれて

20XX.XX.XX　─log

information

ポケモンSVのチリカラーなテンプレート。
3カラム・レスポンシブ対応になっています。
▶︎おまけ(EXカラー)

decoration

リストサンプル
マークサンプル
リンクサンプル

▼top画像　左がpng、右がsvgになります。svgは大きいのでwidthなどで指定してご使用ください。

source

CSS
@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap'); *{margin:0; padding: 0;} body{ color: #505050; font-size:13px; letter-spacing:2px; line-height:2; font-family: "Shippori Mincho", serif; text-align: center; background-color: #245c57; } /* リンク */ a { position: relative; padding: .1em; text-decoration: none; color:#505050; 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: #245c57; -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:#505050; } a:hover{ color:#245c57; } /* カラム */ .container { max-width: 100%; margin: 0 auto; margin-top: 200px; display: flex; background-color: #d3cdba; justify-content: center; } .column { width: 30%; max-width: 360px; margin-left: 25px; } /* コンテンツ */ .con{ margin-bottom: 0; text-align: left; } h1 { font-size: 18px; border-bottom: solid 10px #32363A; position: relative; width: 75%; padding: 10px; margin: 0 auto; } h1:after { position: absolute; content: " "; display: block; border-bottom: solid 10px #5c3b2a; clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%); right: 0%; bottom: -10px; width: 30%; } .h1_p { margin: 10px 0 30px 0; font-size: 11px; text-align: center; } h2{ font-size: 13px; border-top: solid 1px #245c57; border-bottom: solid 1px #245c57; margin: 0 auto; padding: 3px; margin-top: 30px; text-align: center; } h2::first-letter { color: #b84846; font-size: 13px; } p{ padding: 5px 10px 0 10px; text-align: left; } /* 装飾 */ input{ width:100px; border:1px solid rgba(46,41,48,.4); background:#fff; color:#505050; font-size:10px; line-height:1.8; } textarea{ width:250px; height: 100px; border:1px solid #aaa; background:#fff; color:#505050; font-size:10px; line-height:1.5; } mark{ background-color: #dec289; } ul { list-style-type: none; padding: 10px; } ul li:before { content: "▷"; } /* 上 */ .top { position: absolute; top: 0; left: 0; width: 100%; height: 200px; overflow: hidden; line-height: 0; transform: rotate(180deg); } .top svg { position: relative; display: inline-block; width: calc(100% + 1.3px); height: 90px; } .top .shape-fill { fill: #d3cdba; } /* 下 */ .under { position: absolute; left: 0; width: 100%; height: 100px; overflow: hidden; line-height: 0; } .under svg { position: relative; display: inline-block; width: calc(100% + 1.3px); height: 90px; } .under .shape-fill { fill: #d3cdba; } /* クレジット */ .credit{ width: 100%; background-color: #d3cdba; font-size: 11px; padding-top: 50px; margin: -1px 0 -0.5px 0; } /* メディアクエリ */ @media (max-width: 768px) { .container { flex-direction: column; align-items: center; margin-top: 100px; } .column { width: 90%; margin-left: initial; } .top{ height: 100px; } }
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>　template_chili　</title> <link rel="stylesheet" href="CSSファイル"> </head> <body>  <div class="top"> <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> <path d="M1200 0L0 0 892.25 114.72 1200 0z" class="shape-fill"></path> </svg> </div>  <section class="container"> <div class="column"> <img src="画像URL" > <h1>site name</h1> <p class="h1_p">更新履歴用</p> </div> <div class="column"> <div class="con"> <h2>タイトル</h2> <p>本文</p> </div> <div class="con"> <h2>タイトル</h2> <p>本文</p> </div> </div> <div class="column"> <div class="con"> <h2>タイトル</h2> <p>本文</p> </div> </div> </section>  <section class="credit">template by <a href="">真空</a></section>  <div class="under"> <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> <path d="M1200 0L0 0 892.25 114.72 1200 0z" class="shape-fill"></path> </svg> </div> </body> </html>