Update style.css

assets/css/style.css

@@ -1,117 +1,30 @@
 /* コンテナ全体のスタイル */
 .container {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* サイドバーのスタイル */
-.sidebar {
-  width: 250px; /* 初期幅を250pxに設定 */
-  min-width: 150px; /* 最小幅を150pxに設定 */
-  max-width: 500px; /* 最大幅を500pxに設定 */
-  background-color: #f5f5f5;
-  overflow: auto;
-  transition: width 0.2s ease; /* 幅が変わるときのスムーズなアニメーション */
-}
-
-/* サイドバー内のタイトル */
-.sidebar h3 {
-  font-size: 1.2em;
-  margin-bottom: 10px;
-}
-
-/* サイドバーのリストスタイル */
-.sidebar ul {
-  list-style-type: none; /* デフォルトのリストマーカーを削除 */
-  padding-left: 0;
-  margin: 0; /* 余白をリセット */
-  width: 100%; /* サイドバーの幅に追随する */
-}
-
-/* リスト項目 */
-.sidebar li {
-  margin-bottom: 10px;
-  word-wrap: break-word; /* 長い単語を折り返す */
-  white-space: normal; /* テキストを折り返して幅に合わせる */
-}
-
-/* リンクのスタイル */
-.sidebar li a {
-  text-decoration: none;
-  color: #333;
-  display: block; /* リンクをブロック要素にして親の幅に合わせる */
-  font-size: 1em;
-  line-height: 1.2em;
-  width: 100%; /* リンクも幅に追随する */
-  box-sizing: border-box; /* パディングを含めて幅を調整 */
-  overflow-wrap: break-word; /* テキストを折り返す */
-}
-
-/* リンクのホバー時の色変更 */
-.sidebar li a:hover {
-  color: #007BFF;
-}
-
-/* ネストされたリストのインデント */
-.sidebar li ul {
-  padding-left: 20px;
-}
-
-/* リサイズバーのスタイル */
-#dragbar {
-  width: 5px;
-  cursor: col-resize;
-  background-color: #ddd;
-  position: relative;
-  z-index: 10;
+  display: block;
+  height: auto;
+  overflow: visible;
 }
 
 /* メインコンテンツのスタイル */
 .content {
-  flex-grow: 1;
-  overflow: auto;
+  width: 100%;
   padding: 20px;
 }
 
 /* サムネイル画像のスタイル */
 .thumbnail {
   width: 100%;             /* 親要素の幅に合わせる */
-  max-width: 100px;         /* サムネイルの最大幅を100pxに制限 */
+  max-width: 300px;         /* 最大幅を300pxに設定（必要に応じて調整） */
   height: auto;             /* アスペクト比を維持して高さを自動設定 */
-  display: block;           /* ブロック要素として扱い、他の要素と独立させる */
+  display: block;
   margin: 10px auto;        /* 上下に10pxのマージンを設定し、中央揃え */
-  border-radius: 5px;       /* 角を丸くする（任意） */
+  border-radius: 5px;
 }
 
-/* レスポンシブ対応 */
-@media (max-width: 768px) {
-  .container {
-    flex-direction: column;
-  }
-
-  .sidebar {
-    width: 100%;
-    height: 250px; /* 高さを固定 */
-    min-height: 150px;
-    max-height: 500px;
-    position: relative;
-  }
-
-  #dragbar {
-    width: 100%;
-    height: 5px;
-    cursor: row-resize; /* 縦方向のリサイズカーソル */
-  }
-
-  .sidebar li a {
-    font-size: 0.9em; /* サイドバーが狭くなったときのフォントサイズ調整 */
-  }
-}
-
-@media (max-width: 600px) {
-  /* サイドバーがさらに狭くなったときのフォントサイズ調整 */
-  .sidebar li a {
-    font-size: 0.8em;
-  }
+/* その他の基本スタイル */
+h1, h2, h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  font-weight: bold;
+  line-height: 1.2em;
 }