「kaz_PHP自動作成◎自動生成お助けTOOL」・前回UPの修正漏れかつ、画面を、スマホ対応！レスポンシブサイトにしたので、VectorにUPした。

20:06
①前回「kaz_PHP自動作成◎自動生成お助けTOOL」をphp8.1.6用のXAMPP（xampp-windows-x64-8.1.6-0-VS16-installer.exe）で動く様にした時の修正漏れと、画面を、スマホ対応！レスポンシブサイトにした修正を行ったので、Vectorに載せた。OKがきたらまた報告する予定。
www.vector.co.jp

■スマホ対応！レスポンシブサイト
①自動生成した「企業情報検索画面」のPC側画像

②自動生成した「企業情報検索画面」のスマホ側画像

■修正内容は

・2.1(202209251800)
１.前回バージョン2.0にUpしたもので、修正漏れのため、ユーザー側画面で落ちる。のを修正した。
　①値を参照している個所を修正する
　　例：$_SESSION['u_login_id_login']→arryVal($_SESSION,'u_login_id_login')
　　　　$_SESSION['login_type']→arryVal($_SESSION,'login_type')
　　補足：$_SESSION['search']は修正しなくても必ず値が入るのでOK
　　置換方法：\$_SESSION\[([^]]+)\]←値を入れている項目でないことを確認しながら
　　　　　　　↓
　　　　　　　arryVal($_SESSION, $1)
　②ユーザー側のDBデータ追加で「$res = 」が抜けていて、ワーニングになる。のを修正
　　例：dbPrepareExeInsert($db, 't_corp', $columns);
　　　　↓
　　　　$res = dbPrepareExeInsert($db, 't_corp', $columns);


２.CSSでスマホ対応！レスポンシブサイトにした。スマホで表示する時、ドロワーメニューにした。
　かつ、スマホ表示の時、テーブル表示（tbl-01クラス、tbl-02クラス）を見やすくした。
　（CSSでスマホ対応！レスポンシブサイト）
	■/resources/static/css/layout.css及び、
	　/resources/static/admin/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: 480px) {
	/* ハンバーガーメニュー */
	.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;
	}

	/* ------------- tbl-01（thが縦） ------------- */
	.tbl-01
	{
	/*	width:99%; */
	max-width: 373px; 
	/* white-space: nowrap; */
		border-top:solid 1px #B5B5B5;
		border-left:solid 1px #B5B5B5;
		border-right:solid 1px #B5B5B5;
		margin-bottom:10px;
		border-collapse:separate;
		border-spacing:0;
	}

	.tbl-01 th
	{
		display:block;
		padding:1px 3px 1px 5px;
		text-align:left;
		border-bottom:solid 1px #B5B5B5;
		border-right:solid 1px #B5B5B5;
		border-top:solid 1px #FFFFFF;
		border-left:solid 1px #FFFFFF;
		background-color:#DAECF3;
		width:auto
	/*	vertical-align: top;
		vertical-align:middle;
		*/
	}

	.tbl-01 td
	{
		display:block;
		padding:1px 3px 1px 5px;
		border-bottom:solid 1px #B5B5B5;
		font-weight:normal;
		word-break:break-all;
	}

	.tbl-01 th.bg-blue
	{
		display:block;
		padding:3px 3px 3px 5px;
		text-align:left;
		border-bottom:solid 1px #B5B5B5;
		border-right:solid 1px #B5B5B5;
		border-top:solid 1px #FFFFFF;
		border-left:solid 1px #FFFFFF;
		background-color:#BECBD4;
		width:auto
	/*	vertical-align: top;
		vertical-align:middle;
		*/
	}
	.scroll_table {
		max-width: 373px; 
		overflow-x: auto;
	}
	.scroll_table .tbl-02
	{
		white-space: nowrap; 
	/*	width:99%; */
		border-top:solid 1px #B5B5B5;
		border-left:solid 1px #B5B5B5;
		margin-bottom:10px;
		border-collapse:separate;
		border-spacing:0;
	}

	.scroll_table::-webkit-scrollbar {
		height: 10px; /* スクロールバーの高さ */
	}
	.scroll_table::-webkit-scrollbar-thumb {
		background: #aaa; /* ツマミの色 */
	}
	.scroll_table::-webkit-scrollbar-track {
		background: #ddd; /* トラックの色 */
	}

	}
	@media screen and (min-width: 480px) {
	.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;
	}

	■「class="tbl-02"」を「<div class="scroll_table">」の下に置いた
	　これにより、スマホ表示の一覧は横スクロールする。
	<div class="scroll_table">
				<!-- tbl-02 start -->
				<table cellpadding="0" cellspacing="0" class="tbl-02">
	・・・
				<!-- tbl-02 end -->
	</div>

３.ログイン画面をCSSでスマホ対応！レスポンシブサイトにした。
　①\作成先フォルダ\.kazphp\view\index.html
　②\作成先フォルダ\.kazphp\view\admin\index.html