POS開発 フロントエンド チートコード — 基礎

1. HTML 基本

基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- コンテンツ -->
  <script src="app.js"></script>
</body>
</html>

よく使うフォーム要素（POS向け）

<!-- テキスト入力 -->
<input type="text" id="productName" placeholder="商品名">

<!-- 数値入力 -->
<input type="number" id="price" min="0" step="1" placeholder="価格">

<!-- 数量入力 -->
<input type="number" id="quantity" min="1" value="1">

<!-- セレクトボックス -->
<select id="category">
  <option value="">カテゴリを選択</option>
  <option value="food">食品</option>
  <option value="drink">飲料</option>
</select>

<!-- ボタン -->
<button type="button" id="addBtn">カートに追加</button>
<button type="submit">会計する</button>

テーブル（明細表示）

<table>
  <thead>
    <tr>
      <th>商品名</th><th>単価</th><th>数量</th><th>小計</th>
    </tr>
  </thead>
  <tbody id="cartBody">
    <!-- JSで動的に追加 -->
  </tbody>
</table>

data属性

<!-- HTML側 -->
<button data-product-id="101" data-price="500">商品A</button>

// JS側で取得
const btn = document.querySelector('button');
btn.dataset.productId;  // "101"  ※ケバブケース→キャメルケースに自動変換
btn.dataset.price;      // "500"  ※常に文字列で返る → Number()で変換

2. CSS 基本

セレクタ

/* 基本セレクタ */
.class-name { }           /* クラス */
#id-name { }              /* ID */
div p { }                  /* 子孫 */
div > p { }                /* 直接の子 */
div + p { }                /* 隣接兄弟 */

/* 擬似クラス */
button:hover { }           /* ホバー時 */
input:focus { }            /* フォーカス時 */
tr:nth-child(even) { }     /* 偶数行 */
li:first-child { }         /* 最初の子 */
li:last-child { }          /* 最後の子 */

/* 属性セレクタ */
[data-active="true"] { }   /* data属性で絞り込み */

Flexbox レイアウト

/* 横並び（中央揃え） */
.container {
  display: flex;
  justify-content: center;     /* 主軸: center | space-between | space-around */
  align-items: center;         /* 交差軸: center | flex-start | flex-end */
  gap: 16px;                    /* 要素間の隙間 */
}

/* 折り返し */
.wrap-container {
  display: flex;
  flex-wrap: wrap;
}

/* 子要素の伸縮 */
.item {
  flex: 1;                      /* 均等に広がる */
  flex: 0 0 200px;              /* 固定幅200px */
}

Grid レイアウト

/* 3列グリッド */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 等幅3列 */
  gap: 16px;
}

/* 自動フィット（レスポンシブ） */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

よく使うプロパティ

/* ボックスモデル */
margin: 16px;                  /* 外側の余白 */
padding: 12px 16px;            /* 内側の余白（上下 左右） */
border: 1px solid #ddd;
border-radius: 8px;

/* テキスト */
font-size: 16px;
font-weight: bold;
color: #333;
text-align: center;

/* 背景・影 */
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);

/* トランジション */
transition: all 0.3s ease;

レスポンシブ（Media Query）

/* モバイル: 640px以下 */
@media (max-width: 640px) {
  .container { flex-direction: column; }
}

/* タブレット以上 */
@media (min-width: 768px) {
  .sidebar { display: block; }
}