CSSで一般的なフォーム要素のスタイルを設定する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
Webフォームは、検索フォームフィールドから連絡先フォーム、複雑なデータフィルタリングに至るまで、Webサイトデザインの一般的な要素です。 CSSを使用してこれらの要素のスタイルを設定し、操作する方法を知っていると、これらの日常的な問題に対するより良い解決策を提供し、ユーザーのWebサイトのエクスペリエンスを向上させることができます。
このチュートリアルでは、ユーザーにさまざまなデータを要求するWebフォームの作成とスタイル設定について説明します。 フォームは、テキストフィールド、ラジオボタン、チェックボックス、ドロップダウン選択、テキスト領域、および送信ボタンとリセットボタンを使用します。 appearance
プロパティを使用してスタイルをリセットし、フォームに独自の一貫したスタイルを設定し、テキストフィールドにプレースホルダーの回答を追加し、ラジオボタンとチェックボックスをカスタマイズして、このフォームとその要素を作成およびスタイル設定します。さまざまな疑似クラスと疑似要素。
前提条件
- 高度なセレクターを使用して、CSSを使用してスタイルを検索してHTML要素に適用した経験。 詳細については、 CSS チュートリアルでID、クラス、および属性セレクターを使用してHTML要素を選択する方法を確認してください。
- CSSチュートリアルでボックスモデルを操作する方法にあるCSSボックスモデルの知識。
- CSSの疑似クラスに精通していること。 紹介については、CSSで状態疑似クラスでリンクとボタンを使用する方法を確認してください。
- ローカルマシンに
index.html
として保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用してWebサイトを構築する方法全体を試してください。
ベースHTMLとCSSの設定
この最初のセクションでは、チュートリアルの残りの部分で使用するHTMLと初期スタイルを設定します。 このHTMLは、ページのスキャフォールディングを設定し、後でスタイルを設定するフォームフィールドを作成します。
まず、エディターでindex.html
ファイルを開きます。 次に、次のHTMLを追加して、ファイルの基本構造を提供します。
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS Form</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <main> </main> </body> </html>
<head>
要素に含まれる要素は、<title>
要素を使用してページの名前を定義し、<link>
要素を介してスタイルシートをロードする場所を定義します。 <meta>
タグは、文字エンコードを定義し、小さな画面のデバイスでサイトを表示する方法をブラウザーに指示します。 メインフォームの内容は、<body>
および<main>
タグ内にあります。
次に、<main>
要素内に、<form>
要素を作成します。 <form>
内に、レイアウトに役立つさまざまなフォーム要素と<div>
要素を追加します。 このチュートリアルでは、前のステップからのコードへの追加が強調表示されています。 次のコードブロックから強調表示されたHTMLをindex.html
ファイルに追加します。
index.html
... <main> <form> <div> <label for="name">Name</label> <input id="name" type="text" /> </div> <div> <label for="email">Email</label> <input id="email" type="email" /> </div> <div> <label for="comp">Favorite CSS Compiler</label> <select id="comp"> <option value="sass">Sass</option> <option value="less">Less</option> <option value="stylus">Stylus</option> <option value="postcss">PostCSS</option> <option value="other">Other</option> </select> </div> <div> <fieldset> <legend>Are you familiar with CSS Grid?</legend> <input type="radio" name="grid" id="yes" value="yes" /> <label for="yes">Yes</label> <input type="radio" name="grid" id="no" value="no" /> <label for="no">No</label> </fieldset> </div> <div class="full-width"> <label for="message">Message</label> <textarea id="message"></textarea> </div> <div class="full-width"> <input type="checkbox" id="newsletter" /> <label for="newsletter">Receive our newsletter?</label> </div> <div class="full-width"> <button type="submit">Send Response</button> <button type="reset">Clear Form</button> </div> </form> </main> ...
HTMLフォーム構造は、正しく機能するために相互接続された属性値で構成されています。 このコードは、ユーザーに名前と電子メールを要求し、お気に入りのCSSコンパイラーを要求し、CSSグリッドを知っている場合はユーザーが生成するメッセージのフィールドを提供し、ユーザーにニュースレターを登録するためのチェックボックスを備えたフォームを作成します。 。 HTMLでフォームを構造化する方法の詳細については、Webフォーム構造の MozillaWebDocsページを参照してください。
必ずindex.html
に変更を保存してから、styles.css
という同じディレクトリに新しいファイルを作成してください。
テキストエディタでstyles.css
を開きます。 このファイルは、ブラウザがindex.html
のコンテンツに適用するスタイルを提供します。 次のCSSコードをstyles.css
ファイルに追加します。
styles.css
body { margin: 0; background-color: hsl(0, 0%, 98%); color: #333; font: 100% / normal sans-serif; } main { margin: 0 auto; padding: 4rem 0; width: 90%; max-width: 60rem; } form { box-sizing: border-box; padding: 2rem; border-radius: 1rem; background-color: hsl(0, 0%, 100%); border: 4px solid hsl(0, 0%, 90%); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .full-width { grid-column: span 2; }
body
およびmain
要素セレクターは、ページ全体の初期テキストスタイルとレイアウトを作成します。 form
要素セレクターは、フォームコンテナー全体のスタイルを作成し、grid-template-columns: 1fr 1fr;
と同じサイズの2つの列で構成されるCSSグリッドを定義します。 次に、gap: 2rem
は、グリッド内の各行と列の間に2rem
の間隔を提供します。 最後に、.full-width
クラスセレクターを使用すると、このクラスのコンテナーを1つの列にとどまらずに、2つの列の間で拡張できます。
変更をstyles.css
に保存します。 次に、選択したWebブラウザを開きます。 ブラウザでファイルメニュー項目を選択し、開くオプションを選択します。 次に、プロジェクトフォルダーに移動し、ブラウザーにindex.html
ファイルをロードします。 次の画像は、ページがブラウザでどのようにレンダリングされるかを示しています。
フォームは、明るい灰色の背景の白いボックスに表示されます。 各フォーム要素はグリッド全体に分散され、上位4つのアイテムが2つの列の間で交互に配置され、最後の3つのアイテムが2つの列にまたがって積み重ねられます。 フォーム要素のデフォルトのスタイルは、Firefoxに表示されるとおりです。 各ブラウザには、フォーム要素のスタイル設定のデフォルトが異なります。
このセクションでは、フォーム要素を操作するために必要な初期HTMLとCSSを設定します。 また、各ブラウザーがこれらの要素のスタイル設定を異なる方法で処理することも学びました。 次のセクションでは、appearance
プロパティを使用して、すべてのブラウザーでフォーム要素のスタイルを均等化します。
appearance
プロパティを使用したフォームスタイリングのリセット
すべてのブラウザは、フォーム要素の視覚的なスタイル設定を異なる方法で処理します。 多くの場合、これらの要素のスタイルはCSSの初期機能を超えており、オペレーティングシステムまたはブラウザー独自のデザイン言語の美学に従います。 すべてのブラウザで一貫したスタイルを作成するために、このセクションでは、appearance
プロパティおよびその他のプロパティを使用して、デフォルトのブラウザスタイルを削除します。
まず、テキストエディタでstyles.css
を開きます。 button
、fieldset
、input
、legend
、select
、およびtextarea
で構成される新しいグループセレクターを作成します。 次に、セレクターブロック内に、次のコードブロックで強調表示されているように、appearance
プロパティをnone
に設定して追加します。
styles.css
... button, fieldset, input, legend, select, textarea { appearance: none; }
appearance
プロパティは、フォーム要素から特別なスタイルを削除するための意図された方法です。 ただし、このプロパティの古さと実装により、ほとんどのブラウザでは、プロパティ名にベンダープレフィックスを追加する必要があります。 ベンダープレフィックスは、特定のブラウザーの識別子としてプロパティ名の前に付加される特別なコード化された追加です。 Chrome 、 Safari 、および最近のバージョンのEdgeとOperaの場合、そのプレフィックスは-webkit-
です。 Firefoxは-moz-
プレフィックスを使用します。
ベンダープレフィックスを使用する場合は、プロパティのベンダープレフィックスバージョンを最初に配置し、プレフィックスなしのバージョンで終了することが重要です。 このように、プレフィックス付きプロパティのみをサポートする古いブラウザはプレフィックスを使用しますが、プレフィックスと非プレフィックスバージョンの両方をサポートする新しいブラウザはプレフィックスなしの標準バージョンを使用します。 次のコードブロックでフォーマットされているように、強調表示されたプレフィックスappearance
プロパティを追加します。
styles.css
legend, fieldset, select, textarea, input, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
変更内容をstyles.css
に保存し、ブラウザでindex.html
を開きます。 appearance
プロパティは、次の画像に示されているように、装飾されたスタイルを削除し、よりシンプルなスタイルになりました。
appearance
プロパティでは、ブラウザ固有のスタイルのみを変更できます。 appearance: none
プロパティ値に加えられた最大の変更は、ラジオボタンとチェックボックスを完全に削除することでした。 残りのフォーム要素については、デフォルトのスタイルを完全に削除するために、さらにいくつかのプロパティが必要です。 次のコードブロックで強調表示されているCSSプロパティは、デフォルトのスタイルを削除するために必要なスタイルを追加します。
styles.css
... button, fieldset, input, legend, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; padding: 0; margin: 0; box-sizing: border-box; }
このCSSは背景色を削除し、ボックスモデルのパラメーターをリセットします。 これらのスタイルのすべてがすべての要素に必要なわけではありませんが、これらのリセットスタイルをすべての要素にグループ化することは許容されます。
変更内容をstyles.css
に保存し、ブラウザでindex.html
を更新してください。 次の画像に示すように、フォーム要素がページから視覚的に消えています。
このセクションでは、appearance
と追加のプロパティを使用して、フォーム要素からデフォルトのスタイルを完全に削除しました。 また、ベンダープレフィックスを使用して、将来のブラウザバージョンにプロパティを適切に順序付けて適用しました。 次のセクションでは、フォームフィールドの視覚的なスタイルのカスタマイズを開始します。
フォームフィールド全体で一貫したスタイルを設定する
デフォルトのブラウザスタイルが完全に削除されたので、すべてのフォーム要素に一貫したカスタム美学を適用します。 これには、適切なスタイルを受け取るために特定のフォーム特性を対象とするさまざまなグループセレクターの作成が含まれます。
まず、テキストエディタでstyles.css
を開きます。 次に、input
、select
、およびtextarea
で構成されるグループセレクターを作成します。 次のコードブロックから強調表示されたスタイルを追加します。
styles.css
... legend, fieldset, select, textarea, input, button { ... } input, select, textarea { border: 2px solid #333; background-color: white; border-radius: 0.25rem; }
これらのスタイルは、白い背景と丸みを帯びた角とともに、各データ入力要素の周りに2px
ダークグレーの境界線を追加します。
次に、内部にテキストを含むデータ入力要素にスタイルを適用します。 属性セレクターを使用して、type
属性値に基づいてターゲットにするinput
要素を指定します。 次のコードブロックで強調表示されているCSSは、必要な要素のスタイルを提供します。
styles.css
... input, textarea, select { ... } input[type="text"], input[type="email"], select, textarea { font: 1.25rem / 1.5 sans-serif; display: block; box-sizing: border-box; width: 100%; padding: 0.5rem 0.75rem; }
これらのスタイルは、すべての要素に一貫したフォントサイズとファミリを適用します。 たとえば、<textarea>
要素は、body
要素からフォント設定を継承しません。 display
、box-sizing
、width
、およびpadding
プロパティは、これらの各データ入力要素に一貫したレイアウトと構造を提供します。
変更内容をstyles.css
に保存し、Webブラウザでindex.html
を開きます。 次の画像でレンダリングされているように、フィールドの周囲に濃い灰色の境界線があり、<select>
要素のテキストがはるかに大きくなっています。
次に、あなたがすでに書いた幅広いスタイリングに加えて、いくつかの特別なスタイリングを必要とする2つの要素があります。 1つは、textarea
の高さを高くすることであり、2つ目は、<select>
要素にカスタムのドロップダウン矢印を適用することです。
styles.css
に戻り、textarea
要素セレクターを追加します。 セレクターブロック内に、10rem
の値に設定されたmin-height
プロパティを作成します。 これにより、フォームユーザーがテキストを入力するためのより大きな初期領域が作成されます。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。
styles.css
... input[type="text"], input[type="email"], select, textarea { ... } textarea { min-height: 10rem; }
textarea
のスタイルを追加したら、次に実行するのはimage
ディレクトリを作成することです。 これは、index.html
およびstyles.css
ファイルと同じディレクトリ内からコマンドプロンプトで次のコマンドを実行することで実行できます。
mkdir images
次に、次のcurl
コマンドを実行して、作業する最初のイメージを新しいimages
ディレクトリにダウンロードします。
curl -sL https://assets.digitalocean.com/articles/68129/down-arrow.svg -o images/down-arrow.svg
ダウンロードした画像はSVGで、図形を描くためのHTMLに似たマークアップ言語です。
この新しい画像を<select>
要素に追加するには、styles.css
に戻ります。 次に、select
要素セレクターを作成し、次のコードブロックから強調表示された値を使用してbackground
プロパティを追加します。
styles.css
... textarea { min-height: 10rem; } select { background: url("images/down-arrow.svg") no-repeat center right 0.75rem; }
このbackground
プロパティは、画像を<select>
要素の背景にロードし、画像を繰り返しません。 次に、center
で画像を垂直方向に中央揃えし、right 0.75rem
で右側からオフセットします。
変更内容をstyles.css
に保存し、ブラウザに戻ってページを更新します。 <textarea>
は元の高さの約2倍になり、<select>
要素の右側に青い下向きの矢印が表示されます。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。
このセクション全体を通して、フォームのデータ入力要素のカスタム美学を作成しました。 また、<select>
要素の背景を作成して、デフォルトの矢印を置き換えました。 次のセクションでは、カスタムのラジオボタンとチェックボックスを作成し、それらがオンになっているときに選択した状態を適用します。
:checked
疑似クラスを使用したラジオボタンとチェックボックスのカスタマイズ
フォームの基本的な美学を作成したので、ラジオボタンとチェックボックスのインタラクティブなinput
アイテムにその視覚スタイルを適用します。
テキストエディタでstyles.css
を開くことから始めます。 radio
またはcheckbox
のtype
属性を持つinput
要素を、同じ高さと幅の値を持つように変更します。 次に、ラジオボタンを円に変えます。 次のコードブロックの強調表示された部分は、これがどのようにフォーマットされているかを示しています。
styles.css
... select { ... } input[type="radio"], input[type="checkbox"] { height: 1.5em; width: 1.5em; vertical-align: middle; } input[type="radio"] { border-radius: 50%; }
vertical-align
プロパティは、インラインテキストアイテムを整列するためのものです。 これをmiddle
に設定すると、入力フィールドはテキスト整列の中央に配置されます。 次に、height
とwidth
が同じであるため、border-radius
プロパティが50%
のラジオ入力は円を作成します。
変更内容をstyles.css
に保存し、ブラウザでindex.html
を開きます。 次の画像に示すように、2つのラジオボタンとチェックボックスが大きくなり、目立つようになりました。
ラジオボタンまたはチェックボックスを操作すると、何も表示されません。 appearance
プロパティは、これらのタイプの入力に対して選択されたインジケーターも削除します。 次に、:checked
疑似クラスセレクターを使用して、選択した入力項目にスタイルを適用します。
styles.css
に戻り、:checked
疑似クラスを使用してラジオボタン入力用の新しいセレクターを作成します。 次に、セレクターブロック内にbackground-image
とradial-gradient
を追加して、選択したラジオボタンに塗りつぶしスタイルを適用できるようにします。 次のコードブロックで強調表示されているCSSは、これがどのようにフォーマットされているかを示しています。
styles.css
... input[type="radio"] { border-radius: 50%; } input[type="radio"]:checked { background-image: radial-gradient( hsl(213, 73%, 50%) 40%, transparent calc(40% + 1px) ); }
calc()
関数を使用すると、transparent
プロパティを色の値の後に1px
に設定して、入力フィールド内に青い実線の円を作成できます。
変更内容をstyles.css
に保存し、ブラウザでindex.html
に戻ります。 ラジオボタンは、入力内の白で囲まれた青い丸で囲まれています。 次の画像は、はいラジオボタンが選択されていることを示しています。
次に、チェックボックスは、<select>
ドロップダウンの矢印と同様に、背景画像を使用して:checked
の状態を示します。
次のcurl
コマンドを実行して、チェックマーク画像をimages
ディレクトリにダウンロードします。
curl -sL https://assets.digitalocean.com/articles/68129/check.svg -o images/check.svg
画像をダウンロードして使用する準備ができたら、テキストエディタでstyles.css
に戻ります。
次に、:checked
疑似クラスがアタッチされたinput[type="checkbox"]
セレクターを追加します。 セレクターブロックに、background
プロパティを追加します。このプロパティはcheck.svg
画像を読み込み、ボックスに収まるように縮小します。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。
stlyes.css
... input[type="radio"]:checked { ... } input[type="checkbox"]:checked { background: url('images/check.svg') no-repeat center / 75% auto; }
background
プロパティ値は、チェックマーク画像がコンテナの中央に配置され、繰り返されず、比例して75%縮小されることを保証します。
変更内容をstyles.css
に保存してから、ブラウザでページを更新してください。 ニュースレターを受信するチェックボックスをオンにすると、次の画像に示すように、チェックマークが内部に表示されます。
このセクションでは、カスタムラジオボタンと入力フィールドを作成し、:checked
疑似クラスを使用して選択した状態を調整しました。 次のセクションでは、ページの<label>
要素と<legend>
要素のスタイルを設定します。
ラベルと凡例に特別なスタイルを追加する
次にスタイルを設定する要素は、フォームの<label>
要素と<legend>
要素です。 使用される2つの異なるスタイルがあります。ラジオボタンとチェックボックスの小さなラベルスタイルと、残りの要素の大きなラベルスタイルです。
テキストエディタでindex.html
を開きます。 以下で強調表示されているように、class
属性を<label>
および<legend>
のそれぞれにlarge-label
またはsmall-label
のいずれかの値で追加します。コードブロック:
index.html
... <form> <div> <label for="name" class="large-label">Name</label> <input id="name" type="text" /> </div> <div> <label for="email" class="large-label">Email</label> <input id="email" type="email" /> </div> <div> <label for="comp" class="large-label">Favorite CSS Compiler</label> ... </div> <div> <fieldset> <legend class="large-label">Are you familiar with CSS Grid?</legend> <input type="radio" name="grid" id="yes" value="yes" /> <label for="yes" class="small-label">Yes</label> <input type="radio" name="grid" id="no" value="no" /> <label for="no" class="small-label">No</label> </fieldset> </div> <div class="full-width"> <label for="message" class="large-label">Message</label> <textarea id="message"></textarea> </div> <div class="full-width"> <input type="checkbox" id="newsletter" /> <label for="newsletter" class="small-label">Receive our newsletter?</label> </div> ... </form> ...
これらの追加をindex.html
に保存し、テキストエディタでstyles.css
を開きます。
styles.css
で、.large-label
クラスセレクターを追加し、次のコードブロックで強調表示されているように次のプロパティを追加します。
styles.css
... .full-width { grid-column: span 2; } .large-label { display: inline-block; font: bold 1.5rem sans-serif; margin-bottom: 0.5rem; } ...
これらのスタイルは、large-label
要素を大きく太字に設定し、フォントサイズは1.5rem
で、24px
と同等です。 次に、margin-bottom
プロパティは、ラベルとそれに対応するものの間にいくらかのスペースを提供します。
この変更をstyles.css
に保存し、Webブラウザでindex.html
を開きます。 次の画像に示すように、データ入力フィールドの上のラベルテキストは大きく太字になります。
styles.css
に戻り、.small-label
用の別のクラスセレクターを作成します。 これらはラジオボタンまたはチェックボックスの右側にあるラベルであるため、.large-label
とは異なる間隔とサイズのスタイルが必要になります。 強調表示されたCSSを次のコードブロックからstyles.css
に追加します。
styles.css
... .large-label { display: inline-block; font: bold 1.5rem sans-serif; margin-bottom: 0.5rem; } .small-label { vertical-align: middle; display: inline-block; margin-left: 0.25rem; margin-right: 1.5rem; font: 1.25rem sans-serif; } ...
vertical-align: middle
はテキストをわずかにオフセットします。 フォントは1.25rem
に設定されています。これは、20px
と同等で、sans-serif
フォントを使用します。 左右のmargin
プロパティは、入力フィールドとラベルの間にスペースを提供します。
更新をstyles.css
に保存し、ブラウザーでindex.html
を更新します。 次の画像に示すように、ラジオボタンとチェックボックスの横のラベルが大きくなり、間隔が広くなりました。
このセクションでは、入力値との関係に基づいて、2つの異なるタイプのラベルのスタイルを作成しました。 ラベルが目立つようになり、フォーム全体で読みやすく、ナビゲーションしやすくなりました。 次のセクションでは、placeholder
属性を使用したデータフォーマットの例を示します。
::placeholder
疑似要素を使用したプレースホルダーコンテンツの提供
input
またはtextarea
要素のプレースホルダーコンテンツは、フォームユーザーに、要求されている情報の種類とそのフォーマット方法の視覚的なデモンストレーションを提供します。 placeholder
属性は、それを説明する値とともにHTMLに追加されます。 次に、::placeholder
疑似要素を使用して、テキストの外観をカスタマイズできます。
プレースホルダーコンテンツの作成を開始するには、テキストエディターでindex.html
を開きます。 名前テキスト<input />
、電子メール<input />
、および<textarea>
要素にplaceholder
属性を追加します。 次のコードブロックで強調表示されているHTMLは、placeholder
を追加する場所と使用する値を示しています。
index.html
... <form> <div> <label for="name" class="large-label">Name</label> <input id="name" type="text" placeholder="First or Full Name" /> </div> <div> <label for="email" class="large-label">Email</label> <input id="email" type="email" placeholder="[email protected]" /> </div> ... <div class="full-width"> <label for="message" class="large-label">Message</label> <textarea id="message" placeholder="Leave a message…"></textarea> </div> ... </form> ...
変更内容をindex.html
に保存し、Webブラウザでページを開きます。 これらの3つのテキスト入力領域には、コンテンツが含まれています。 これらのテキスト入力フィールドが選択され、コンテンツが追加されると、プレースホルダーテキストはブラウザによって削除されます。 次の画像は、デフォルトのプレースホルダースタイルがブラウザーにどのように表示されるかを示しています。
placeholder
のスタイルを設定するには、テキストエディタでstyles.css
を開きます。 input::placeholder
およびtextarea::placeholder
のグループセレクターを追加します。 ブラウザが疑似クラスと疑似要素の違いを認識する方法であるため、セレクタと疑似要素の間には必ず二重コロンを使用してください。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。
styles.css
... textarea { min-height: 10rem; } input::placeholder, textarea::placeholder { opacity: 1; /* Firefox */ color: hsl(213, 73%, 50%); } select { background: url("images/down-arrow.svg") no-repeat center right 0.75rem; } ...
注意すべき点の1つは、Firefoxがフルカラー値を取得するには、opacity
値を1
に設定する必要があるということです。 それ以外の場合、Firefoxはopacity
を減らし、テキストの色を暗くし、色の値に応じてアクセス可能な色のコントラストの問題を引き起こします。 これはFirefoxのみの状況であるため、opacity
プロパティの存在の目的を説明するコメントがあります。
変更内容をstyles.css
に保存し、ブラウザに戻ってindex.html
を更新します。 プレースホルダーのテキストは、ドロップダウン矢印とラジオボタンとチェックボックスの選択された状態に使用されるのと同じ青色になりました。 次の画像は、ブラウザがplaceholder
コンテンツをレンダリングする方法を示しています。
このセクションでは、テキスト入力フィールドにplaceholder
コンテンツを作成し、::placeholder
疑似要素を使用してスタイルを設定しました。 次のセクションでは、フォーム<button>
要素のカスタムスタイルを作成します。
インタラクティブボタンスタイルの作成
Webフォームでは、<button>
要素は、フォームを送信またはリセットするためによく使用されます。 index.html
には、type
のsubmit
とreset
の2つのボタンがあります。 どちらも機能的には便利ですが、反対のアクションを実行します。 submit
ボタンはフォームをプロセッサに送信し、reset
ボタンはフォームから入力されたすべてのデータをクリアします。 これらの異なるアクションのために、<button>
要素も視覚的に異なるように見える必要があります。
まず、テキストエディタでstyles.css
を開き、button
要素セレクタを作成します。 このセレクターブロックでは、次のコードブロックで強調表示されているように、submit
要素とreset
<button>
要素の間で共有されるスタイルを追加します。
styles.css
... input[type="checkbox"]:checked { background: url("images/check.svg") no-repeat center / 75% auto; } button { font: 1.25rem sans-serif; border-radius: 0.25rem; cursor: pointer; padding: 0.75rem 1.25rem; }
font
は、両方のボタンが同じフォントスタイルとサイズになるように設定します。 次に、border-radius
は両方のボタンに丸い角を追加します。 cursor
プロパティは、カーソルのスタイルをハンドスタイルのポインタに変更します。 最後に、padding
プロパティは、ボタンの内側の周りのスペースを定義します。
変更内容をstyles.css
に保存し、Webブラウザでindex.html
を開きます。 パディングにより、ボタン内のテキストが大きくなり、テキスト間の間隔が視覚的に大きくなります。 次の画像は、ブラウザでボタンがどのようにレンダリングされるかを示しています。
次に、styles.css
に戻り、各ボタンtype
のスタイルを追加します。 submit
ボタンには、青色のbackground-color
とwhite
のテキストカラーを追加します。 reset
ボタンには、リンクのような下線とmargin
が追加され、ボタンの間にスペースが追加されます。 次のコードブロックから強調表示されたCSSをstyles.css
ファイルに追加します。
styles.css
... button { ... } button[type="submit"] { background-color: hsl(213, 73%, 50%); color: white; } button[type="reset"] { text-decoration: underline; margin-left: 1rem; }
これらの追加をstyles.css
に保存してから、テキストエディタでindex.html
を更新してください。 次の画像に示すように、submit
ボタンは青と白で目立つようになり、reset
は下線付きのテキストになりました。
<button>
要素にはデフォルトで:hover
状態がないため、これをスタイルに追加します。 :hover
状態は、カーソルがボタン上にあることをカーソルユーザーが視覚的にフィードバックできるようにするのに役立ちます。
これらの<button>
要素の:hover
状態を作成するには、テキストエディタでstyles.css
に戻ります。 submit
ボタンのbackgound-color
をホバー時に暗くするように設定します。 次に、reset
ボタンにカーソルを合わせたときに下線をドロップします。 次のコードブロックで強調表示されているHTMLは、これらのスタイルの記述方法を示しています。
styles.css
... button[type="submit"] { background-color: hsl(213, 73%, 50%); color: white; } button[type="submit"]:hover { background-color: hsl(213, 73%, 40%); } button[type="reset"] { text-decoration: underline; margin-left: 1rem; } button[type="reset"]:hover { text-decoration: none; }
変更内容をstyles.css
に保存し、ブラウザに戻ってindex.html
を更新します。 次のアニメーションが示すように、<button>
要素は、マウスカーソルをそれらの上に置くとスタイルをシフトします。
このセクションでは、<button>
要素のスタイルを作成して、それらの違いを視覚的に目立たせるようにしました。 cursor
プロパティを調整して、ホバー時のカーソルの表示方法を変更しました。 また、各ボタンに適用するカスタムスタイルを作成して、視覚的なフィードバックをさらに提供しました。 最後のセクションでは、フォーム要素が現在:focus
疑似クラスで使用されているときにスタイルを作成することにより、視覚的なアクティビティのフィードバックをさらに提供します。
:focus
を使用したアクティブフォームフィールドの明確化
フォームに記入するときは、ユーザーが現在作業しているフィールドを知っていることが重要です。 これは、:focus
疑似クラスを使用して実現できます。 デフォルトでは、ブラウザはoutline
プロパティを使用して、要素に:focus
があることを示しますが、目立たないインジケーターである場合や、デザインの他の視覚的側面と衝突する場合があります。 このセクションでは、フォームの美観に一致するカスタム:focus
状態を作成します。
フォームフィールド:focus
の状態の操作を開始するには、テキストエディタでstyles.css
を開きます。 次のコードブロックで強調表示されているように、input
、select
、およびtextarea
のグループセレクターを、すべて:focus
疑似クラスで作成します。
styles.css
... input, select, textarea { ... } input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 4px hsl(213, 90%, 70%); } input[type="text"], input[type="email"], select, textarea { ... } ...
これらのスタイルは、ブラウザのデフォルトのoutline
値を削除し、スタイルをbox-shadow
プロパティで作成された太い青いストロークに置き換えます。 box-shadow
の最初の3つの値は、シャドウの配置とブラーの量です。 4番目はスプレッドと呼ばれ、この場合、フォーカスされた要素の周りに4px
ストロークを作成します。
次に、submit
ボタンは同じ青色であるため、ボタンはわずかに異なるフォーカス状態を受け取ります。 フォーカス状態の目的と目的は、フォーカスされた要素に注目を集めることです。そのため、これらのアウトラインをさまざまな方法で区別します。
button:focus
セレクターをstyles.css
に追加します。 セレクターブロックで、outline
のデフォルトを無効にし、box-shadow
プロパティを追加します。 配置、ぼかし、および広がりの値は入力フィールドと同じままですが、次のコードブロックで強調表示されているように、色は青ではなく黒になります。
styles.css
... button { ... } button:focus { outline: none; box-shadow: 0 0 0 4px black; } button[type="submit"] { ... } ...
変更内容をstyles.css
に保存し、ブラウザに戻ります。 index.html
を更新し、 Tab キーを押して、フォーム内の各要素間でフォーカスを移動します。 次のアニメーションは、Tabキーでフォーカスが変化するときにフォーカススタイルがどのように適用されるかを示しています。
このセクションでは、フォーム要素にフォーカスがある場合に明確な視覚的フィードバックを提供するフォーカス状態スタイルを作成しました。 この視覚的なスタイルは、マウス、タッチ、およびキーボード入力のユーザーに役立ちます。
結論
フォームはウェブデザインの一般的な要素です。 これにより、ユーザーはアプリを操作したり、コンテンツを検索したり、フィードバックを提供したりできます。 このチュートリアルでは、本格的なフォームを作成してスタイルを設定しました。 appearance
プロパティを使用してブラウザのデフォルトのスタイルを削除し、さまざまな要素にわたって新しいカスタムの美学を作成しました。 :checked
疑似クラスを使用して、ラジオボタンとチェックボックスの状態を選択しました。 次に、placeholder
コンテンツを追加し、スタイルを::placeholder
疑似要素と一致させました。 カスタムボタンスタイルを作成した後、:focus
スタイルを適用して、フォームユーザーに貴重な視覚的相互作用のフィードバックを提供しました。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。