CSS3でキーフレームアニメーションを定義する方法
CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームとは、アニメーションの途中の状態（中間ステップ）を制御するための仕組みです。開始時点と終了時点のスタイルを指定することで、その間の変化をブラウザが自動的に補間してくれます。
以下に、CSS3でキーフレームを定義するコード例を示します。
コード例
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: colorChange 5s infinite;
}
@keyframes colorChange {
from {
background: red;
left: 0px;
}
to {
background: rgb(32, 229, 255);
left: 300px;
}
}
</style>
</head>
<body>
<h1>CSSでのキーフレームの定義</h1>
<div></div>
<h2>上の正方形は時間の経過とともに色と位置が変化します</h2>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が得られます。
5秒後には、位置と色が次のように変化します。
コードの解説
この例では、@keyframesルールを使って「colorChange」という名前のアニメーションを定義しています。fromはアニメーションの開始時点（背景色が赤、左端から0pxの位置）、toは終了時点（水色、左端から300pxの位置）を表します。
対象となるdiv要素には、animationプロパティで「colorChange」を5秒かけて無限（infinite）に繰り返すよう指定しています。そのため、正方形は赤から水色へと色が変わりながら、右方向へ300px移動する動きを繰り返します。
-
CSS3で放射状グラデーションを作成する方法
放射状グラデーション（Radial Gradient）とは、中心点から外側に向かって色が変化していくグラデーションのことです。CSSでは radial-gradient() 関数を使用し、色が切り替わる位置を示す「カラーストップ」を指定することで、自由な配色を実現できます。 形状はデフォルトで楕円（ellipse）に設定されていますが、circle を指定すれば正円のグラデーションに変更することも可能です。なお、放射状グラデーションを定義するには、最低でも2つのカラーストップを指定する必要があります。 radial-gradient の基本構文 background-image: radia
-
CSS3のtext-overflowプロパティでテキストのはみ出しを処理する方法
CSS3のtext-overflowプロパティは、ボックスからあふれて表示できなかったテキストを、ユーザーに対してどのように知らせるかを指定するためのプロパティです。長い文章を1行で表示したい場合などに、末尾を「…（省略記号）」で切り詰めるといった表現を簡単に実現できます。text-overflowを機能させるための前提条件text-overflowプロパティを正しく動作させるには、対象の要素に以下の設定が必要です。white-space: nowrap; … テキストを折り返さず1行で表示するoverflow: hidden; … ボックスからはみ出た部分を非表示にするwidthなどによる幅