★

Advent calendar

ここに説明が書けます。あいうえおかきくけこ。
たちつてとなにぬねの。テキスト。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

head

<style>
@charset "UTF-8";
  
/* ウェブフォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Parisienne&family=Sacramento&family=Zen+Kaku+Gothic+New&display=swap');
  
/* 全体に適用する */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
}
  
/* root */
:root {
  --color: #006a6c;
  --color2: #e8383d;
  --color3: #fdd35c;
  --white: #ffffff;
  --black: #333;
  --font1: 'Dancing Script', cursive;
  --font2: 'Parisienne', cursive;
  --font3: 'Sacramento', cursive;
}
  
/* 基本設定 */
body {
  background-color: var(--white);
  text-align: center;
  line-height: 1.7;
  letter-spacing: 0.1em;
  font-size: 13px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: var(--black);
}
  
/* 横幅768px以上で読み込む */
@media screen and (min-width: 768px) {
  body {
font-size: 14px;
  }
}
  
/* 横幅1024px以上で読み込む */
@media screen and (min-width: 1024px) {
  body {
font-size: 15px;
  }
}
  
/* リンク */
a,
a:visited {
  text-decoration: none;
  color: var(--color);
}
  
a:hover {
  color: var(--color);
}
  
header {
  padding: 3em 0 1em;
  background-color: var(--color);
  text-align: center;
}
  
header span {
  display: inline-block;
  transform: rotate(10deg);
  font-size: 2em;
  color: var(--color2);
}
  
header h1 {
  letter-spacing: 0;
  font-size: 3em;
  font-family: var(--font1);
  color: var(--color2);
}
  
header p {
  margin: 0 auto;
  width: 80%;
  max-width: 400px;
  font-size: 11px;
  color: var(--color3);
}
  
section ul {
  display: flex;
  flex-wrap: wrap;
  margin: 1.5em auto;
  width: 90%;
  max-width: 500px;
  list-style-type: none;
}
  
section ul li {
  position: relative;
  flex-basis: 18%;
  height: 80px;
  margin: 1.5em auto;
}
  
section ul li a {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.3em;
}
  
.box1 {
  background-color: var(--color2);
  border: 8px solid var(--color);
}
  
.box1 a {
  padding-top: 0.3em;
  font-family: var(--font3);
  color: var(--white);
}
  
.box2 {
  position: relative;
}
  
.box2::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, var(--color3) 0, var(--color3) 50%, var(--white) 50%, var(--white) 100%);
}
  
.box2 a {
  font-family: var(--font1);
  color: var(--color2);
}
  
.box3 {
  position: relative;
}
  
.box3::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px dashed var(--color2);
}
  
.box3 a {
  color: var(--color2);
}
  
.box4 {
  position: relative;
}
  
.box4::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 50px;
  height: 50px;
  background: repeating-linear-gradient(45deg, var(--color) 0, var(--color) 10px, var(--color2) 10px, var(--color2) 20px);
}
  
.box4 a {
  padding-top: 0.3em;
  font-family: var(--font3);
  color: var(--color3);
}
  
.box5 {
  background: linear-gradient(90deg, var(--color2) 0, var(--color2) 50%, var(--color) 50%, var(--color) 100%);
}
  
.box5 a {
  font-family: var(--font2);
  color: var(--white);
}
  
.box6 {
  position: relative;
}
  
.box6::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 5px double var(--color3);
}
  
.box6 a {
  font-family: var(--font1);
  color: var(--color);
}
  
.box7 {
  background-color: var(--color);
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
  
.box7 a {
  color: var(--white);
}
  
.box8 {
  background: linear-gradient(90deg, var(--white) 0, var(--white) 30%, var(--color2) 30%, var(--color2) 70%, var(--white) 70%, var(--white) 100%);
}
  
.box8 a {
  padding-top: 0.3em;
  font-family: var(--font3);
  color: var(--white);
}
  
.box9 {
  border-radius: 20%;
  border: 5px dotted var(--color3);
}
  
.box9 a {
  font-family: var(--font1);
  color: var(--color3);
}
  
.box10 {
  position: relative;
}
  
.box10::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, var(--color3) 0, var(--color3) 50%, var(--color2) 50%, var(--color2) 100%);
}
  
.box11 {
  position: relative;
}
  
.box11::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 50px;
  height: 50px;
  background: repeating-linear-gradient(90deg, var(--color) 0, var(--color) 10px, var(--color2) 10px, var(--color2) 20px);
}
  
.box11 a {
  padding-top: 0.3em;
  font-family: var(--font3);
  color: var(--white);
}
  
.box12 {
  position: relative;
}
  
.box12::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px dotted var(--color);
}
  
.box12 a {
  padding-top: 0.3em;
  font-family: var(--font2);
}
  
.box13 {
  background-color: var(--color3);
  border: 8px solid var(--color);
}
  
.box14 {
  background-color: var(--color2);
  clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
  
.box14 a {
  padding-top: 0.3em;
  font-family: var(--font3);
  color: var(--white);
}
  
.box15 {
  position: relative;
}
  
.box15::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 50px;
  height: 50px;
  border: 5px double var(--color);
}
  
.box15 a {
  font-family: var(--font1);
}
  
.box16 {
  background-color: var(--color2);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
  
.box16 a {
  color: var(--white);
}
  
.box17 {
  position: relative;
}
  
.box17::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: linear-gradient(90deg, var(--color) 0, var(--color) 50%, var(--color3) 50%, var(--color3) 100%);
}
  
.box17 a {
  padding-top: 0.3em;
  font-family: var(--font3);
  color: var(--white);
}
  
.box18 {
  background-color: var(--color2);
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
  
.box18 a {
  font-family: var(--font1);
  color: var(--color3);
}
  
.box19 {
  position: relative;
}
  
.box19::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 50px;
  height: 50px;
  border: 5px dashed var(--color);
}
  
.box20 {
  position: relative;
}
  
.box20::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color3);
}
  
.box20 a {
  padding-top: 0.3em;
  font-family: var(--font3);
  color: var(--color2);
}
  
.box21 {
  background: linear-gradient(45deg, var(--color) 0, var(--color) 50%, var(--color2) 50%, var(--color2) 100%);
}
  
.box21 a {
  font-family: var(--font1);
  color: var(--white);
}
  
.box22 {
  background: linear-gradient(90deg, var(--white) 0, var(--white) 30%, var(--color3) 30%, var(--color3) 70%, var(--white) 70%, var(--white) 100%);
}
  
.box22 a {
  color: var(--color);
}
  
.box23 {
  position: relative;
}
  
.box23::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px double var(--color);
}
  
.box23 a {
  padding-top: 0.3em;
  font-family: var(--font3);
  color: var(--color2);
}
  
.box24 {
  background-color: var(--color2);
  border: 8px solid var(--color3);
}
  
.box24 a {
  padding-top: 0.3em;
  font-family: var(--font2);
  color: var(--white);
}
  
.box25 {
  position: relative;
}
  
.box25::before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 50px;
  height: 50px;
  background: repeating-linear-gradient(-45deg, var(--color) 0, var(--color) 10px, var(--color2) 10px, var(--color2) 20px);
}
  
.box25 a {
  color: var(--white);
}
  
article {
  margin: 3em auto;
  width: 80%;
  max-width: 500px;
}
  
article h1 {
  margin-bottom: 0.5em;
  text-align: center;
}
  
article p {
  text-align: left;
}
  </style>

body

<header>
<span>★</span>
<h1>Advent calendar</h1>
<p>
ここに説明が書けます。あいうえおかきくけこ。<br>
たちつてとなにぬねの。テキスト。
</p>
</header>
<main>
<section>
<ul>
<li class="box1"><a href="page.html">1</a></li>
<li class="box2"><a href="page.html">2</a></li>
<li class="box3"><a href="page.html">3</a></li>
<li class="box4"><a href="page.html">4</a></li>
<li class="box5"><a href="page.html">5</a></li>
<li class="box6"><a href="page.html">6</a></li>
<li class="box7"><a href="page.html">7</a></li>
<li class="box8"><a href="page.html">8</a></li>
<li class="box9"><a href="page.html">9</a></li>
<li class="box10"><a href="page.html">10</a></li>
<li class="box11"><a href="page.html">11</a></li>
<li class="box12"><a href="page.html">12</a></li>
<li class="box13"><a href="page.html">13</a></li>
<li class="box14"><a href="page.html">14</a></li>
<li class="box15"><a href="page.html">15</a></li>
<li class="box16"><a href="page.html">16</a></li>
<li class="box17"><a href="page.html">17</a></li>
<li class="box18"><a href="page.html">18</a></li>
<li class="box19"><a href="page.html">19</a></li>
<li class="box20"><a href="page.html">20</a></li>
<li class="box21"><a href="page.html">21</a></li>
<li class="box22"><a href="page.html">22</a></li>
<li class="box23"><a href="page.html">23</a></li>
<li class="box24"><a href="page.html">24</a></li>
<li class="box25"><a href="page.html">25</a></li>
</ul>
</section>
</main>

page