「kaz_javaSpringBootプログラム自動作成◎自動生成」スマホ対応！レスポンシブサイト自動生成修正UPをベクターに依頼
18:01
①「kaz_javaSpringBootプログラム自動作成◎自動生成」スマホ対応！レスポンシブサイト自動生成修正UPをベクターに依頼した。OKが来たら、また報告する。
www.vector.co.jp
・Zenn本(SpringBoot、Thymeleaf プログラム自動作成（マクロ使用版）)
zenn.dev
・2.2(202204230000)
1.CSSでスマホ対応！レスポンシブサイトにした。スマホで表示する時、こんな感じの、ドロワーメニューにした。
■/resources/static/css/layout.css
＜＜追加 start＞＞ 【6】スマホ対応！レスポンシブサイト ＜＜追加 end＞＞ ・・・ #wrapper { ＜＜削除 start＞＞ width: 100%; ＜＜削除 end＞＞ ＜＜追加 start＞＞ min-width: 100%; display: inline-block; ＜＜追加 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; ＜＜追加 start＞＞ min-width: 100%; display: inline-block; ＜＜追加 end＞＞ } ・・・ ＜＜追加 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; } /* ハンバーガーメニューを左側に隠す */ .drawer-list { position: absolute; transform: translate(-300px); transition: 0.3s ease-out; } .drawer-list.open { transform: translate(0); transition: 0.3s ease-out; } #main { background-color: #990000; margin:0 10px 0 5px; background-color:#FFFFFF; border:solid 1px #C6C6C6; padding:15px 15px 40px 15px; font-size: 8px; } .sysTitle { font-size: small; color:#FFFFFF; text-align: center; } } @media screen and (min-width: 768px) { .hamburger { display:none; } .drawer-list { display:block; } .sysTitle { font-size: large; color:#FFFFFF; text-align: center; } } /* ハンバーガーメニューに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; } ＜＜追加 end＞＞
■/resources/templates/members/admin/template.html
＜＜追加 start＞＞ <meta name="viewport" content="width=device-width" /> ＜＜追加 end＞＞ ・・・ <script type="text/javascript" src="/js/createDatepicker.js"></script> ＜＜追加 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> ＜＜追加 end＞＞
■/resources/templates/members/admin/header.html
＜＜追加 start＞＞ <div class="hamburger"> <span></span> <span></span> <span></span> </div> ＜＜追加 end＞＞ <div id="header"> ＜＜修正後 start＞＞ <a th:href="'javascript:submitFrm5(\'/members/admin/index\', \'\')'"><div class="sysTitle" ><strong>あなたのPGMタイトル 管理システム</strong></div></a> ＜＜修正後 end＞＞
■/resources/templates/members/admin/side.html
＜＜修正後 start＞＞ <div class="drawer-list" id="side"> ＜＜修正後 end＞＞
2.ログイン画面を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タイトル 管理システム</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>
