ねぷのフラグとは？
これのこと
フラグが立ったり、折れたりして状態が分かりやすい素晴らしいUI
成果物
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nep flag</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox" id="nepu-checkbox" class="nep-flag">
<label for="nepu-checkbox">ぴょいーん</label>
</body>
</html>
label {
font-size: 24px;
line-height: 50px;
-webkit-tap-highlight-color: transparent;
}
input[type="checkbox"].nep-flag {
display: none;
}
input[type="checkbox"].nep-flag + label::before {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("./flag-off.svg");
background-size: cover;
width: 50px;
height: 50px;
-webkit-tap-highlight-color: transparent;
}
input[type="checkbox"]:checked.nep-flag + label::before {
background-image: url("./flag-on.svg");
}
チラ裏
このゲーム知ってる人いんのかな