CSS Tips

備忘録的記事（随時更新予定）

要素を横に並べる

sample.css

.parent {
/*　親要素にflexを指定 */
  display: flex;
}

.child1 {
/*　最初に配置 */
  flex: -1 
}

.child2 {
  flex: 0
}

.child2 {
/* 最後に配置 */
  flex: 1 
}

要素を左右中央に揃える

sample.css

.parent {
  display: block;
}

.child {
  margin: 0 auto;
}

上下左右中央に配置する

sample.css

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /*　少しずれた分を修正　*/
  transform: translate(-50%, -50%);
}

横にはみ出したテキストを'...'で補完する

.target {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

divを横並びにしてはみ出した部分をスクロール対応させる

.parent {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden; (webkit対応)
  white-space: nowrap; (折り返さない)
}

表示文字が多い時にグラデーションをかける

p {
  position: relative;
}
p::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  content: '';
  width: 100%;
  height: 50%; //グラデーションの位置を指定
  background: linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.7) 20%, rgba(255,255,255,1) 80%);
}