HTMLでテキストボックスの左端を揃える方法

投稿日：2021年4月18日更新日：2021年3月4日

＜目次＞

(１) HTMLでテキストボックスの左端を揃える方法
　 (１-１) 方針＆構文
　 (１-２) サンプルプログラム

(１) HTMLでテキストボックスの左端を揃える方法

HTML画面（例は.jsp）でテキストボックスを複数個並べた時などに、テキストの左端が綺麗に揃わない事象を解消する方法をご紹介します。やり方は色々あると思いますが、今回はcssに追記する方法をご紹介します。

（図１１１）Before⇒Afterのイメージ

(１-１) 方針＆構文

方針としては、項目のラベルを<label>タグで定義し、そのlabelに対して幅（例：150px）を指定する事で、テキストボックスの左端が揃うように実装します。

（図１１２）

■CSS側の対応

cssに以下の追記を行い、そのcssをJSPにインポートします。

（css：構文）

label{
    display: inline-block;
    text-align: right;
    width: 150px;
}

（css：構文説明）

●セレクタ「label {・・・}」

今回は表のラベル（<label>）に幅（width）を指定したいので、「label」を指定します。

●プロパティと値

各プロパティと値の説明は以下の通りです。

・「display: inline-block;」

値「inline-block」はインライン（文章中など）に要素をブロック（幅や高さを指定可能）として挿入するためのオプションです。

（図１１３）

・「text-align: right;」

ラベルを右寄せにしています。これはテキストボックスの左端を揃える事と直接は関係ないため、好みで入れて頂けたらと思います。

（図１１４）

・「width: 150px;」

要素の幅を150pxに指定します。今回の例ではラベルを150pxに設定する事で、テキストボックスを揃える事に寄与しています。「display: inline-block;」を指定していないと、このプロパティは有効になりません。

（図１１５）

■JSP側の対応

（構文：JSP側の追記）

JSP側では上記のcssをインポートするための行を追記します。

<link rel="stylesheet" type="text/css" href="[cssパス]/[css名].css">

また、項目のラベルが<label>要素で定義されていない場合は、その点も修正します（「ID」という文字列を<label>要素で囲う）。

（例）

ID
↓
<label for=”[対応項目のid]”>ID</label>

＞目次にもどる

(１-２) サンプルプログラム

●JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/IT0991_JspTextboxAlign.css">
<title>タイトル</title>
</head>
<body>
<form method="POST" action="login_servlet" name="loginform">
        <p>
        <label for="uid">ID</label>
        <input type="text" name="userid" id="uid" />
        </p>
        <p>
        <label for="pwd">パスワード</label>
        <input type="password" name="pass" id="pwd" />
        </p>
        <input type="submit" value="ログイン" />
        <input type="reset" value="クリア" />
</form>
</body>
</html>

（図１２１）①

●css

@charset "UTF-8";

label{
    display: inline-block;
    text-align: right;
    width: 150px;
}

（図１２２）

（図１２３）出来上がり例

＞目次にもどる