コンテンツマーケティング
気付いていないかもしれない CSS3 の機能: フレックスボックス、グリッド レイアウト、カスタム プロパティ、トランジション、アニメーション、複数の背景
カスケード スタイル シート (CSS)進化を続けており、最新バージョンには、気付いていない機能がいくつか含まれている場合があります。 CSS3 で導入された主な改善点と方法論の一部を、コード例とともに以下に示します。
- フレキシブル ボックス レイアウト (Flexbox): Web ページの柔軟でレスポンシブなレイアウトを作成できるレイアウト モード。 フレックスボックスを使用すると、コンテナー内の要素を簡単に整列および分散できます。 この例では、
.container
クラスの使用display: flex
フレックスボックス レイアウト モードを有効にします。 のjustify-content
プロパティがに設定されていますcenter
コンテナ内で子要素を水平方向に中央揃えにします。 のalign-items
プロパティがに設定されていますcenter
子要素を垂直方向に中央揃えにします。 の.item
クラスは、子要素の背景色とパディングを設定します。
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
結果
中央揃えの要素
- グリッドレイアウト: Web ページの複雑なグリッドベースのレイアウトを作成できる別のレイアウト モード。 グリッドを使用すると、行と列を指定して、グリッドの特定のセル内に要素を配置できます。 この例では、
.grid-container
クラスの使用display: grid
グリッド レイアウト モードを有効にします。 のgrid-template-columns
プロパティがに設定されていますrepeat(2, 1fr)
同じ幅の XNUMX つの列を作成します。 のgap
プロパティは、グリッド セル間の間隔を設定します。 の.grid-item
クラスは、グリッド項目の背景色とパディングを設定します。
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
結果
アイテム1
アイテム2
アイテム3
アイテム4
- トランジション: CSS3 では、Web ページでトランジションを作成するための新しいプロパティとテクニックが多数導入されました。 たとえば、
transition
プロパティを使用して、時間の経過に伴う CSS プロパティの変化をアニメーション化できます。 この例では、.box
クラスは、要素の幅、高さ、および初期の背景色を設定します。 のtransition
プロパティがに設定されていますbackground-color 0.5s ease
イーズインアウトのタイミング機能を使用して、XNUMX 秒にわたって背景色のプロパティの変化をアニメーション化します。 の.box:hover
クラスは、マウス ポインターが要素の上にあるときに要素の背景色を変更し、遷移アニメーションをトリガーします。
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
結果
ホバー
ここに!
ここに!
- アニメーション: CSS3 では、Web ページでアニメーションを作成するための新しいプロパティとテクニックが多数導入されました。 この例では、
animation
財産。 を定義しました@keyframes
ボックスが 0 度から 90 度まで 0.5 秒間回転する必要があることを指定するアニメーションのルール。 ボックスにカーソルを合わせると、spin
ボックスを回転させるアニメーションが適用されます。 のanimation-fill-mode
プロパティがに設定されていますforwards
アニメーションの終了後にアニメーションの最終状態が保持されるようにします。
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
結果
ホバー
ここに!
ここに!
- CSS カスタム プロパティ: またとして知られています CSS変数、カスタム プロパティは CSS3 で導入されました。 これらを使用すると、CSS で独自のカスタム プロパティを定義して使用できます。これを使用して、スタイルシート全体で値を保存および再利用できます。 CSS 変数は、次のように XNUMX つのダッシュで始まる名前で識別されます。
--my-variable
. この例では、–primary-color という CSS 変数を定義し、値を#007bff
、多くのデザインで原色として一般的に使用される青色です。 この変数を使用してbackground-color
を使用して、ボタン要素のプロパティvar()
関数と変数名を渡します。 これにより、変数の値がボタンの背景色として使用されます。
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- 複数の背景: CSS3 では、要素の複数の背景画像を指定し、その配置と積み重ね順序を制御できます。 背景はXNUMX枚の画像で構成され、
red.png
&blue.png
を使用してロードされます。background-image
財産。 最初の画像、red.png
は要素の右下隅に配置され、XNUMX 番目の画像は、blue.png
、要素の左上隅に配置されます。 のbackground-position
プロパティは、各画像の位置を制御するために使用されます。 のbackground-repeat
プロパティは、画像の繰り返し方法を制御するために使用されます。 最初の画像、red.png
、繰り返さないように設定されています(no-repeat
)、XNUMX 番目の画像、blue.png
、繰り返すように設定されています (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}