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

CSSでフォーム入力欄に境界線（ボーダー）を設定する方法

フォームの入力欄（input要素）に境界線を設定するには、CSSの border プロパティを使用します。
境界線の太さ・スタイル・色をまとめて指定できるため、シンプルな記述で見た目を整えられます。

基本的な書き方

borderプロパティは「太さ」「スタイル」「色」の3つの値をスペース区切りで指定します。

border: 3px inset orange;

この例では、3pxの太さのinsetスタイル（へこんだように見える立体枠）をオレンジ色で表示しています。

サンプルコード

テキスト入力欄に対して属性セレクタ input[type = text] を使い、幅やパディングと合わせて境界線を適用した例です。以下のコードを実行して、実際の表示を確認してみてください。

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         input[type = text] {
            width: 100%;
            padding: 10px 15px;
            margin: 5px 0;
            box-sizing: border-box;
            border: 3px inset orange;
         }
      </style>
   </head>
   <body>
      <p>下記のフォームに入力してください</p>
      <form>
         <label for = "subject">科目</label>
         <input type = "text" id = "subject" name = "sub">
         <label for = "student">学生名</label>
         <input type = "text" id = "student" name = "stu">
      </form>
   </body>
</html>

ポイント解説

box-sizing: border-box; を指定すると、paddingやborderの太さを含めてwidthが計算されるため、レイアウト崩れを防げます。
また、solid（実線）や dashed（破線）、rounded な角にしたい場合は border-radius を組み合わせることで、より洗練されたデザインの入力欄を作成できます。

  1. CSSで左上の角を丸くする方法｜border-top-left-radiusの使い方

    要素の左上の角だけを丸くしたい場合は、CSSの border-top-left-radius プロパティを使用します。このプロパティを使うことで、要素全体の角ではなく、左上のコーナーのみに個別の角丸を適用できます。以下は、border-top-left-radius プロパティを使って左上の角を丸くする具体的なコード例です。実際にブラウザで実行して、表示結果を確認してみてください。コード例<html>    <head>       <style>         &n

  2. CSSで右上の角丸を設定する方法｜border-top-right-radiusの使い方

    CSSで要素の右上の角だけを丸くしたい場合は、border-top-right-radiusプロパティを使用します。このプロパティを指定すると、右上隅のみに丸みを帯びた境界線を設定でき、ボックス全体のデザインに柔らかさやアクセントを加えることができます。border-top-right-radiusの基本border-top-right-radiusには、px・em・%などの単位で値を指定します。値が大きいほど角の丸みが大きくなり、0を指定すると直角に戻ります。サンプルコード以下のコードは、border-top-right-radiusプロパティを使って右上の角だけを大きく丸める実装例です。&