Ver2.2以降に自動作成されたPGMがどのようにして、スマホ対応！レスポンシブサイトになっているか説明する。
ログイン画面
・スマホのログイン画面の入力項目は縦並びにしました。さらに、スマホ画面100%に収まるようにしました。
CSSにより、スマホの入力項目が縦に並びます。
・ログイン画面.htmlに入れた修正内容を、『＜＜・・・＞＞』（例：『＜＜Ver2.2で追加 start＞＞』）で説明します。
■ログイン画面.html
<!DOCTYPE html>
<html lang="ja">
<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タイトル 管理システム</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen,print" />
＜＜Ver2.2で追加 start＞＞
<style type="text/css">
＜＜スマホ向けCSS 画面サイズ768以下＞＞
@media screen and (max-width: 768px) {
＜＜タイトルはsmall文字＞＞
.sysTitle {
font-size: small;
color:#FFFFFF;
text-align: center;
}
＜＜smartphoneTblクラスのthとtdは縦表示＞＞
.smartphoneTbl table th,td {
display:block;
text-align: left;
}
}
＜＜PC向けCSS 画面サイズ768以上＞＞
@media screen and (min-width: 768px) {
＜＜タイトルはlarge文字＞＞
.sysTitle {
font-size: large;
color:#FFFFFF;
text-align: center;
}
}
</style>
＜＜Ver2.2で追加 end＞＞
</head>
<body>
<div id="wrapper">
<div id="header">
＜＜Ver2.2で修正 start sysTitleクラスで、文字サイズ切替＞＞
<div class="sysTitle"><strong>あなたのPGMタイトル 管理システム</strong></div>
＜＜Ver2.2で修正 end＞＞
<div id="r-navi">
<form class="text-center" action="/logout" method="post"><input type="hidden" name="_csrf" value="664468cd-5b2b-4d93-90e9-79bb8fb1269d"/>
<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 action="/login" method="POST" id="login"><input type="hidden" name="_csrf" value="664468cd-5b2b-4d93-90e9-79bb8fb1269d"/>
<input type="text" name="dummy" style="display:none;" />
<input type="hidden" name="mode" value="login_do">
<div align="center">
＜＜Ver2.2で修正 start スマホ画面100%に収まるように、width="379"を削除した＞＞
<table border="1" cellspacing="0" cellpadding="7">
＜＜Ver2.2で修正 end＞＞
<tr><td>
＜＜Ver2.2で修正 start スマホ画面100%に収まるように、width="448"をwidth="100%"にした＞＞
<table width="100%" border="0" cellspacing="0" cellpadding="5">
＜＜Ver2.2で修正 end＞＞
<tr>
<td colspan="2">※ユーザーID（メールアドレス）、パスワードを入力後、「ログイン」ボタンを押してください。</td>
</tr>
<tr>
<td>
＜＜Ver2.2で修正 start class="smartphoneTbl"（スマホ時thとtdは縦表示）を追加した＞＞
<table class="smartphoneTbl" width="100%" border="0" cellspacing="0" cellpadding="5">
＜＜Ver2.2で修正 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">
</td>
</tr>
</table>
<br>
</td>
<td>
＜＜Ver2.2で修正 start class="smartphoneTbl"（スマホ時thとtdは縦表示）を追加した＞＞
<table class="smartphoneTbl" width="100%" border="0" cellspacing="0" cellpadding="0">
＜＜Ver2.2で修正 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>
スマホで表示する時、こんな感じの、ドロワーメニューにした。さらに、スマホ画面100%に収まるようにした。
CSSにより、スマホ、PCを切り替えます。
・修正内容を、『＜＜・・・＞＞』（例：『＜＜Ver2.2で追加 start＞＞』）で説明します。
■/resources/static/css/layout.css
＜＜Ver2.2で追加 start＞＞
【6】スマホ対応！レスポンシブサイト
・・・
＜＜Ver2.2で追加 end＞＞
・・・
#wrapper
{
＜＜Ver2.2で削除 start 画面100%に収めるため削除＞＞
/* width: 100%; */
＜＜Ver2.2で削除 end＞＞
＜＜Ver2.2で追加 start 画面100%に収めるため追加＞＞
min-width: 100%;
display: inline-block;
＜＜Ver2.2で追加 end＞＞
margin: 0 auto;
text-align: left;
}
・・・
#contents
{
clear:both;
background: url(../img/bg_contents.gif) repeat-x left top;
background-color:#E6E6E6;
padding:20px 0 20px 0;
＜＜Ver2.2で追加 start 画面100%に収めるため追加＞＞
min-width: 100%;
display: inline-block;
＜＜Ver2.2で追加 end＞＞
}
・・・
＜＜Ver2.2で追加 start スマホ対応！レスポンシブサイト ＞＞
/* =============================================================
■□■ 6. スマホ対応！レスポンシブサイト ■□■
============================================================= */
@media screen and (max-width: 768px) {
/* ハンバーガーメニュー */
.hamburger {
width: 30px;
height: 30px;
background: #205386;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 999;
}
.hamburger:hover {
cursor: pointer;
}
.hamburger span {
background: #fff;
width: 25px;
height: 2px;
position: absolute;
transition: 0.3s ease-out;
}
.hamburger span:nth-of-type(1) {
top: 15px;
}
.hamburger span:nth-of-type(3) {
bottom: 15px;
}
＜＜ドロワーリスト（サイドメニュー）を見えない位置に移動する start＞＞
/* ハンバーガーメニューを左側に隠す */
.drawer-list {
position: absolute;
transform: translate(-300px);
transition: 0.3s ease-out;
}
＜＜ドロワーリスト（サイドメニュー）を見えない位置に移動する end＞＞
.drawer-list.open {
transform: translate(0);
transition: 0.3s ease-out;
}
＜＜メイン画面の表示位置を画面左に寄せる start＞＞
#main
{
background-color: #990000;
margin:0 10px 0 5px;
background-color:#FFFFFF;
border:solid 1px #C6C6C6;
padding:15px 15px 40px 15px;
font-size: 8px;
}
＜＜メイン画面の表示位置を画面左に寄せる end＞＞
＜＜タイトルはsmall文字 start＞＞
.sysTitle {
font-size: small;
color:#FFFFFF;
text-align: center;
}
＜＜タイトルはsmall文字 end＞＞
}
@media screen and (min-width: 768px) {
.hamburger {
display:none;
}
＜＜ドロワーリスト（サイドメニュー）を表示する start＞＞
.drawer-list {
display:block;
}
＜＜ドロワーリスト（サイドメニュー）を表示する end＞＞
＜＜タイトルはlarge文字 start＞＞
.sysTitle {
font-size: large;
color:#FFFFFF;
text-align: center;
}
＜＜タイトルはlarge文字 end＞＞
}
/* ハンバーガーメニューにactiveクラスが付いているときは三本線ではなく×印にする */
.hamburger.active span:nth-of-type(1) {
transform: translateY(9px) rotate(-45deg);
transition: 0.3s ease-out;
}
.hamburger.active span:nth-of-type(3) {
transform: translateY(-9px) rotate(45deg);
transition: 0.3s ease-out;
}
.hamburger.active span:nth-of-type(2) {
opacity: 0;
}
＜＜Ver2.2で追加 end＞＞
■/resources/templates/members/admin/template.html
＜＜Ver2.2で追加 start 画面100%に収めるため追加＞＞
<meta name="viewport" content="width=device-width" />
＜＜Ver2.2で追加 end＞＞
・・・
<script type="text/javascript" src="/js/createDatepicker.js"></script>
＜＜Ver2.2で追加 start ドロワーメニュークリック切替＞＞
<!-- ドロワーメニュー用ロジック -->
<script>
$(function(){
$('.hamburger').click(function(){
$('.hamburger').toggleClass('active');
$('.drawer-list').toggleClass('open');
});
$('.menu > li > a').click(function(){
$('.hamburger').toggleClass('active');
$('.drawer-list').toggleClass('open');
});
});
</script>
＜＜Ver2.2で追加 end＞＞
■/resources/templates/members/admin/header.html
＜＜Ver2.2で追加 start ドロワーメニューの三本線＞＞
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
＜＜Ver2.2で追加 end＞＞
<div id="header">
＜＜Ver2.2で修正後 start sysTitleクラスで、文字サイズ切替＞＞
<a th:href="'javascript:submitFrm5(\'/members/admin/index\', \'\')'"><div class="sysTitle" ><strong>あなたのPGMタイトル 管理システム</strong></div></a>
＜＜Ver2.2で修正後 end＞＞
■/resources/templates/members/admin/side.html
＜＜Ver2.2で修正後 start サイドメニューをドロワーメニューのドロワーリストとして設定する＞＞
<div class="drawer-list" id="side">
＜＜Ver2.2で修正後 end＞＞