CSSアニメーションでcolumn-rule-widthプロパティの値を変化させる方法
CSSのcolumn-rule-widthプロパティは、段組み（マルチカラム）レイアウトにおいて、段と段の間に引かれる罫線の太さを指定するためのプロパティです。この値は@keyframesを使ったCSSアニメーションで動的に変化させることができます。
以下のコードを実行すると、罫線の太さがアニメーションによって変化する様子を確認できます。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 600px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
column-rule: 10px inset orange;
column-count: 4;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-rule-color: black;
column-rule-width: 20px;
}
}
</style>
</head>
<body>
<h2>column rule widthプロパティのアニメーション</h2>
<div>This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text!
</div>
</body>
</html>コードの解説
このサンプルでは、div要素に対してcolumn-count: 4を指定し、テキストを4段に分割しています。また、column-ruleショートハンドプロパティにより、初期状態では太さ10px・insetスタイル・オレンジ色の罫線が設定されています。
@keyframes myanim内の20%の時点で、column-rule-width: 20pxを指定することで、罫線の太さが10pxから20pxへと滑らかに変化します。同時にcolumn-rule-colorで罫線の色も黒に変わり、ボックスの位置や影も一緒にアニメーションします。
animation: myanim 3s infinite;により、このアニメーションは3秒周期で無限に繰り返されます。
-
CSSのrightプロパティとは？構文と使い方を実例付きで解説
CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini
-
CSSのtext-indentプロパティでテキストのインデントを設定する方法
CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負