テキストの途中で改行する
/* Anywhere */
white-space: pre-line;
/* または */
word-break: break-all;画像をアスペクト比を維持したままリサイズする
img {
max-width: 100%;
height: auto;
}
要素の高さを可視部分の高さに合わせる
.container {
height: 100vh; /* 画面の高さに合わせる */
}絶対中央配置
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}等間隔に配置する
.container {
text-align: justify;
}
.container::after {
content: '';
display: inline-block;
width: 100%;
}CSSでスクロールヒントを作る
body {
overflow: auto;
scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);
scrollbar-width: thin;
}テキストを省略する
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}カスタムチェックボックス
.checkbox {
display: none;
}
.checkbox-label {
display: inline-block;
position: relative;
padding-left: 30px;
cursor: pointer;
}
.checkbox-label::before,
.checkbox-label::after {
position: absolute;
content: "";
display: inline-block;
}
.checkbox-label::before {
height: 16px;
width: 16px;
border: 1px solid;
left: 0px;
}
.checkbox-label::after {
height: 5px;
width: 9px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(-45deg);
left: 4px;
top: 4px;
}
.checkbox:checked + .checkbox-label::after {
content: "";
}グリッドレイアウト
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}スムーズなボックス影
.box {
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}(Visited 7 times, 1 visits today)