「kaz_javaSpringBootプログラム自動作成◎自動生成」のレスポンシブデザイン的な調査
10:31
①昨日と違う方法のドロワーメニューを調べている。
20:44
①レスポンシブデザインのスマホ向けドロワーメニュー画面。こんな感じにできた。なかなかよくできた。思ったように動いているのでストレスない。
・今ある画面のメニューと情報画面を、分離しようという考えでやってる。入力画面や、検索画面の画面からはみ出た分は、見れればいい。って感じで作成。
・次回のツールバージョンアップにこれを入れよう。
www.vector.co.jp
■今ある「kaz_javaSpringBootプログラム自動作成◎自動生成」でできる画面。
・これをスマホの時は、CSSでスマホ向けに変えるレスポンシブデザインを取り入れる。
@media screen and (max-width: 768px) {のようにして切り分ける。
■スマホ実機の画面。
・まず、スマホ実機のchrome初期画面
・『ハンバーグメニュー』押下後。左からスライドするようにメニューが出る。
・ユーザー情報一覧（更新削除）画面選択。はみだした分は、見れればいい。って感じなので、これでいいとする。
←とかいいながら、ユーザー情報一覧（更新削除）画面の、はみだした分は明日の日記で解決している。
<meta name="viewport" content="width=device-width" />
を使って画面全体を表示している。
・さらに、『ハンバーグメニュー』押下後。
ユーザー情報一覧（更新削除）画面に、覆いかぶせた形でメニューが出る。
・ユーザー情報登録画面選択。これも、はみだした分は、見れればいい。って感じなので、これでいいとする。
←とかいいながら、ユーザー情報一覧（更新削除）画面の、はみだした分は明日の日記で解決している。
・『ハンバーグメニュー』押下後。
・メニューの最後まで画面をスワイプする。
■とりあえず。できたソースの抜粋
<meta name="viewport" content="width=device-width" /> <!-- <meta name="viewport" content="width=1400" /> --> <style type="text/css"> @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; } </style> ・・・ ＜＜追加 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＞＞ ・・・ ＜＜修正後 start＞＞ <div class="drawer-list" id="side"> ＜＜修正後 end＞＞ ・・・ <!-- ドロワーメニュー用ロジック --> <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>
