修正
This commit is contained in:
admin
324
frontend/css/mobile.css
Normal file
324
frontend/css/mobile.css
Normal file
@@ -0,0 +1,324 @@
|
||||
/* ==================================================================
|
||||
mobile.css — iOS Safari・Android Chrome レスポンシブ対応
|
||||
ブレークポイント: 767px 以下をモバイルとして扱う
|
||||
PC のレイアウトは変更しない (screen media query で完全に隔離)
|
||||
================================================================== */
|
||||
|
||||
/* ── iOS Safari フォントブースト無効化 ── */
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
|
||||
/* ── body 余白を縮小 ── */
|
||||
body {
|
||||
padding: 12px !important;
|
||||
margin: 8px !important;
|
||||
}
|
||||
|
||||
/* ── h1・h2 フォントサイズ ── */
|
||||
h1 { font-size: 1.35rem !important; }
|
||||
h2 { font-size: 1.1rem !important; }
|
||||
|
||||
/* ================================================================
|
||||
テーブル: 横スクロール
|
||||
会計・給与テーブルは列数が多く、横スクロールが最適解
|
||||
================================================================ */
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* テーブルを包む overflow:hidden ラッパーも解放する */
|
||||
.doc-table-wrap {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
フォーム入力: 16px で iOS の自動ズームを防ぐ
|
||||
================================================================ */
|
||||
input[type="text"],
|
||||
input[type="date"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
select,
|
||||
textarea {
|
||||
font-size: 16px !important;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
ボタン: タップ領域を 44px 以上に (iOS HIG 推奨)
|
||||
================================================================ */
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
.btn,
|
||||
.upload-btn,
|
||||
.back-link,
|
||||
.logout-btn,
|
||||
.change-pw-btn {
|
||||
min-height: 44px;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
index.html
|
||||
================================================================ */
|
||||
|
||||
/* 2カラムカードグリッド → 1カラム */
|
||||
.grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* ヘッダー: タイトルとユーザー情報を縦積み */
|
||||
header {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex-wrap: wrap !important;
|
||||
width: 100% !important;
|
||||
gap: 8px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* カード内ボタン群: 縦積み・margin-left をリセット */
|
||||
.card p:last-child {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: 0 !important;
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* パスワード変更モーダル: 画面幅に合わせる */
|
||||
.modal-box {
|
||||
width: 92vw !important;
|
||||
max-width: 92vw !important;
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
payroll.html (給与システムメニュー)
|
||||
================================================================ */
|
||||
|
||||
.menu-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
journal-entry.html / journal-edit.html (仕訳入力)
|
||||
================================================================ */
|
||||
|
||||
/* 検索フォーム: 2カラムグリッド → 1カラム */
|
||||
.search-form-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 12px !important;
|
||||
}
|
||||
|
||||
.search-form-row,
|
||||
.search-form-row-full {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 4px !important;
|
||||
}
|
||||
|
||||
.search-form-row label,
|
||||
.search-form-row-full label {
|
||||
min-width: unset !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-form-row input,
|
||||
.search-form-row select,
|
||||
.search-form-row-full input,
|
||||
.search-form-row-full select {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* 検索ボタン群 */
|
||||
.search-buttons {
|
||||
flex-wrap: wrap !important;
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.search-buttons button {
|
||||
flex: 1 1 auto !important;
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
/* .row: 日付・摘要・勘定科目などの入力行 */
|
||||
.row {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 6px !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row label {
|
||||
min-width: unset !important;
|
||||
}
|
||||
|
||||
.row input,
|
||||
.row select {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
trial-balance.html (試算表)
|
||||
テキスト中心の inline 検索フォームを縦積みにする
|
||||
================================================================ */
|
||||
|
||||
.search-form {
|
||||
text-align: left !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
/* trial-balance の検索フォームは label/input が直接子要素 */
|
||||
.search-form > label {
|
||||
display: block !important;
|
||||
margin: 6px 0 2px !important;
|
||||
}
|
||||
|
||||
.search-form > input[type="text"],
|
||||
.search-form > input[type="date"],
|
||||
.search-form > input[type="number"] {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
margin: 0 0 8px 15px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.search-form > button {
|
||||
display: inline-block !important;
|
||||
margin: 4px 4px 0 0 !important;
|
||||
width: auto !important;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
nenkin-portal.html (社会保険電子文書)
|
||||
================================================================ */
|
||||
|
||||
.page-header {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.upload-zone {
|
||||
padding: 20px 16px !important;
|
||||
}
|
||||
|
||||
/* フィルターバー: wrapping は既存スタイルで対応済み、幅を補完 */
|
||||
.filter-bar {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
payroll-employees.html / payroll-settings.html (タブ UI)
|
||||
================================================================ */
|
||||
|
||||
.nav-tabs {
|
||||
flex-wrap: wrap !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 6px !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 8px 14px !important;
|
||||
font-size: 0.85rem !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
/* container の余白縮小 */
|
||||
.container {
|
||||
margin: 10px !important;
|
||||
padding: 16px 12px !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
payroll-settings.html (2/3カラムフォームグリッド → 1カラム)
|
||||
================================================================ */
|
||||
|
||||
.form-row {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.form-row-3 {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
payroll-calculation.html (月次給与計算)
|
||||
================================================================ */
|
||||
|
||||
/* フィルター行のラベルを縦積み */
|
||||
.filters {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 8px !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.filters label {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 4px !important;
|
||||
margin-right: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filters input,
|
||||
.filters select {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user