Chapter 41

Ver2.2から、スマホ対応!レスポンシブサイト

kazpgm
kazpgm
2022.04.24に更新

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タイトル&nbsp;&nbsp;管理システム</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タイトル&nbsp;&nbsp;管理システム</strong></div></a>

<<Ver2.2で修正後 end>>

■/resources/templates/members/admin/side.html

<<Ver2.2で修正後 start サイドメニューをドロワーメニューのドロワーリストとして設定する>>

 <div class="drawer-list" id="side">

<<Ver2.2で修正後 end>>