コンテンツマーケティング

気付いていないかもしれない 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;
    }

    結果

    Douglas Karr

    Douglas Karr のCMOです オープンインサイト の創設者であり、 Martech Zone。 ダグラスは、マーテックのスタートアップ企業数十社の成功を支援し、マーテックの買収と投資における 5 億ドルを超えるデューデリジェンスを支援し、企業の販売戦略とマーケティング戦略の実装と自動化を支援し続けています。 ダグラスは、国際的に認められたデジタル変革と MarTech の専門家兼講演者です。 ダグラスは、ダミーズ ガイドやビジネス リーダーシップに関する書籍の著者でもあります。

    関連記事

    先頭へ戻るボタンに
    閉じる

    Adblockが検出されました

    Martech Zone は、広告収入、アフィリエイト リンク、スポンサーシップを通じてサイトを収益化しているため、このコンテンツを無料で提供できます。 当サイトをご覧になる際は、広告ブロッカーを削除していただければ幸いです。