・表を中央ぞろえにしました。

・追加ボタンを右下に置きました。

frontend/src/pages/StockPage.tsx

@@ -114,10 +114,10 @@ const StockPage: React.FC = () => {
       const expDateOnly = new Date(exp);
       expDateOnly.setHours(0, 0, 0, 0);
 
-      console.log("新規作成buy:", buy);
-      console.log("新規作成exp:", exp);
-      console.log("新規作成buyDateOnly:", buyDateOnly);
-      console.log("新規作成expDateOnly:", expDateOnly);
+      // console.log("新規作成buy:", buy);
+      // console.log("新規作成exp:", exp);
+      // console.log("新規作成buyDateOnly:", buyDateOnly);
+      // console.log("新規作成expDateOnly:", expDateOnly);
 
       if (buyDateOnly.getTime() > expDateOnly.getTime()) {
         alert("購入日は消費・賞味期限より前の日付を設定してください。");
@@ -238,10 +238,10 @@ const StockPage: React.FC = () => {
     buyDateOnly.setHours(0, 0, 0, 0);
     const expDateOnly = new Date(exp);
     expDateOnly.setHours(0, 0, 0, 0);
-    console.log("編集buy:", buy);
-    console.log("編集exp:", exp);
-    console.log("編集buyDateOnly:", buyDateOnly);
-    console.log("編集expDateOnly:", expDateOnly);
+    // console.log("編集buy:", buy);
+    // console.log("編集exp:", exp);
+    // console.log("編集buyDateOnly:", buyDateOnly);
+    // console.log("編集expDateOnly:", expDateOnly);
 
     if (buy > exp) {
       alert("購入日は消費・賞味期限より前の日付を設定してください。");
@@ -332,9 +332,9 @@ const StockPage: React.FC = () => {
           <Table>
             <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
               <TableRow>
-                <TableCell>食材名</TableCell>
-                <TableCell>数量</TableCell>
-                <TableCell>消費・賞味期限</TableCell>
+                <TableCell align="center" sx={{ width: '30%' }}>食材名</TableCell>
+                <TableCell align="center" sx={{ width: '30%' }}>数量</TableCell>
+                <TableCell align="center" sx={{ width: '40%' }}>消費・賞味期限</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -349,11 +349,11 @@ const StockPage: React.FC = () => {
                 const timeDiff = expDateOnly.getTime() - todayDateOnly.getTime();
                 const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
 
-                console.log("テーブルtoday:", today);
-                console.log("テーブルexp:", expDate);
-                console.log("テーブルtodayDateOnly:", todayDateOnly);
-                console.log("テーブルexpDateOnly:", expDateOnly);
-                console.log("日数差:", daysLeft);
+                // console.log("テーブルtoday:", today);
+                // console.log("テーブルexp:", expDate);
+                // console.log("テーブルtodayDateOnly:", todayDateOnly);
+                // console.log("テーブルexpDateOnly:", expDateOnly);
+                // console.log("日数差:", daysLeft);
 
                 return (
                   <TableRow
@@ -361,9 +361,9 @@ const StockPage: React.FC = () => {
                     onClick={() => handleRowClick(stock)}
                     style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
                   >
-                    <TableCell>{stock.stuffName}</TableCell>
-                    <TableCell>{stock.amount}</TableCell>
-                    <TableCell
+                    <TableCell align="center" sx={{ width: '30%' }}>{stock.stuffName}</TableCell>
+                    <TableCell align="center" sx={{ width: '30%' }}>{stock.amount}</TableCell>
+                    <TableCell align="center" sx={{ width: '40%' }}
                       style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
                     >
                       {formatDate(stock.expDate)}
@@ -528,12 +528,12 @@ const StockPage: React.FC = () => {
 
   return (
     <Container>
-      <Typography variant="h3" component="h1" gutterBottom>
+      <Typography variant="h3" component="h1" sx={{ mb: 4 }} >
         在庫リスト
       </Typography>
 
       {/* <Box sx={{ textAlign: 'right' }}> */}
-      <Box
+      {/* <Box
         sx={{
           position: 'sticky',
           top: 0,
@@ -546,6 +546,19 @@ const StockPage: React.FC = () => {
           borderBottom: 'none', // ← これで線を消す
           boxShadow: 'none',    // ← 影も消す
         }}
+      > */}
+        <Box
+          sx={{
+            position: 'fixed',     // ← sticky から fixed に変更
+            bottom: 0,             // ← 下に固定
+            left: 0,
+            right: 0,
+            zIndex: 1300,          // ダイアログよりは低く
+            backgroundColor: '#f5f5f5',
+            padding: 2,
+            display: 'flex',
+            boxShadow: 'none', // 軽めの上向きシャドウ
+          }}
         >
 
           {/* 在庫の食材追加ボタン */}
@@ -564,11 +577,12 @@ const StockPage: React.FC = () => {
         >
           <AddIcon />
         </Fab> */}
-        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
+      ml: 90, }}>
             <Typography variant="caption" color="textSecondary">
               食材の追加
             </Typography>
-          <Fab color="primary" onClick={handleOpenAdd}>
+            <Fab color="primary" onClick={handleOpenAdd} >
               <AddIcon />
             </Fab>
           </Box>
@@ -761,6 +775,7 @@ const StockPage: React.FC = () => {
         <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
           {StockTable(stocks, ["その他"])}
         </div>
+        <Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
     </Container>
   );
 };