Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

HTML/css JSP/Servlet

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

投稿日:2021年4月18日 更新日:

<目次>

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

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

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

(図111)Before⇒Afterのイメージ

(1-1) 方針&構文

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

(図112)

■CSS側の対応

cssに以下の追記を行い、そのcssをJSPにインポートします。
 
(css:構文)
label{
    display: inline-block;
    text-align: right;
    width: 150px;
}
 
(css:構文説明)
●セレクタ「label {・・・}」
 
今回は表のラベル(<label>)に幅(width)を指定したいので、「label」を指定します。

 

●プロパティと値
 
各プロパティと値の説明は以下の通りです。
 
・「display: inline-block;」
 
値「inline-block」はインライン(文章中など)に要素をブロック(幅や高さを指定可能)として挿入するためのオプションです。
 
(図113)
 
・「text-align: right;」
 
ラベルを右寄せにしています。これはテキストボックスの左端を揃える事と直接は関係ないため、好みで入れて頂けたらと思います。
(図114)
 
・「width: 150px;」
 
要素の幅を150pxに指定します。今回の例ではラベルを150pxに設定する事で、テキストボックスを揃える事に寄与しています。「display: inline-block;」を指定していないと、このプロパティは有効になりません。
 
(図115)

■JSP側の対応

(構文:JSP側の追記)

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

<link rel="stylesheet" type="text/css" href="[cssパス]/[css名].css">
 
また、項目のラベルが<label>要素で定義されていない場合は、その点も修正します(「ID」という文字列を<label>要素で囲う)。
 
(例)
ID

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

(1-2) サンプルプログラム

●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>
 
(図121)①
 

●css

@charset "UTF-8";

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

(図122)

(図123)出来上がり例

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-HTML/css, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JSPやServletの画面をスマホ表示に対応させる方法~メディアクエリの導入~

<目次> (1) JSPやServletの画面をスマホ表示に対応させる方法 (2) 設定手順  (2-1) Step1:ビューポートの設定  (2-2) Step2:メディアクエリを記述したcssファ …

Servlet(サーブレット)におけるフォワード(forward)とリダイレクト(redirect)の違い

<目次> (1) Servlet(サーブレット)におけるフォワード(forward)とリダイレクト(redirect)の違い  (1-1) フォワード(forward)とは?  (1-2) リダイレク …

JSP/Servletで必須入力チェックを実装する方法+サンプルプログラムや操作動画も紹介

<目次> (1) JSP/Servletで必須入力チェックを実装する方法  (1-1) 必須入力チェックの概要   (1-1-1) 全体の処理フロー   (1-1-2) 必須入力チェック部分の処理フロ …

JSP Servletで共通のヘッダーを設定する方法

<目次> (1) JSP Servletで共通のヘッダーを設定する方法  (1-1) 構文  (1-2) サンプルプログラム  (1-3) 参考 (1) JSP Servletで共通のヘッダーを設定す …

JavaScriptのAddEventListenerの用途や使用例について

<目次> (1) JavaScriptのAddEventListenerの用途や使用例について  (1-1) 概要  (1-2) 構文  (1-3) サンプルプログラム (1) JavaScriptの …

  • English (United States)
  • 日本語
Top