CSS

よく利用する便利なCSSパラメータ

上部にくっついてくるナビ

position
nav{
  position: sticky
}

スムーススクロール

スムーススクロール
.wrap {
  scroll-behavior: smooth;
}

iOSでのスムーズな横スクロール

スムーズな横スクロール
.scrollbox{
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

画像のトリミング

object-fit,object-position

画像のトリミングに利用できるパラメータ。
画像に直接指定。

画像を100pxの正方形でトリミング
img{
  height:100px;
  width:100px;
  object-fit: cover;
  object-position: 50% 20%;
}

横幅に文字が収まらない時に「...」をつけて省略

ブログ一覧のタイトルなどに利用
.blog-title{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

入力しようとすると消えるplaceholder部分が消えるinputタグ

placeholderの挙動
/*placeholder*/
:placeholder-shown {
  color: #ddd;
}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #ccc;
}
/* Firefox 18- */
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
/* Firefox 19+ */
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
/* IE 10+ */
input:-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #ccc;
}
/*placeholder focus*/
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  color: transparent;
}