HTML でスティッキー要素を作成する方法

このブログでは、CSS の position プロパティと、HTML でスティッキー要素を作成する方法について説明します。

CSS位置プロパティとは?

CSS の position プロパティは、絶対、スティッキー、統計、固定、継承、相対、または初期の HTML 要素の配置方法を指定します。

構文

上記の構文は、position プロパティの値が異なることを示しています。それに応じて割り当てることができます。

それでは、HTML でスティッキー要素を作成する手順を見てみましょう。

CSS の位​​置: スティッキーとは?

「 スティッキー 」 position は、ポイントに到達するまでは相対位置を持ち、その後は粘着要素のように機能します。

CSS スティッキー ポジションの概念を理解するために、簡単な例を見てみましょう。

例: HTML でスティッキー要素を作成するには?
HTML ファイルで、見出しに

、段落に

、クラス名が「」の

を追加します。 スティッキー 」。次に、ネストされた順序付きリスト

とリスト
1. を持つ

   タグを追加します。

   ノート : ページをスクロールすると、sticky 要素の動作を観察できるように、長いリストを用意しました。

   HTML

   < h2 > 付箋: 付箋要素の効果を参照してください < / h2 >
   < p > 位置: スティッキー < / p >
   < 分周 クラス = 「べたつく」 > これが私のやることリストです！ < / 分周 >
   < p >
   < オール >
   < それ > コール マネージャ < / それ >
   < それ > 従業員とのミーティング < / それ >
   < それ > レポートを送信 < / それ >
   < それ > 医者に行く < / それ >
   < それ > フライトを予約する < / それ >
   < それ > 散歩に出掛けます。 < / それ >
   < それ > 食料品に行きます。 < / それ >
   < それ > テレビを見る < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < それ > いくつかのテキスト。 < / それ >
   < / オール >
   < / p >

   次に、sticky という名前の div にスタイルを提供します。

   • ここ、 ' .スティッキー 」は、スタイル プロパティを適用する必要があるクラスを表します。
   • 中括弧内に、「 位置 ”プロパティ値として” スティッキー 」。
   • 「 上 」は「 0 」。
   • 「 背景色 ' は ' #00154f 」。
   • いくつかの「 パディング 」を div に設定して、その値を「 40px 」。
   • 「 フォントサイズ ' なので ' 30px 」。
   • 「 色 」のフォントを「」に設定 白い 」。

   CSS

   .スティッキー {
   位置 : スティッキー ;
   上 : 0 ;
   背景色 : #00154f ;
   パディング : 40px ;
   フォントサイズ : 30px ;
   色 : 白い ;
   }

   HTML ファイルを保存し、ブラウザで開いて出力を確認します。

   

   ボーナスヒント

   「を活用することで、 hsla() 」メソッドを使用すると、次のように、追加されたスティッキー要素の透明な背景を設定できます。

   バックグラウンド - 色 : hsla ( 0 、 100 %、 90 %、 0.8 ) ;

   出力

   

   CSS「 位置 ”プロパティ値として” スティッキー 」。

   結論

   「 スティッキー CSS の位​​置は、要素の位置を相対位置と固定位置の間で切り替えます。その結果、追加されたスティッキー要素は、スティッキーのように動作する特定のポイントに到達するまで、スクロールに対して相対的に配置されます。 hsla() メソッドを使用して、追加されたスティッキー要素の透明度を調整することもできます。このブログでは、シンプルでスティッキーな透明要素の作成について説明しました。