kazpgmの日記

『プログラム自動作成＠自動生成』作成の日記

「kaz_javaSpringBootプログラム自動作成◎自動生成」のレスポンシブデザイン的な調査

21:25
①レスポンシブデザインのスマホ向けログイン画面。こんな感じにできた。
　・次回のツールバージョンアップに、さっきやったドロワーメニューと、このログイン画面を入れよう。
www.vector.co.jp
・Zenn本(SpringBoot、Thymeleaf　プログラム自動作成（マクロ使用版）)
zenn.dev
・今あるログイン画面の入力項目をCSSで縦に並べようって思ってる。
■今ある「kaz_javaSpringBootプログラム自動作成◎自動生成」でできる画面。
・これをスマホの時は、CSSでスマホ向けに変えるレスポンシブデザインを取り入れる。

■スマホ実機の画面。

■とりあえず。ほんと、簡単。できたソースの抜粋

<!DOCTYPE html>
<html lang="ja" 
      xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
<title>あなたのPGMタイトル&nbsp;&nbsp;管理システム</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen,print" />
＜＜追加　start＞＞
<style type="text/css">
@media screen and (max-width: 768px) {
.sysTitle {
  font-size: small;
  color:#FFFFFF;
  text-align: center;
}
.smartphoneTbl table th,td {
  display:block;
  text-align: left;
}
}
@media screen and (min-width: 768px) {
.sysTitle {
  font-size: large;
  color:#FFFFFF;
  text-align: center;
}
}
</style>
＜＜追加　end＞＞
</head>

<body>
<div id="wrapper">
	<div id="header">
＜＜修正後　start＞＞
		<div class="sysTitle"><strong>あなたのPGMタイトル　管理システム</strong></div>
＜＜修正後　end＞＞
			<div id="r-navi">
					<form class="text-center" th:action="@{/logout}" method="post">
					<input type="image" src="/img/botton_logout.gif" alt="ログアウト" width="59" height="14" hspace="5" vspace="7" border="0">
					</form>
			</div>
			<p class="clear"></p>
	</div>
	
	<div id="contents-top">
		
    <form th:action="@{/login}" method="POST" id="login">
	<input type="text" name="dummy" style="display:none;" />
    <input type="hidden" name="mode" value="login_do">
		<div align="center">
＜＜修正後　start＞＞
          <table border="1" cellspacing="0" cellpadding="7">
＜＜修正後　end＞＞
            <tr><td>
＜＜修正後　start＞＞
                <table width="100%" border="0" cellspacing="0" cellpadding="5">
＜＜修正後　end＞＞
                  <tr>
                    <td colspan="2">※ユーザーID（メールアドレス）、パスワードを入力後、「ログイン」ボタンを押してください。</td>
                  </tr>
                  <tr>
                    <td>
＜＜修正後　start＞＞
                    <table class="smartphoneTbl" width="100%" border="0" cellspacing="0" cellpadding="5">
＜＜修正後　end＞＞
                        <tr>
                          <td>ユーザーID（メールアドレス）</td>
                          <td><input type="text" id="username" name="username" value="" /></td>
                        </tr>
                        <tr>
                          <td>パスワード</td>
                          <td><input type="password" id="password" name="password" /></td>
                        </tr>
                        <tr>
                          <td colspan="2">
							<p th:if="${param.error}"  class="font-s-red-form">ユーザーID（メールアドレス）かパスワードが正しくありません</p>
                          </td>
                        </tr>
                      </table>
                      <br>
                    </td>
                    <td>
＜＜修正後　start＞＞
                    	<table class="smartphoneTbl" width="100%" border="0" cellspacing="0" cellpadding="0">
＜＜修正後　end＞＞
                        <tr>
                          <td><p class="btn"><input type="image" src="/img/botton_login.gif" alt="LOGIN" width="78" height="45" border="0" /></p></td>  
                        </tr>
						</table>
                   </td>
                  </tr>
                </table>
            </td></tr>
          </table>
		</div>
	</form>
	</div>
	
	<div id="footer">
		<p>Copyright (c) あなたのPGM著作権表示 All rights reserved.</p>
	</div>
	
</div>
</body>
</html>