地味に便利なcssプロパティ

1859 ワード
CSS プロパティ CSS テキストリンク

文字の幅をちょっと開けたりする

letter-spacing: 0.2rem;

幅が可変し過ぎないようにする方法

max-width min-width を使う。

cssで縦書きにする

ここのサイトを参考に。

p{
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl;
}

text-align は効果ないので padding-left padding-right とかで調整する。

フォームとかの青い「ほわ〜っ」としたやつを消す

input, textarea {
  outline: none;
  /*outline: 0;でもOK*/
}

appearance で他のデフォルトも消せるっぽいんですが、ひとまず「ほわ〜っ」を消すだけならコレだけ。

ボタンのデフォルトを消す

button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  &:hover {
    cursor: pointer;
  }
}

フォームと違いボタンにはborderやらなんやらたくさんのプロパティが付いてます。
ただ、これらを消すとhoverしたときにカーソルにならないのでボタンっぽさが完全になくなってしまう。
そこで擬似要素を追加。
これはscssでの書き方なのでcssの場合は $:hover を button:hover にしてください。