UIの改善

src/features/CreateKnowledgeFeature.tsx

@@ -10,7 +10,12 @@ export function CreateKnowledgeFeature() {
             <label class="block text-sm font-medium mb-2" for="content">
               内容（Markdown形式）
             </label>
-            <input name="title" placeholder="タイトルを入力してください" required />
+            <input
+              class="w-full h-8 p-2 border border-gray-300 rounded mb-2"
+              name="title"
+              placeholder="タイトルを入力してください"
+              required
+            />
 
             <textarea
               class="w-full h-64 p-2 border border-gray-300 rounded"

src/features/KnowledgeDetailFeature.tsx

@@ -9,12 +9,24 @@ interface Props {
 export function KnowledgeDetailFeature({ knowledge }: Props) {
   return (
     <Layout title="ナレッジの詳細">
-      <div>{knowledge.content}</div>
-      <a href={`/edit/${knowledge.knowledgeId}`}>編集</a>
+      <div class="text-3xl flex justify-center mb-6">{knowledge.content}</div>
+      <a
+        class="px-4 py-2 flex justify-center bg-red-500 text-white rounded hover:bg-red-600 transition-colors duration-200 mb-4"
+        href={`/edit/${knowledge.knowledgeId}`}
+      >
+        編集
+      </a>
       <form action={`/Knowledge/${knowledge.knowledgeId}/delete`} method="post">
-        <button type="submit">削除</button>
+        <button
+          class="px-4 py-2 flex justify-center bg-red-500 text-white rounded hover:bg-red-600 transition-colors duration-200 mb-4"
+          type="submit"
+        >
+          削除
+        </button>
       </form>
-      <a href={`/`}>ホーム</a>
+      <a class="px-4 py-2 flex justify-center bg-gray-300 text-gray-700 rounded hover:bg-gray-400 mb-4" href={`/`}>
+        ホーム
+      </a>
     </Layout>
   );
 }

src/features/KnowledgeListFeature.tsx

@@ -9,9 +9,12 @@ interface Props {
 export function KnowledgeListFeature({ knowledges }: Props) {
   return (
     <Layout title="ナレッジ一覧">
-      <div>
-        <a class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400" href="/create">
-          ジャンプ
+      <div class="mt-8 flex justify-center mb-4">
+        <a
+          class="px-8 py-4 text-xl bg-blue-500 text-white font-bold rounded-lg shadow-md hover:bg-blue-600 transition-colors duration-200"
+          href="/create"
+        >
+          投稿する
         </a>
       </div>
 
@@ -20,16 +23,21 @@ export function KnowledgeListFeature({ knowledges }: Props) {
           {knowledges
             .sort((a, b) => b.updatedAt - a.updatedAt)
             .map((knowledge) => (
-              <li key={knowledge.knowledgeId}>
+              <li class="border-b py-4 text-center" key={knowledge.knowledgeId}>
+                <a
+                  class="text-xl text-blue-600 hover:text-blue-800 hover:underline transition-colors duration-200"
+                  href={`/Knowledge/${knowledge.knowledgeId}`}
+                >
+                  {knowledge.title}
+                </a>
                 <div>作成日: {formatDate(knowledge.createdAt)}</div>
                 <div>更新日: {formatDate(knowledge.updatedAt)}</div>
-                <a href={`/Knowledge/${knowledge.knowledgeId}`}>{knowledge.title}</a>
               </li>
             ))}
         </ul>
       ) : (
         <ul>
-          <li>投稿済みのナレッジは 0 件です</li>
+          <li class="text-center text-xl text-gray-600 italic mt-8">投稿済みのナレッジは 0 件です</li>
         </ul>
       )}
     </Layout>