1. /
  2. css

css

【css】positionで要素を中央に配置する方法

https://arts-factory.net/position/

HTML


<div class=”box”>
<p>テキストテキスト</p>
<img src=xxx.jpg width=”600″ height=”400″ alt=”xxxx” >
</div>

CSS

.box{
    position: relative;
}
.box p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

【css】cssでいろんなアニメーションをつける

https://b-risk.jp/blog/2021/01/anim-reference/

@keyframeでアニメーション

https://into-the-program.com/slidein/

テキストにマスクをしてアニメーションする

https://b-risk.jp/blog/2019/10/text-mask-animation/

パスのマスクサンプルジェネレーター

https://ics-creative.github.io/210604_mask_variations/css_sample.html

マスクの使い方

https://github.com/ics-creative/210604_mask_variations/blob/main/canvas_sample.html

【css】safariでcheckboxがうまく効かない時の回避方法

https://www.it-swarm-ja.tech/ja/html/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E8%A8%AD%E5%AE%9A%E3%81%8Csafari%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%81%A7%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%AA%E3%81%84/835198416/

https://jsfiddle.net/ee1uhb3g/



Checkbox

.custom-checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
line-height: 20px;
}

.custom-checkbox span {
display: block;
margin-left: 20px;
padding-left: 7px;
line-height: 20px;
text-align: left;
}

.custom-checkbox span::before {
content: “”;
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: #fdfdfd;
border: 1px solid #e4e5e7;
@include vendorize(box-shadow, inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1));
}

.custom-checkbox span::after {
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
font-size: 18px;
color: #0087b7;
line-height: 20px;
text-align: center;
}

.custom-checkbox input[type=”checkbox”] {
opacity: 0;
z-index: -1;
position: absolute;
}

.custom-checkbox input[type=”checkbox”]:checked + span::after {
font-family: “FontAwesome”;
content: “\f00c”;
background:#d44803;
color:#fff;
}