挨拶という名の前書き
みなさんこんにちはバタバタ続きだけどそれも快感に変わってきたなおこです。
そういえば一昨日はオリンピックが始まりましたね！
プラカード素材がいらすと屋で既に作られたり、Googleのトップページで記念のゲームがプレイできるなどTwitterでも大賑わいだったわけですが、
なんだかんだいろいろあったけどバタバタしてて寝落ちして土曜日になったわけですね。
土曜日起きて休みやし面白くて便利な物ないかな〜って感じでAmazonをみてたんですけど、なんとそこにはメイド服があったんですよ。
でも高い！4000円近くする。まあ買えないわけじゃないけどちょっと手出すのを渋ってしまうというか。（コスプレやったことない人からするとこれが高いかやすいかわからんけど）
これCSSアートで作ったら面白いかも！とおもい５時間ほどで作っちゃいました！
制作様子
HTMLを書いていく
とりあえず大まかにパーツ分けしちゃう！
まずは３段階にわけでまあ服の各正式名称知らないので適当につけとく
- ネック？
- コルセット？
- スカート？
<div class="cssmaid-lap">
<div class="neck">
</div>
<div class="corset">
</div>
<div class="skirt">
</div>
</div>ネック部分は３個のパーツに分けれそうだなってことで軽く書いておく
<div class="neck">
<div class="lace up"></div>
<div class="ribbon"></div>
<div class="lace down"></div>
</div>コルセット部分画像を見ながら大まかに分けてなんとなく良い感じにする。
<div class="corset">
<div class="center">
<div class="lace">
<div class="side"></div>
</div>
<div class="under"></div>
<div class="ribbon">
∞
</div>
</div>
<div class="left">
<div class="poncho">
<div class="ribbon">∞</div>
<div class="iris"></div>
</div>
<div class="lace"></div>
<div class="line up"></div>
<div class="line down"></div>
</div>
<div class="right">
<div class="line up"></div>
<div class="line down"></div>
<div class="lace"></div>
<div class="poncho">
<div class="ribbon">∞</div>
<div class="iris"></div>
</div>
</div>
</div>スカート部分もコルセット部分同様になんとなく書く
<div class="skirt">
<div class="belt">
<div class="ribbon left">∞</div>
<div class="ribbon center">☓☓</div>
<div class="ribbon right">∞</div>
</div>
<div class="main">
<div class="line"></div>
<div class="lace"></div>
</div>
<div class="lace"></div>
</div>
全て合わせた全体のHTMLコード↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cssmaid-lap">
<div class="neck">
<div class="lace up"></div>
<div class="ribbon"></div>
<div class="lace down"></div>
</div>
<div class="corset">
<div class="center">
<div class="lace">
<div class="side"></div>
</div>
<div class="under"></div>
<div class="ribbon">
∞
</div>
</div>
<div class="left">
<div class="poncho">
<div class="ribbon">∞</div>
<div class="iris"></div>
</div>
<div class="lace"></div>
<div class="line up"></div>
<div class="line down"></div>
</div>
<div class="right">
<div class="line up"></div>
<div class="line down"></div>
<div class="lace"></div>
<div class="poncho">
<div class="ribbon">∞</div>
<div class="iris"></div>
</div>
</div>
</div>
<div class="skirt">
<div class="belt">
<div class="ribbon left">∞</div>
<div class="ribbon center">☓☓</div>
<div class="ribbon right">∞</div>
</div>
<div class="main">
<div class="line"></div>
<div class="lace"></div>
</div>
<div class="lace"></div>
</div>
</div>
</div>
</body>
</html>SCSSを書いていく（実質CSS）
CSSで本来書くべきかもしれないが時短をするためにSCSSを使っていきます。
めっちゃ長いので深く解説はしないけど書いてることは
transformとかboarderとかpositionでごりごり書いただけ〜
html,body{
overflow: hidden
}
body{
background-color: gray;
}
#video{
position: relative;
width: 100vw;
height: 100vh;
}
.cssmaid-lap{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 25% auto 0;
width: 230px;
height: 320px;
text-align: center;
z-index: 10;
// opacity: 0.8;
.neck{
width: 46px;
height: 24px;
border-bottom-left-radius: 60%;
border-bottom-right-radius: 60%;
transform: scale(0.8,1.4);
// background-color: black;
margin: 0 auto;
position: relative;
.ribbon{
position: absolute;
z-index: 5;
width: 46px;
height: 6px;
margin: 0 auto;
background:
radial-gradient(
100% 50% at top,
transparent 40%,
black 50%,
);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
top: 8px;
transform: scale(1.1,0.6);
&::before{
display: block;
position: absolute;
top: 4px;
left: 37%;
content: "";
width: 3px;
height: 24px;
background-color: black;
transform: skew(-15deg) rotate(10deg);
}
&::after{
display: block;
position: absolute;
top: 4px;
right: 37%;
content: "";
width: 3px;
height: 24px;
background-color: black;
transform: skew(15deg) rotate(-10deg);
}
}
.lace{
&.up{
position: absolute;
top: 5px;
width: 46px;
height: 6px;
margin: 0 auto;
background:
radial-gradient(
60% 50% at top,
transparent 40%,
white 50%,
);
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
transform: scale(1.2,1);
}
&.down{
position: absolute;
bottom: 8px;
height: 6px;
width: 46px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom: whitesmoke dotted 2px;
background-color: white;
transform: scale(1.2,0.7);
&::before{
display: block;
content: "";
position: absolute;
height: 7px;
width: 46px;
border-bottom-left-radius: 5rem;
border-bottom-right-radius: 5rem;
border-bottom: whitesmoke dotted 6px;
}
&::after{
display: block;
content: "";
position: absolute;
height: 7px;
width: 46px;
border-bottom-left-radius: 5rem;
border-bottom-right-radius: 5rem;
border-bottom: whitesmoke dotted 4px;
}
}
}
}
.corset{
width: 170px;
margin: 0 auto;
position: relative;
// background-color: green;
// opacity: 0.5;
.center{
width: 75px;
height: 30px;
margin: 0 auto;
position: relative;
&::before{
display: block;
content: "";
width: 37.5px;
height: 20px;
position: absolute;
bottom: -24px;
background-color: black;
transform: skew(0 ,20deg);
}
&::after{
display: block;
content: "";
width: 37.5px;
height: 20px;
position: absolute;
bottom: -24px;
right: 0;
background-color: black;
transform: skew(0 ,-20deg);
}
.lace{
height: 30px;
width: 75px;
margin: 0 auto;
position: relative;
border-right: black solid 5px;
border-left: black solid 5px;
z-index: 10;
&::before{
display: block;
content: "";
background-color: black;
height: 7px;
width: 32.5px;
position: absolute;
transform: rotate(20deg) translateX(1px);
bottom: -10px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top: whitesmoke solid 2px;
border-bottom: whitesmoke solid 3px;
}
&::after{
display: block;
content: "";
background-color: black;
height: 7px;
width: 32.5px;
position: absolute;
right: 0;
transform: rotate(-20deg) translateX(-1px);
bottom: -10px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top: whitesmoke solid 2px;
border-bottom: whitesmoke solid 3px;
}
.side{
position: relative;
width: 85px;
height: 45px;
left: -10px;
right: 0;
margin: 0 auto;
&::before{
position: absolute;
display: block;
content: "";
width: 0;
border-top:white 45px solid;
border-right: white 2.5px solid;
border-left: #00000000 2.5px solid;
border-bottom: #00000000 2.5px solid;
}
&::after{
position: absolute;
display: block;
content: "";
width: 0;
right: 0;
border-top:white 45px solid;
border-left: white 2.5px solid;
border-right: #00000000 2.5px solid;
border-bottom: #00000000 2.5px solid;
}
}
}
.under{
margin-top: 17px;
border-top: #000 42px solid;
border-left: #00000000 12px solid;
border-right: #00000000 12px solid;
border-bottom: #00000000 12px solid;
&::before{
position: absolute;
display: block;
content: "";
width: 0;
top: 42px;
left: 3px;
transform: rotate(-17deg);
height: 48px;
width: 3px;
background-color: white;
border-radius: 50%;
}
&::after{
position: absolute;
display: block;
content: "";
width: 0;
top: 42px;
right: 3px;
transform: rotate(17deg);
height: 48px;
width: 3px;
background-color: white;
border-radius: 50%;
}
}
.ribbon{
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top:28px;
z-index: 15;
transform: scale(1.5,1);
color: #1f1f1f;
&::before{
display: block;
position: absolute;
content: "";
height: 10px;
width: 1px;
background-color: #1f1f1f;
margin: 0 auto;
left: 0;
right: 0;
transform: translateX(-2.5px) translateY(12.5px) rotate(30deg);
}
&::after{
display: block;
position: absolute;
content: "";
height: 10px;
width: 1px;
background-color: #1f1f1f;
margin: 0 auto;
left: 0;
right: 0;
transform: translateX(2.5px) translateY(-12.5px) rotate(-30deg);
}
}
}
.left{
position: absolute;
// background-color: green;
display: block;
height: 90px;
width: 45px;
top: 0;
.line.up{
&::before{
content: "";
position: absolute;
z-index: 20;
right: 0;
width: 2px;
height: 50px;
transform: rotate(-2deg);
background-color: black;
}
&::after{
content: "";
position: absolute;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
transform: rotate(-2deg);
width: 6px;
height: 50px;
right: 0;
background-color: white;
}
}
.line.down{
&::before{
content: "";
position: absolute;
z-index: 20;
right: -7px;
top: 48px;
width: 2px;
height: 42px;
transform: rotate(-18deg);
background-color: black;
border-top-left-radius: 15%;
}
&::after{
content: "";
position: absolute;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
transform: rotate(-18deg);
width: 6px;
height: 47px;
top: 44px;
right: -7px;
background-color: white;
}
}
.lace{
position: absolute;
right: -15px;
top: 5px;
width: 1px;
height: 1px;
// background-color: whitesmoke;
border-bottom: #00000000 0px solid;
border-top: whitesmoke 85px solid;
border-left: whitesmoke 22px solid;
border-right: #00000000 12px solid;
border-top-left-radius: 30%;
border-bottom-left-radius: 30%;
transform: rotate(-25deg) ;
z-index: -1;
}
.poncho{
display: block;
position: absolute;
background-color: black;
width: 30px;
height: 30px;
z-index: -1;
top: 30px;
left: 10px;
transform: rotate(-60deg);
border-top-left-radius: 50%;
border-bottom-left-radius: 10%;
.iris{
display: block;
width: 20px;
height: 10px;
border-radius: 20%;
background-color: black;
top: 5px;
left: -8px;
position: absolute;
&::before{
content: "";
display: block;
width: 20px;
height: 10px;
border-radius: 20%;
background-color: black;
top: 8px;
left: 1px;
position: absolute;
}
&::after{
content: "";
display: block;
width: 10px;
height: 5px;
border-radius: 20%;
background-color: black;
top: 17px;
left: 3px;
position: absolute;
}
// transform: rotate(60deg);
}
.ribbon{
display: block;
position: absolute;
content: "";
top: -10px;
right: 26px;
font-size: 20px;
transform: rotateX(40deg) rotateZ(40deg);
color: #1f1f1f;
z-index: 20;
&::before{
display: block;
content: "";
width: 2px;
height: 20px;
background-color: #1f1f1f;
position: absolute;
top: 15px;
right: 8px;
transform-origin: top;
transform: rotate(18deg) ;
}
&::after{
display: block;
content: "";
width: 2px;
height: 20px;
background-color: #1f1f1f;
position: absolute;
top: 15px;
right: 9px;
transform-origin: top;
transform: rotate(24deg) ;
}
}
}
}
.right{
position: absolute;
// background-color: green;
display: block;
height: 90px;
width: 45px;
top: 0;
right: 0;
.line.up{
&::before{
content: "";
position: absolute;
z-index: 20;
left: 0;
width: 2px;
height: 50px;
transform: rotate(2deg);
background-color: black;
}
&::after{
content: "";
position: absolute;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
transform: rotate(2deg);
width: 6px;
height: 50px;
left: 0;
background-color: white;
}
}
.line.down{
&::before{
content: "";
position: absolute;
z-index: 20;
left: -7px;
top: 48px;
width: 2px;
height: 42px;
transform: rotate(18deg);
background-color: black;
border-top-right-radius: 15%;
}
&::after{
content: "";
position: absolute;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
transform: rotate(18deg);
width: 6px;
height: 47px;
top: 44px;
left: -7px;
background-color: white;
}
}
.lace{
position: absolute;
left: -15px;
top: 5px;
width: 1px;
height: 1px;
// background-color: whitesmoke;
border-bottom: #00000000 0px solid;
border-top: whitesmoke 85px solid;
border-right: whitesmoke 22px solid;
border-left: #00000000 12px solid;
border-top-right-radius: 30%;
border-bottom-right-radius: 30%;
transform: rotate(25deg) ;
z-index: -1;
}
.poncho{
display: block;
position: absolute;
background-color: black;
width: 30px;
height: 30px;
z-index: -4;
top: 30px;
right: 10px;
transform: rotate(60deg);
border-top-right-radius: 50%;
border-bottom-right-radius: 10%;
.iris{
display: block;
width: 20px;
height: 10px;
border-radius: 20%;
background-color: black;
top: 5px;
right: -8px;
position: absolute;
&::before{
content: "";
display: block;
width: 20px;
height: 10px;
border-radius: 20%;
background-color: black;
top: 8px;
right: 1px;
position: absolute;
}
&::after{
content: "";
display: block;
width: 10px;
height: 5px;
border-radius: 20%;
background-color: black;
top: 17px;
right: 3px;
position: absolute;
}
}
.ribbon{
display: block;
position: absolute;
content: "";
top: -10px;
left: 26px;
font-size: 20px;
transform: rotateX(40deg) rotateZ(-40deg);
z-index: 20;
color: #1f1f1f;
&::before{
display: block;
content: "";
width: 2px;
height: 20px;
background-color: #1f1f1f;
position: absolute;
top: 15px;
left: 8px;
transform-origin: top;
transform: rotate(-18deg) ;
}
&::after{
display: block;
content: "";
width: 2px;
height: 20px;
background-color: #1f1f1f;
position: absolute;
top: 15px;
left: 9px;
transform-origin: top;
transform: rotate(-24deg) ;
}
}
}
}
}
.skirt{
top: 56px;
position: relative;
.belt{
width: 70px;
height: 25px;
background-color: whitesmoke;
margin: 0 auto;
position: relative;
top: 0;
border-top-right-radius: 2700px 300px;
border-top-left-radius: 2700px 300px;
z-index: 30;
background:
radial-gradient(
100% 10% at bottom,
transparent 40%,
whitesmoke 50%,
);
.ribbon{
&.left{
position: absolute;
left: -10px;
top: -12px;
font-size: 24px;
font-weight: bold;
transform: scale(1 , 0.5) rotate(-10deg);
z-index: 20;
color: #1f1f1f;
&::before{
display: block;
content: "";
width: 3px;
height: 46px;
background-color: #1f1f1f;
position: absolute;
right: 0;
left: -20px;
top: 17px;
margin: 0 auto;
transform: rotate(25deg);
}
&::after{
display: block;
content: "";
width: 3px;
height: 38px;
background-color: #1f1f1f;
position: absolute;
left: 0;
right: -2px;
top: 18px;
margin: 0 auto;
transform: rotate(-5deg);
}
}
&.center{
display: block;
width: 10px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: -5px;
writing-mode: vertical-rl;
line-height: 0.5;
transform: scale(3 ,0.5);
color: #1f1f1f;
}
&.right{
position: relative;
width: 30px;
right: -50px;
top: -12px;
font-size: 24px;
font-weight: bold;
transform: scale(1 , 0.5) rotate(10deg);
z-index: 20;
&::before{
display: block;
content: "";
width: 3px;
height: 46px;
background-color: #1f1f1f;
position: absolute;
left: 0;
right: -20px;
top: 17px;
margin: 0 auto;
transform: rotate(-25deg);
}
&::after{
display: block;
content: "";
width: 3px;
height: 38px;
background-color: #1f1f1f;
position: absolute;
right: 0;
left: -2px;
top: 18px;
margin: 0 auto;
transform: rotate(5deg);
}
}
}
&::before{
position: absolute;
display: block;
content: "";
width: 70px;
border-bottom: whitesmoke dotted 3px;
// border-top-right-radius: 2700px 300px;
// border-top-left-radius: 2700px 300px;
transform: rotate(-180deg);
bottom: -1px;
z-index: 10;
}
&::after{
position: absolute;
display: block;
content: "";
width: 70px;
border-bottom: whitesmoke dotted 6px;
// border-top-right-radius: 2700px 300px;
// border-top-left-radius: 2700px 300px;
transform: rotate(-180deg);
bottom: -1px;
z-index: 10;
}
}
.main{
display: block;
width: 70px;
margin: 0 auto;
top: -12px;
position: relative;
z-index: -1;
&::before{
position: absolute;
display: block;
margin: 0 auto;
left: -70px;
right: 0;
top: 10px;
content: "";
width: 210px;
border-right: solid #00000000 70px;
border-left: solid #00000000 70px;
border-bottom: solid whitesmoke 110px;
border-bottom-left-radius: 2700px 1100px;
border-bottom-right-radius: 2700px 1100px;
z-index: 70;
}
&::after{
position: absolute;
display: block;
margin: 0 auto;
left: -71.75px;
right: 0;
top: 13px;
content: "";
width: 213.5px;
border-right: solid #00000000 70px;
border-left: solid #00000000 70px;
border-bottom: solid black 110px;
border-bottom-left-radius: 2700px 1100px;
border-bottom-right-radius: 2700px 1100px;
z-index: 60;
}
.line{
position: absolute;
display: block;
margin: 0 auto;
left: -75.5px;
right: 0;
content: "";
width: 221px;
border-right: solid #00000000 70px;
border-left: solid #00000000 70px;
border-bottom: solid black 110px;
border-bottom-left-radius: 2700px 1100px;
border-bottom-right-radius: 2700px 1100px;
top: 19px;
z-index: 50;
&::before{
position: absolute;
display: block;
margin: 0 auto;
left: -68.25px;
right: 0;
top: -3px;
content: "";
width: 217.5px;
border-right: solid #00000000 70px;
border-left: solid #00000000 70px;
border-bottom: solid whitesmoke 110px;
border-bottom-left-radius: 2700px 1100px;
border-bottom-right-radius: 2700px 1100px;
z-index: 40;
}
}
.lace{
position: relative;
display: block;
margin: 0 auto;
left: -75.5px;
right: 0;
content: "";
width: 221px;
border-right: solid #00000000 50px;
border-left: solid #00000000 50px;
border-bottom: solid black 110px;
border-bottom-left-radius: 2700px 1100px;
border-bottom-right-radius: 2700px 1100px;
top: 80px;
z-index: 20;
&::before{
position: absolute;
display: block;
margin: 0 auto;
left: -65px;
right: 0;
content: "";
width: 250px;
border-right: solid #00000000 30px;
border-left: solid #00000000 30px;
border-bottom: solid whitesmoke 40px;
border-bottom-left-radius: 1500px 500px;
border-bottom-right-radius: 1500px 500px;
top: 25px;
z-index: 25;
}
}
}
}
}メイド服は完成！
マルチタスクしながら５時間で作ってこのクオリティーを考えれば良い感じ！
ついでにカメラもつけちゃう！顔ハメしようぜ
どうせここまで作ったしカメラもつけて顔ハメしちゃえ！
getUserMediaつかってカメラをオンにしちゃいます！
MediaDevices.getUserMedia() – Web API | MDN
MediaDevices.getUserMedia() メソッドは、要求された種類のメディアを含むトラックを持つ MediaStream を生成するメディア入力を使用する許可をユーザーに求めます。このストリームには、例えば、動画トラック (カメラ、ビデオ録画機器、スクリーン共有サービスなどのような、ハードウェアまたは仮…
developer.mozilla.org
HTMLに軽くjsとタグを追加すればOK
<video src="" id="video"></video>
<script>
const video = document.getElementById("video")
navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
}).then(stream => {
video.srcObject = stream;
video.play()
}).catch(e => {
console.log(e)
})
</script> 最終的にはこんな感じのHTMLになりました↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<video src="" id="video"></video>
<div class="cssmaid-lap">
<div class="neck">
<div class="lace up"></div>
<div class="ribbon"></div>
<div class="lace down"></div>
</div>
<div class="corset">
<div class="center">
<div class="lace">
<div class="side"></div>
</div>
<div class="under"></div>
<div class="ribbon">
∞
</div>
</div>
<div class="left">
<div class="poncho">
<div class="ribbon">∞</div>
<div class="iris"></div>
</div>
<div class="lace"></div>
<div class="line up"></div>
<div class="line down"></div>
</div>
<div class="right">
<div class="line up"></div>
<div class="line down"></div>
<div class="lace"></div>
<div class="poncho">
<div class="ribbon">∞</div>
<div class="iris"></div>
</div>
</div>
</div>
<div class="skirt">
<div class="belt">
<div class="ribbon left">∞</div>
<div class="ribbon center">☓☓</div>
<div class="ribbon right">∞</div>
</div>
<div class="main">
<div class="line"></div>
<div class="lace"></div>
</div>
<div class="lace"></div>
</div>
</div>
</div>
<script>
const video = document.getElementById("video")
navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
}).then(stream => {
video.srcObject = stream;
video.play()
}).catch(e => {
console.log(e)
})
</script>
</div>
</body>
</html>実際に使ってみた
↓ここから試すことできるよ〜
Document
naoko1010hh.github.io
なんか虚無感に襲われました。
ま、画像使わず、お金も使わず面白いことできたしお休みを楽しく過ごせたってことでよし！
CSSでメイド服を作ってみた話でした！
実はこのブログ昨日上げる予定だったけどレンタルサーバーの不具合でアップできなかったです。ショボーン
結論
CSSアート面白いぞ！
The post お金ないからHTMLとCSSで メイド服作ってみた first appeared on FascodeNetwork Blog.