【css】使えるcss10選

/ Web技術 / By takec23com

テキストの途中で改行する

/* 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 17 times, 1 visits today)