CSS の:focus-within | インタラクティブフォームデザイン

はじめに

この実験では、CSS の :focus-within 疑似クラスを調べます。これにより、子要素のいずれかがフォーカスされたときに親要素にスタイルを適用できます。この機能を使って、ユーザーが操作すると外観が変化する視覚的に魅力的なフォームを作成します。この実験を通じて、CSS を使ってインタラクティブなフォームを作成することで、ユーザーエクスペリエンスをどのように向上させるかをより深く理解することができます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") subgraph Lab Skills css/selectors -.-> lab-35201{{"CSS の:focus-within を使ったフォームのインタラクティビティ向上"}} css/colors -.-> lab-35201{{"CSS の:focus-within を使ったフォームのインタラクティビティ向上"}} css/margin_and_padding -.-> lab-35201{{"CSS の:focus-within を使ったフォームのインタラクティビティ向上"}} css/borders -.-> lab-35201{{"CSS の:focus-within を使ったフォームのインタラクティビティ向上"}} css/width_and_height -.-> lab-35201{{"CSS の:focus-within を使ったフォームのインタラクティビティ向上"}} css/display_property -.-> lab-35201{{"CSS の:focus-within を使ったフォームのインタラクティビティ向上"}} css/backgrounds -.-> lab-35201{{"CSS の:focus-within を使ったフォームのインタラクティビティ向上"}} css/pseudo_classes -.-> lab-35201{{"CSS の:focus-within を使ったフォームのインタラクティビティ向上"}} end

子要素がフォーカスされたとき

VM には既に index.html と style.css が用意されています。

フォームの子要素のいずれかがフォーカスされたときにその外観を変更するには、疑似クラス :focus-within を使って親要素にスタイルを適用します。たとえば、与えられた HTML コードでは、入力フィールドのいずれかがフォーカスされると、form 要素の背景が緑になります。子要素にスタイルを適用するには、label や input などの適切な CSS セレクタを使います。

<form>
  <label for="username">Username:</label>
  <input id="username" type="text" />
  <br />
  <label for="password">Password:</label>
  <input id="password" type="text" />
</form>

form {
  border: 2px solid #52b882;
  padding: 8px;
  border-radius: 2px;
}

form:focus-within {
  background: #7cf0bd;
}

label {
  display: inline-block;
  width: 72px;
}

input {
  margin: 4px 12px;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは「Focus Within」の実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。