CSSはメッセージパネルをスライドするWebコンポーネント機能を実装します

みなさんこんにちは。私と同じように混乱している方はいらっしゃいませんか。CSS は簡単に始められますが、内容が多すぎます。多くの属性は正しいようです。理解しているつもりですが、自分で使用するのは難しいと思います。美しい効果を見ると、どこから始めたらよいかわかりません。これは主に、新しい属性の練習が少なすぎて、柔軟に適用できないためです。CSS はいつも一部の人の感覚を失わせます。実際のところ、CSS を上手に学ぶための近道はあまりありません。JS プログラミングと同様に、真剣に取り組んで、もっと読み、もっと練習する必要があります。なぜなら、今日の CSS はもはや過去の CSS ではないからです。

例えば、この2冊、「CSS Definitive Guide Fourth Edition」は1,000ページを超える本です。数か月前に購入したのですが、まだ読み終えていません。文章がつまらなすぎます。読み終えた後に何を読んだのか忘れてしまい、読み続けるのを忘れてしまいます。本当に読み続けることができません。皆さんも同じような気持ちになっているのではないでしょうか？

さて、これ以上前置きはこれくらいにして、今日はよくある例を見てみましょう。多くのウェブサイトの右側には、固定されたフローティング メッセージ アイコンがあります。このアイコンをクリックすると、メッセージ コンテンツ パネルが横にスライドします。これは簡単ではなく、JQ を使用すれば簡単に実現できると言う人もいるかもしれませんが、私が言いたいのは、Web サイトのパフォーマンスのために、CSS で実現できる場合は JS を使用しないようにすることです。なぜなら、CSS は現在十分に強力だからです。

今日の例では、この効果を実現するために純粋な CSS を使用します。ここでは「CSS チェックボックス ハック」テクニックを使用し、その効果を下の図に示します。

1. HTML構造を作成する

上記のエフェクト図に基づいて、チェックボックス要素と対応するラベル タグ、およびフォーム パネル要素の 3 つの要素を作成する必要があります。

ここで使用されている CSS 機能は注目に値します。<label> タグの for 属性は、関連付けるフォーム要素を指定するために使用され、フォーム要素のクリック領域が拡張されます。ラベル要素マークをクリックすると、対応するフォーム要素がフォーカスされ、選択されます。

この機能は、このケースを実装するために使用するテクニックの 1 つです。メッセージ パネルを表示および非表示にする CSS チェックボックス疑似クラス セレクターと組み合わせることで、このケースを実装するために JS を使わずに済みます。

上記のアイデアに基づいて、始めましょう。まず、チェックボックスとそれに対応するラベルを配置し、最後にフォーム パネルと関連するフォーム要素を追加します。

フォームの id 属性をフォーム内の label 要素の for 値に関連付けると、最終的に次のコードに示すように HTML 構造が完成します。

<input type="チェックボックス" id="mycheckbox">
<label for="mycheckbox" class="feedback-label">フィードバック</label>
<フォームクラス="フォーム">
  <div>
    <label for="fullname">フルネーム</label>
    <input type="text" id="フルネーム">
  </div>
  <div>
    <label for="email">メール</label>
    <input type="email" id="email">
  </div>
  <div>
    <label for="comment">コメント</label>
    <テキストエリアid="コメント"></テキストエリア>
  </div>
  <div>
    <button type="submit">送信</button>
  </div>
</フォーム>

完成した効果は次のようになります。

2. 基本的なスタイルを定義する

ここで、基本的な CSS スタイルをいくつか追加します。ここでは、CSS カスタム変数を使用して、フォームのグローバル変更を容易にするほか、いくつかのリセット ルールと基本的なルール スタイルも使用します。サンプル コードは次のとおりです。

：根 {
  --white: 白;
  --gradient: 線形グラデーション(-45度、#FFA600 0%、#FF5E03 50%);
  --form: #eeefef;
  --border-radius: 4px;
  --フォームの幅: 500px;
  --form-mobの幅: 320px;
}
 
* {
  パディング: 0;
  マージン: 0;
  ボックスのサイズ: 境界線ボックス;
}

体 {
  フォント: 20px/1.5 サンセリフ;
  背景: var(--white);
}

h1 {
  フォントサイズ: 2rem;
  テキスト配置: 中央;
  上マージン: 20vh;
}
 
ボタン、
ラベル {
  カーソル: ポインタ;
}
 
ラベル {
  表示: ブロック;
}
 
ボタン、
入力、
テキストエリア {
  フォントファミリー: 継承;
  フォントサイズ: 100%;
  境界線: なし;
}
 
テキストエリア {
  サイズ変更: なし;
}

3. フォーム要素に関連するスタイルを定義する

1. この場合、チェックボックス要素を表示する必要がないため、ラベルと組み合わせた擬似クラス特性のみを使用してメッセージ パネルの表示と非表示を制御し、チェックボックス要素を可視領域から移動する必要があります。ここでは、hidden 属性 (display:none) を使用できないことに注意してください。サンプルコードは次のとおりです。

[type="チェックボックス"] {
  位置: 絶対;
  左: -9999px;
}

2. 次に、次の CSS 操作を追加する必要があります。

• チェックボックスに対応するラベル要素を右側の中央に固定するには、fix 属性を使用します。
• まず「フィードバック」のテキストを縦に表示します。
• フォーム パネルを非表示にします。フォーム パネルを幅の 100% 右に移動し、垂直方向に中央に配置します。

対応する CSS コードは次のとおりです。

/*カスタム変数はここに*/
.フィードバックラベル、
。形状 {
  位置: 固定;
  上位: 50%;
  右: 0;
}
 
.フィードバックラベル{
  変換の原点: 右上;
  変換: 回転(-90度) 移動(50%, -100%);
  zインデックス: 2;
}
 
。形状 {
  幅: var(--form-width);
  最大高さ: 90vh;
  変換: translate(100%, -50%);
  パディング: 30px;
  オーバーフロー:自動;
  背景: var(--form);
  zインデックス: 1;
}

ヒント: 1. ここで強調する必要があるのは、フィードバック ラベルのスタイルです。垂直方向に変換する場合、最初に反時計回りに回転させ、x 軸と y 軸の方向も一緒に回転するため、垂直方向に中央揃えにするには translate(50%, -100%) を実行します。

2. フォームスタイルでは、transformメソッドtranslate(100%, -50%)を使用して、ページ表示領域から移動します。

3. 続けましょう。心配しないでください。すぐに終わります。ページをもっときれいにし、スタイルを追加する必要があります。サンプル コードは次のとおりです。

/*カスタム変数はここに*/
 
.フィードバックラベル、
.form入力、
.form テキストエリア、
.form ボタン {
  境界線の半径: var(--border-radius);
}
 
.フィードバックラベル、
.form ボタン {
  背景: var(--gradient);
  色: var(--white);
}
 
.feedback-label:ホバー,
.form ボタン:hover {
  フィルター: 色相回転(-45度);
}
 
.フィードバックラベル{
  パディング: 5px 10px;
  境界線の半径: var(--border-radius) var(--border-radius) 0 0;
}
 
フォーム div:not(:last-child) {
  下マージン: 20px;
}
 
フォーム div:last-child {
  テキスト配置: 右;
}
 
.form入力、
.form テキストエリア {
  パディング: 0 5px;
  幅: 100%;
}
 
.form ボタン {
  パディング: 10px 20px;
  幅: 50%;
  最大幅: 120px;
}
 
.form入力{
  高さ: 40px;
}
 
.form テキストエリア {
  高さ: 220px;
}

ヒント: ここでは、背景色に linear-gradient() を使用して、美しい色のグラデーション背景を実現します。注意が必要なもう 1 つの CSS3 構文は、現在の色を変更できる色相回転フィルターである hue-rotate です。

4. CSSセレクターを使用してフォームパネルを切り替えたり非表示にしたりする

チェックボックスに対応するラベルタグをクリックすると、メッセージパネルを切り替えて表示します。ここでは、:checked 疑似クラスと、~ (後続の兄弟セレクタ) および + (隣接兄弟セレクタ) を使用して、スタイル変換の補助要素を選択します。サンプルコードは次のとおりです。

[type="checkbox"]:checked + .feedback-label {
  変換: rotate(-90deg) translate(50%, calc((var(--form-width) + 100%) * -1));
}
 
[type="checkbox"]:focus + .feedback-label {
  アウトライン: 2px 実線 rgb(77, 144, 254);
}
 
[type="checkbox"]:checked ~ .form {
  変換: translate(0, -50%);
}
 
.フィードバックラベル、
。形状 {
  遷移: すべて 0.35 秒のイーズイン アウト。
}

ここで説明する必要があるスタイル ルールがいくつかあります。

• translate(50%, calc((var(--form-width) + 100%) * -1)); このスタイルは少し複雑ですが、難しくはありません。フォームパネルの幅を追加するだけです。回転後、y軸は水平軸になります。左に移動することは、Y軸を上に移動することと同じなので、負の値になり、-1 を掛ける必要があります。
• 2 番目のセレクターでは、主にキーボード操作に慣れているユーザーを支援するために、選択後にアウトライン属性を追加します。Tab キーを使用してフィードバック ラベル要素を選択し、Space キーを使用して簡単にメッセージ パネルを開いて切り替えることができます。
• 3 番目のセレクターでは、transform: translate(0, -50%); を使用して X 軸を 0 に変更し、元の位置に復元して、メッセージ パネルの内容を表示できるようにします。

5. 応答性の問題への対処

最後に、ページを作成する際には、ページの応答性の問題を考慮する必要があることを強調したいと思います。ここでは、フォームパネルの幅を元の 500px から 320px に変更し、初期のフォントサイズを 16px に調整するなど、モバイルデバイス向けにスタイルを調整する必要があります。

最終的に追加されたレスポンシブ コードは次のとおりです。

/*カスタム変数はここに*/
 
@media スクリーンと (最大幅: 600px) {
  体 {
    フォントサイズ: 16px;
  }
 
  。形状 {
    パディング: 15px;
    幅: var(--form-mob-width);
  }
 
  フォーム div:not(:last-child) {
    下マージン: 10px;
  }
 
  [type="checkbox"]:checked + .feedback-label {
    変換: 回転(-90度)、変換(50%、計算((var(--form-mob-width) + 100%) * -1));
  }
}

6. セクション

さて、これで私たちのケースは完成です。傑作をお楽しみください。実装は非常に簡単です。最後に、このケースで使用されている CSS プロパティの理解を深めるために、自分で練習することをお勧めします。

次の URL をクリックすると、最終的な効果をオンラインで体験できます。

https://www.qianduandaren.com/demo/feedback/

要約する

以上が、サイドスライドメッセージパネルのWebコンポーネント機能をCSSで実装する詳細です。CSSサイドスライドパネルの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。