CSSのtransition-delayプロパティでトランジション効果に遅延を設定する方法
CSSでトランジション効果に遅延を設定するには、transition-delayプロパティを使用します。このプロパティを指定すると、マウスホバーなどのトリガーが発生してから、実際にアニメーションが開始されるまでの待ち時間を細かく制御できます。
transition-delayの基本構文
transition-delay: 時間;
時間は秒（s）またはミリ秒（ms）単位で指定します。初期値は0sであり、遅延なしですぐにトランジションが開始されます。負の値を指定すると、アニメーションの途中から再生することも可能です。
遅延を設定した実装例
次のコードは、ボックスにマウスを合わせると幅が変化するトランジションに、2秒間の遅延を設定した例です。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: width 3s;
transition-delay: 2s;
}
div:hover {
width: 350px;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p>下のボックスにマウスを合わせると幅が変化します。トランジションは2秒の遅延後に始まります。</p>
<div></div>
</body>
</html>
コードのポイント
- transition: width 3s; — 幅の変更に対して3秒かけて滑らかにアニメーションします。
- transition-delay: 2s; — マウスを合わせてから2秒後にアニメーションが開始されます。
- 複数のプロパティごとに異なる遅延を設定したい場合は、カンマ区切りで指定できます（例：
transition-delay: 0s, 1s;）。
-
CSSのborder-left-widthプロパティで左境界線の幅を設定する方法
CSSで要素の左側の境界線の幅を指定するには、border-left-widthプロパティを使用します。このプロパティを使うことで、左境界線だけの太さを個別に制御できます。なお、境界線の幅を正しく表示するには、あらかじめborder-styleプロパティで境界線のスタイル（solid、dashedなど）を設定しておく必要があります。スタイルが未指定の場合、初期値が「none」のため、幅を設定しても境界線は表示されませんので注意しましょう。使用できる値thin / medium / thick … 細い・普通・太いというキーワードで指定px、em などの長さの値 … 数値で正確に幅を指定（例：1
-
CSSでタブ文字の幅を設定する方法｜tab-sizeプロパティの使い方を解説
CSSでタブ文字（タブキーで挿入される空白）の表示幅を変更したい場合は、tab-size プロパティを使用します。デフォルトではタブ幅は8文字分に設定されていますが、このプロパティを使うことで任意のスペース数に調整できます。tab-sizeプロパティの基本tab-sizeプロパティは、主に <pre> や <code> など、整形済みテキストを表示する要素に対して効果を発揮します。指定できる値は以下のとおりです。数値： タブ1つあたりの幅をスペースの文字数で指定します（例： tab-size: 12;）length値： pxやemなどの単位で幅を指定することも可能ですi