ホームページの構築の際によく使うcssの記述を備忘録もかねてご紹介させていただきます。
※scss形式にて記述。
※備忘録的な要素が大きいので説明など詳細は割愛させていただきます。
※随時更新させていただきます。
目次
テキストのインデントを揃える
.aaa {
text-indent: -1em;
padding-left: 1em;
}中央配置
.aaa {
position: relative;
.bbb {
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
}オブジェクト反転
.aaa {
transform: scale(-1, 1);
}枠からはみ出して表示
.aaa {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}擬似要素のsvgの色を変える
.aaa {
&:after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: #000;
mask-image: url("../svg/icons/aaa.svg");
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
}画像などの比率を保って100%表示
img {
width: 100%;
height: 100%;
object-fit: cover;
}スマホでのビューポートの高さ指定
.aaa {
height:100svh;
}