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

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

関連記事

Spring Bootでpom.xmlに「Unknown error」が出た時の対処方法について

  <目次> (1) Spring Bootでpom.xmlに「Unknown error」が出た時の対処方法について  (1-1) 発生状況  (1-2) 原因  (1-3) 対処法①(非 …

セッションIDとは?JSPでsessionを保存&取得するサンプルプログラムと代表的なメソッド紹介

(0)目次&概説 (1) セッションとは  (1-1) 概要  (1-2) サンプルプログラム   (1-2-1) 概要&画面遷移   (1-2-2) HelloSession.jsp   (1-2- …

JSP/Servletで画面毎のアクセスカウンターを作成してみた(パート2:ソース解説編)

(1) 仕様について (2) ソースコード  (2-1) AccessCounter2.java   (2-1-1) サンプルPG   (2-1-2) サンプルPG解説  (2-2) DbConnec …

Javaでカンマやクォーテーションをエスケープする方法

<目次> (1) Javaでカンマやクォーテーションをエスケープする方法  (1-1) 実現方法・構文  (1-2) サンプルプログラム  (1-3) 参考:カンマとダブルクォーテーション両方のエスケ …

no image

HTMLで<a>要素のリンクを中央寄せする方法

<目次> (1) HTMLで<a>要素のリンクを中央寄せする方法  (1-1) 構文  (1-2) サンプルプログラム  (1-3) サンプルプログラム実行結果 (1) HTMLで< …

  • English (United States)
  • 日本語
Top