https://ryo9663.github.io/mypage/ Recent content on Mypage Hugo ja-jp Sat, 07 Mar 2026 10:24:12 +0900 https://ryo9663.github.io/mypage/post/first-post/ Sat, 07 Mar 2026 10:24:12 +0900 https://ryo9663.github.io/mypage/post/first-post/ <style> /* 1. 親要素のリセット（はみ出し防止） */ article, .post-content, .nested-copy-line-height { max-width: 900px !important; padding: 20px !important; margin: 0 !important; } /* 2. テーブル：横幅いっぱい・均等固定 */ table { border-collapse: collapse !important; width: 100% !important; table-layout: fixed !important; margin: 1rem 0 !important; border: 2px solid #333 !important; overflow-x: auto; } /* 3. セル：【ここを修正】すべての文字を上下左右中央へ */ td, th { padding: 0 !important; border: 1px solid #666 !important; height: 80px; /* 高さを少し出すと見やすいです */ text-align: center !important; /* 左右中央（通常文字用） */ vertical-align: middle !important; /* 上下中央 */ } /* 4. 出席したコマの枠組み（ベタ塗りをやめる） */ .attended { display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 100% !important; margin: 0 !important; } /* 5. 時間割のリンクすべてを「ぷっくりボタン」にする */ td a { display: flex !important; align-items: center; justify-content: center; width: 85% !important; /* セルとの間に隙間を作ってボタン感を出す */ height: 75% !important; /* 高さを絞る */ margin: auto !important; /* 中央寄せ */ border-radius: 8px; /* 角を丸く */ background-color: #f8f9fa; /* 出席タグがないコマは薄いグレー */ border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ほんのり影をつける */ text-decoration: none !important; color: #333 !important; font-weight: bold; font-size: 0.9rem; transition: all 0.2s ease; /* ホバー時の動きを滑らかに */ } /* 6. 出席したコマ（.attended）の中のボタンは黄色くする */ .attended a { background-color: #fff9c4 !important; border-color: #ffd54f !important; } /* 7. マウスを乗せた時（ホバー）の浮き上がる動き */ td a:hover { transform: translateY(-2px); /* 少し上に動く */ box-shadow: 0 5px 12px rgba(0,0,0,0.1); /* 影を濃くして立体感を出す */ background-color: #ffe082 !important; /* マウスを乗せたら少し濃い黄色に光る */ } /* 星評価のスタイル設定 */ .review-table { max-width: 500px !important; /* 評価表は少しコンパクトに */ margin: 20px auto !important; font-weight: bold; } .stars { color: #ffca28; /* 黄色（★） */ font-size: 1.4rem; letter-spacing: 4px; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); } .star-gray { color: #e0e0e0 !important; /* 灰色（☆） */ text-shadow: none; } .review-label { background-color: #f5f5f5; width: 40%; } /* 星なし・コメントのみの場合のスタイル */ .review-comment-only { color: #333; font-size: 1rem; font-weight: normal; /* 星がない分、少しだけ目立たせるなら */ border-left: 3px solid #ffca28; /* 左側に黄色の線を添えるとお洒落 */ padding-left: 10px; } html { scroll-behavior: smooth; } /* ジャンプ先の見出しが隠れないよう隙間を作る */ h4 { scroll-margin-top: 80px; } /* ======== 目次（INDEX）のスタイル ======== */ .custom-toc { background-color: #fbfbfb; border: 1px solid #eeeeee; border-radius: 10px; padding: 25px; margin: 40px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.03); } /* タイトルの装飾 */ .toc-title-wrapper { text-align: center; } .toc-title { font-weight: bold; font-size: 1.2rem; color: #444; margin-bottom: 20px; letter-spacing: 2px; border-bottom: 3px solid #ffca28; /* アクセントの黄色線 */ display: inline-block; padding: 0 10px 5px; } /* ボタンを横に並べる設定（PCなら2列、スマホなら自動で1列） */ .custom-toc ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; /* ボタン同士の隙間 */ } .custom-toc li { margin: 0 !important; } /* リンク（ボタン）の見た目 */ .custom-toc a { display: block !important; padding: 12px 15px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 6px; color: #333 !important; text-decoration: none !important; font-size: 0.95rem; font-weight: bold; text-align: center; transition: all 0.2s ease; } /* マウスを乗せた時の動き */ .custom-toc a:hover { background-color: #fff9c4 !important; /* 米田さんの出席色（黄色） */ border-color: #ffd54f; transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.08); } /* パターンA：蛍光ペン風のマーカー（一番おすすめ） */ .marker-yellow { background: linear-gradient(transparent 60%, #ffe082 40%); font-weight: bold; padding: 0 2px; } /* パターンB：赤色の波線・点線（ガチの警告用） */ .warning-line { border-bottom: 2px dashed #e53935; /* 赤い点線 */ color: #d32f2f; /* 文字も少し赤くする */ font-weight: bold; padding-bottom: 2px; } /* ======== 成績まとめ・GPAのスタイル ======== */ .gpa-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 30px 0; } .gpa-card { background-color: #fbfbfb; border-left: 5px solid #e0e0e0; border-radius: 8px; padding: 15px 20px; width: 28%; min-width: 140px; text-align: center; box-shadow: 0 3px 6px rgba(0,0,0,0.04); } /* 総合GPAだけ色を変えて目立たせる */ .gpa-card.total { border-left-color: #ffca28; /* 黄色 */ background-color: #fffde7; /* 薄い黄色 */ } .gpa-card h4 { margin: 0 0 5px 0 !important; color: #666; font-size: 0.9rem; } .gpa-score { font-size: 2rem; font-weight: 900; color: #333; font-family: 'Arial Black', sans-serif; } /* 成績集計表（高さをコンパクトにする） */ .grade-table { max-width: 600px !important; margin: 0 auto 40px auto !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .grade-table th { background-color: #f5f5f5 !important; height: 40px !important; /* 全体設定の80pxを上書き */ font-size: 0.9rem; } .grade-table td { height: 40px !important; /* 全体設定の80pxを上書き */ font-size: 1rem; } /* 合計の行を少し目立たせる */ .grade-table .total-row td { font-weight: bold; background-color: #fafafa !important; } </style> <p>２０２５年度入学の(りょう)^2です. 無事先日１年の科目の成績が帰ってきたのでレビューを書きました. 他の方がやっているように自分のサイトにも憧れていたので作ってみました. ここでは各科目を受けて自分の感じたことなどまとめます.</p>