CCSの小技集

スマホの時にのみ電話にリンクをつける

メディアクエリーだけの記述で大丈夫ですが、念のため両方記載。

a[href^="tel:"] { pointer-events:auto;}

@media (min-width: ここにサイズを入力) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

ブロックからはみ出した要素

上に半分はみ出した要素の場合

.クラス名　{ transform: translateY(-50%);}

マウスクリックの無効化

通常の要素の場合

通常のクラス名を設定した要素のマウスクリックの無効

.クラス名 { pointer-events: none;}

ボタン要素の場合

disabled は ボタン機能を無効にするため、送信済みなどの場合にクリックできないようにするための機能です。
その機能に CSS で:hover や :active の装飾を設定します。

HTML

<button disabled>送信</button>

css

button[disabled] { pointer-events: none;}

上下にできる余白削除

リセットCSSを使っていると大丈夫だと思いますが、もし必要な際に

*{
  margin:0;
  padding: 0;
}
　
html,　body {
  height: 100%;
}

縦書き

.クラス名 {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

英語もすべて縦書きにする場合は以下を追加

text-orientation: upright;

数字を一文字にまとめたい場合はまとめたい数字をspan等でくくり以下を追加

span {
	-ms-text-combine-horizontal: all;
	-webkit-text-combine: horizontal;
	text-combine-upright: all;
}