MENU

CATEGORYカテゴリー

スポンサー

どうもなみぞうです。

みなさま、GWいかがお過ごしでしょうか。

本日より元号が「令和」になるということもあり、1時間という限られた時間のなかで、令和をCSSで再現してみました。

HTMLやCSSを覚えることで様々なことができるようになりますので、ぜひ一緒に勉強していきましょう。

令和をCSSで再現してみた!

令和でも、JAM25を何卒よろしくお願い申し上げます。

おまけソースコード

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>令和</title>
<link href="reiwa-style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
  <section id="rei-wrap">
    <section id="rei">
      <section class="rei-top-wrap">
        <div class="hitogashira"></div>
        <div class="mid-border"></div>
      </section>
      <section class="ma-wrap">
        <div class="ma-top"></div>
        <div class="ma-middle"></div>
        <div class="ma-bottom"></div>
      </section>
    </section>
  </section>
  <section id="wa-wrap">
    <section class="nogihen">
      <div class="nogi-top"></div>
      <div class="nogi-middle"></div>
      <div class="nogi-bottom"></div>
      <div class="nogi-line"></div>
    </section>
    <section class="kuti">
      <div class="wa-kuti"></div>
    </section>
  </section>
</header>
</body>
</html>

CSS


body{
	margin:0;
}
header#reiwa {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
*{border-width:4px;}

section.kuti-wrap {
    position: relative;
    height: 50vh;
    background: #e1e1e1;
}

.rei-top-wrap {
    height: 100px;
    width: 200px;
    position: relative;
}

section#rei {
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50vh;
}
.hitogashira {
    border-top-style: solid;
    border-left-style: solid;
	border-top-color: #181818;
    width: 200px;
    height: 200px;
    transform: rotate(45deg);
    position: absolute;
    top: 10%;
}

.mid-border {
    border-top-style: solid;
    width: 100px;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    transform: rotate(10deg);
}
.ma-wrap{
	width:200px;
	height: 200px;
	position: relative;
}
.ma-top {
    position: absolute;
    border-top-style: solid;
    width: 200px;
    margin: auto;
    left: 0;
    right: 0;
    top: 30px;
}.ma-middle {
    position: absolute;
    border-left-style: solid;
    width: 1px;
    height:150px;
    margin: auto;
    left: 0;
    right: 0;
    top: 30px;
}
.ma-bottom {
    position: absolute;
    border-left-style: solid;
    width: 1px;
    height:80px;
    margin: auto;
    right: 0;
    top: 30px;
    box-sizing:border-box;
}
#wa-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}
.nogihen {
    position: relative;
    width: 150px;
    height: 400px;
}

.nogi-top {
    border-top-style: solid;
    width: 100px;
    height: 1px;
    position: absolute;
    transform: rotate(-10deg);
	left:0;
    right: 0;
	margin:auto;
}

.nogi-middle{
    border-top-style:solid;
    width:150px;
    position:absolute;
    top:15%;
	left:0;
    right: 0;
	margin:auto;
}

.nogi-bottom{
    border-top-style:solid;
    border-left-style:solid;
    height:80px;
    width:80px;
    left:0;
    right: 0;    margin:auto;
    position:absolute;
    top:30%;
    transform:rotate(45deg);

}
.nogi-line {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 1px;
    height: 200px;
    border-left-style: solid;
}
.nogi-line {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 1px;
    height: 200px;
    border-left-style: solid;
}

section.kuti {
    position: relative;
    width:150px;
    height:200px;
}
.wa-kuti{
    position:absolute;
    top:0;
	left:0;
    right:0;
    bottom:0;
    width:100px;
    height:100px;
    margin:auto;
    border:4px solid;
}
B!

この記事を書いた人:なみぞ

前職イタリアンシェフからWebディレクターへと転身。 動画制作からWeb制作まで幅広く対応。

スポンサー

WORK REQUEST

CONTACT