【商品管理アプリ】UI改善で学んだFlexレイアウトとCSS設計

はじめに

こちらで紹介したアプリのUIを修正してみたのでまとめます。

修正点

今回修正した点は以下の3点です。

• ホーム画面にダッシュボードを実装するためメニュー表示をサイドバーに移動
• 商品登録画面の入力フォームがスクロールなしで収まるよう2カラム化
• ボタン色を機能に合わせて変更

サイドメニューの実装

修正前

実装後（照会・編集ボタンにホバーした状態）
ダッシュボードは未実装のため、仮のものを表示しています。

サイドバーは全メニューで表示するため、フラグメントを使い共通化しています。

sidebar.html

<div class="side" th:fragment="sidebar">
    <a class="side-btn" href="/productcreate">
        <i class="bi bi-camera-fill"></i>
        <span>商品登録</span>
    </a>

画面全体の構成

home.html

<div class="main-layout"> <!-- 画面全体のレイアウト -->
		
    <aside class="sidebar"> <!-- サイドバー(フラグメントで呼び出し） -->
		<div th:replace="fragments/sidebar :: sidebar"></div>
	</aside>
		
	<div class="content"> <!-- サイドバーの右側のメインコンテンツ -->

style.css

.main-layout {
	display: flex; /* 👈サイドバーとコンテンツを並列するためのflex */
	min-height: calc(100vh - 50px); /* ヘッダーを除いた高さを確保 */
    gap: 10px;
}

.side {
  background-color: #F5FAFC;
  width:160px;
  display:flex; /*👈メニューボタンを縦に並べるためのflex */
  justify-content: flex-start;
  flex-direction: column; 
  text-align:center;
  margin-top:50px;
  min-height: 100vh;
} 

.content {
  width:1100px;
  text-align:center;
}

main-layoutのなかにsidebarとcontentを配置しています。
CSSではmain-layoutとsideのそれぞれにflexがついていますが、

main-layoutのflex: サイドバーとコンテンツの並列のため
sideのflex： メニューボタンを縦に表示するため

とそれぞれの役割があります。

商品登録画面のレイアウト修正

修正前

フォーム幅が狭く、スクロールしなければ内容が確認できませんでした。

修正後

フォーム幅を広げ、左カラムを画像選択、右カラムをフォームの2カラムにすることで、一画面に収めることができました。

style.css

/* 2カラム全体のラッパー */
.two-col-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-top: 24px;
  text-align: left;
}

/* 左カラム：画像エリア */
.col-image {
  flex: 0 0 200px; /* 幅固定・縮まない */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 右カラム：フォーム */
.col-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

全体、左カラム、右カラムのCSSをそれぞれ作成しました。

ボタン色の変更

修正前

テーマカラーでの統一感をもたせたくて、すべて同じ色になっています。

修正後

削除ボタンを赤、キャンセルを白とグレーの配色にすることで、画面全体で見た時にもボタンの機能が分かりやすくなりました。

CSSに、通常のbtnクラスに加えてキャンセルボタン、削除ボタン用のクラスを作成しました。

HTMLではbtnとbtn-cancelの両方のクラスを指定することで、共通スタイルを継承しつつ色だけを変更できます。

style.css

.btn-cancel {
	background-color: #FFFFFF;
	border: 1px solid;
	border-color: gray;
	color: gray;
}
.btn-delete {
	background-color:#DF7474;
}

おわりに

当初はBootstrapを取り入れていましたが、今回の修正で既存のCSSと競合して表示が崩れることがあり、最終的にBootstrapは削除しました。

レイアウトが思った通りにならず何度も崩れてしまいましたが、
その過程で「どの要素に対して、なぜそのCSSが効いているのか」を
HTMLとCSSの構造から考えるいい機会になりました。

今回の修正で、FlexboxやCSS設計の重要性を学ぶことができました。
今後はダッシュボード画面の実装とUXの改善に取り組もうと思います。