style.css

/*
* --- Font Face ---
* ローカルにインストールされたNoto Sans JPフォントを優先的に使用
*/
@font-face {
    font-family: "Local Noto Sans JP";
    src: local("Noto Sans JP");
}
/*
 * --- Theme Variables ---
 * テーマ全体で利用する色や影を変数として定義
 */
:root {
    --color-surface: #fcfcfc;
    --color-border: #ccc;
    --color-bg: #ffffff;
    --color-table-bg: #f7f7f7;
    --color-text: #000;
    --color-primary: #007fff;
    --color-primary-dark: #005fcc;
    --color-divider: #000;
    --color-white: #fff;
    /* リンクの色 */
    --color-link: var(--color-primary);
    --color-link-active: var(--color-primary-dark);
    /* マテリアルデザイン風のシャドウ */
    /* 凸 型 */
    --shadow-elevation: 0 0 4px rgba(0,0,0,0.15), 0 0 4px rgba(0,0,0,0.25);
    /* 凹 型 */
    --shadow-elevation-inset: inset 0 0 4px rgba(0,0,0,0.15), inset 0 0 4px rgba(0,0,0,0.25);
}

/* ダークモードのカラー変数 */
[data-theme="dark"] {
    --color-surface: #232323;
    --color-border: #444;
    --color-bg: #2c2c2c;
    --color-table-bg: #282828;
    --color-text: #f3f3f3;
    --color-divider: #444;
    /* ダークモードではリンク色を明るくする */
    --color-link: #f3f3f3;
    --color-link-active: #b5b5b5;
    /* ダークモード用のシャドウ */
    /* 凸 型 */
    --shadow-elevation: 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.6);
    /* 凹 型 */
    --shadow-elevation-inset: inset 0 0 4px rgba(0,0,0,0.4), inset 0 0 4px rgba(0,0,0,0.6);
}

/*
 * --- Base Styles ---
 * 基本的なHTML要素のスタイル
 */

* {
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    background-color: var(--color-bg);
    color: var(--color-text);
}

body {
    font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
    line-height: 1.9;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*
 * --- Layout Elements ---
 * ヘッダー、メインコンテンツ、フッターのレイアウト
 */
header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem;
    display: flex;
    box-shadow: var(--shadow-elevation);
    border-radius: 0 0 0.5rem 0.5rem; /* 下部に丸み */
}

/* main要素が利用可能な高さいっぱいに広がるように設定 */
main {
    flex: 1;
    padding: 1rem;
}

footer {
    text-align: center;
    padding: 1rem 0;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-elevation);
    border-radius: 0.5rem 0.5rem 0 0; /* 上部に丸み */
}

/*
 * --- Typography & Content Elements ---
 * 見出し、段落、画像などのスタイル
 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    margin: 0.25em 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-divider);
    margin: 0.2rem 0;
}

p {
    margin: 0;
}

/* 画像が親要素の幅を超えないようにし、シャドウを適用 */
img {
    max-width: 100%;
    height: auto;
    box-shadow: var(--shadow-elevation);
}

a {
    color: var(--color-link);
}

a:active{
    color: var(--color-link-active);
}

button {
    color: var(--color-text);
    background-color: var(--color-bg);
    border: var(--color-border) 1px solid;
    padding: 0.25rem 0.5rem;
    transition: background 0.2s, color 0.2s, transform 0.1s;
}

button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.04);
}

button:active {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: scale(0.97);
}

pre {
    background-color: var(--color-surface);
    border-radius: 0.5rem;
    padding: 1rem 1rem;
    white-space: pre;
    overflow-x: auto;
    box-shadow: var(--shadow-elevation-inset);
}

/*
 * --- Table Styles ---
 * テーブルのスタイル
 */

table {
    border-collapse:  collapse;     /* セルの線を重ねる */
    max-width: 100%;
    display: block;
    overflow-x: auto;
}

th,
td {
    border: var(--color-border) 1px solid;
    padding: 0.2rem 1rem;
}

th {
    text-align: left;
}
tr:nth-child(odd){
    background: var(--color-table-bg);
}

/*
 * --- ID Styles ---
 * IDセレクタで指定する固有の要素のスタイル
 */
#theme-toggle {
    background: none;
    border: none;
    font-size: 1.3em;
    cursor: pointer;
    transition: color 0.2s;
    color: inherit;
    outline: none;
}

/* キーボード操作時のフォーカスを視覚的に示す */
#theme-toggle:focus {
    outline: 2px solid var(--color-primary);
}

/*
 * --- Class Styles ---
 * クラスセレクタで指定する再利用可能なコンポーネントのスタイル
 */

/* サイトタイトル */
.title {
    line-height: 1.2;
    border-left: 0.1rem solid var(--color-text);
    padding: 0.5em;
    margin: 0.5rem 0;
    text-decoration: none;
}

.title h1 {
    font-weight: 300;
    margin: 0;
}

a.title {
    color: var(--color-text);
}

/* ナビゲーションメニュー */
.menu {
    display: flex;
    margin: auto 0;
    margin-left: auto;
    padding: 1rem;
}

/* ブログ記事の日付 */
.blog-date {
    color: var(--color-text);
    opacity: 0.7;
    font-size: 0.9em;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* スクリーンショット画像 */
.screenshot {
    max-width: 70%;
}

.mini-screenshot {
    max-width: 50%;
}

.micro-screenshot {
    max-width: 30%;
}

/* テーマ切り替えトグルスイッチ */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    /* 意図しないテキスト選択を防止 */
    user-select: none;
}

/* HTML上のチェックボックスを非表示にする */
.toggle-switch input[type="checkbox"] {
    display: none;
}

/* トグルスイッチのスライダー部分 */
.toggle-switch .slider {
    width: 36px;
    height: 20px;
    background: var(--color-border);
    border-radius: 999px;
    position: relative;
    transition: background 0.2s;
    margin: 0 0.5em 0 0;
    box-sizing: border-box;
}

/* トグルスイッチのつまみ */
.toggle-switch .slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: var(--color-bg);
    border-radius: 50%;
    transition: transform 0.2s;
}

/* チェック時にスライダーの背景色を変更 */
.toggle-switch input[type="checkbox"]:checked + .slider {
    background: var(--color-primary);
}

/* チェック時につまみを右に移動 */
.toggle-switch input[type="checkbox"]:checked + .slider::before {
    transform: translateX(16px);
}

.toggle-switch .toggle-icon {
    font-size: 1.2em;
    transition: color 0.2s;
    margin-left: 0.2em;
}

/*
 * --- Media Queries ---
 * レスポンシブデザインのためのスタイル
 */
@media (max-width: 680px) {
    header {
        flex-direction: column;
    }
    .menu {
        margin: 0.5rem 0 0 0;
        padding: 0;
        margin-left: 0;
    }
}