From baab9b648cc2ee68f7aaa41b41e8bc8193964f2e Mon Sep 17 00:00:00 2001 From: Hiroyuki TAKAHASHI Date: Tue, 24 Sep 2024 17:47:06 +0900 Subject: [PATCH] Update style.css --- assets/css/style.css | 113 +++++-------------------------------------- 1 file changed, 13 insertions(+), 100 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index d4ef4fa..0b17c08 100644 --- a/assets/css/style.css +++ b/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; }