CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS属性セレクターでフォームを美しくスタイリングする方法

CSS属性セレクターとは

CSSの属性セレクターを使用すると、特定の属性やその値を持つHTML要素だけを対象にスタイルを適用できます。フォームの入力欄やボタンのように、同じタグでも役割が異なる要素を個別に装飾したい場合に特に便利です。

属性セレクターには、主に以下のような記述ルールがあります。

  • p[lang] ― lang属性を持つすべてのp要素を選択します。
  • p[lang="fr"] ― lang属性の値が「fr」に完全一致するすべてのp要素を選択します。
  • p[lang~="fr"] ― lang属性の値に「fr」という単語が含まれるすべてのp要素を選択します(空白区切りの値リストに部分一致)。
  • p[lang|="en"] ― lang属性の値が「en」であるか、「en-」で始まるすべてのp要素を選択します。

以下は、CSS属性セレクターを使ってフォームをスタイリングする具体的なコード例です。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input[type="text"] {
   width: 300px;
   display: block;
   margin-bottom: 10px;
   background-color: rgb(195, 250, 247);
   font-size: 18px;
   padding: 15px;
   border: none;
}
input[type="submit"] {
   padding: 10px;
   font-size: 18px;
   border: none;
   outline: none;
   background-color: rgb(75, 163, 16);
   color: white;
}
input[type="password"] {
   width: 300px;
   padding: 10px;
   background-color: red;
   color: white;
   border: none;
}
</style>
</head>
<body>
<h1>CSS属性セレクターの例</h1>
<form>
<label for="fname">名前:</label><br />
<input type="text" id="fname" name="fname" value="Ron" />
<label for="lname">姓:</label><br />
<input type="text" id="lname" name="lname" value="Shaw" />
<label for="pass">パスワード:</label><br />
<input type="password" id="pass" name="pass" value="password" />
<input type="submit" value="送信" />
</form>
</body>
</html>

コードのポイント

  • input[type="text"] : テキスト入力欄のみに幅300px・水色の背景・大きなパディングなどを適用し、読みやすい入力エリアを作っています。
  • input[type="password"] : パスワード入力欄だけを赤背景・白文字にして、他の入力欄と視覚的に区別しています。
  • input[type="submit"] : 送信ボタンのみに緑色の背景と白い文字色を指定し、クリックしたくなる見た目にしています。

このようにtype属性の値で対象を絞り込めば、HTML側にclassやidを追加しなくても、要素ごとに異なるデザインを簡単に実現できます。

実行結果

上記のコードをブラウザーで表示すると、テキスト入力欄・パスワード欄・送信ボタンそれぞれに異なるスタイルが適用されたフォームが出力されます。

CSS属性セレクターでフォームを美しくスタイリングする方法

  1. CSSの高度なセレクター徹底解説｜隣接兄弟・属性・nth-of-typeセレクターの使い方

    CSSには、要素をより細かく指定できる「高度なセレクター」が多数用意されています。代表的なものとして、隣接兄弟セレクター、一般兄弟セレクター、直接の子セレクター（子結合子）、属性セレクター、nth-of-typeセレクターなどがあります。 これらのセレクターを使いこなせるようになると、HTMLに余計なクラスやIDを追加することなく、柔軟かつ効率的にスタイルを適用できるようになります。ここでは、それぞれのセレクターの特徴と使い方を解説します。 CSSの高度なセレクターの種類 1. 隣接兄弟セレクター（+） 「A + B」の形式で記述し、要素Aの直後に隣接している要素Bのみにスタイルを適用しま

  2. CSSの::first-letter疑似要素で文章の最初の一文字をおしゃれに装飾する方法

    ::first-letter疑似要素とは？ CSSでは、::first-letter（ファーストレター）疑似要素を使うことで、要素の最初の一文字だけを自由に装飾できます。雑誌や書籍の冒頭でよく目にする「ドロップキャップ」と呼ばれる演出効果も、追加のHTMLマークアップや画像を用意することなく、CSSだけで手軽に実現可能です。 なお、::first-letterの適用対象となる「最初の文字」は、句読点などの記号、ダイグラフ（合字）、contentプロパティによって生成されるコンテンツなどが存在する場合には変化することがあるため、注意が必要です。 それでは、CSSの::first-letter疑似