小さい文字の対応とその他調整

Author: ShuntaToda

README.md

@@ -239,6 +239,16 @@ https://classmethod.github.io/classmethod-marp-theme/index.html
 ヘッダーが表示されないスライド
 ```
 
+#### 文字を小さくする
+```markdown
+<!-- _class: small-text -->
+
+# 文字を小さくする
+
+スライド全体のフォントサイズが20%程度縮小されます。
+情報量が多いスライドや、通常のサイズでは収まりきらない内容を表示する際に便利です。
+```
+
 ## マークダウン要素のスタイリング
 
 ### 見出し（Headings）

classmethod-theme.css

@@ -41,10 +41,12 @@
     /* アクセント背景色 */
     --bg-accent-code: #e1e1e1;
 
+    /* 注釈 */
+    --border-color: #D9D9D9;
 
 
     /* フォントサイズ変数 */
-    --font-size-title: 40px;
+    --font-size-title: 38px;
 
     /* タイトル */
     --font-size-large: 36px;
@@ -64,10 +66,6 @@
     /* キャプション */
     --font-size-note: 16px;
 
-    /* 注釈 */
-    --border-color: #D9D9D9;
-
-
     /* 行間変数 */
     --line-height-tight: 1.15;
 
@@ -85,6 +83,46 @@
     --border-width: 1.47px;
 }
 
+section.small-text {
+    /* フォントサイズ変数（20%程度縮小） */
+
+    /* タイトル */
+    --font-size-large: 29px;
+
+    /* 大きなテキスト */
+    --font-size-medium: 26px;
+
+    /* 中サイズテキスト */
+    --font-size-body: 21px;
+
+    /* 本文サイズ */
+    --font-size-small: 18px;
+
+    /* 小さなテキスト */
+    --font-size-caption: 16px;
+
+    /* キャプション */
+    --font-size-note: 13px;
+
+    /* 行間変数 */
+
+    /* 狭い行間 */
+    --line-height-tight: 1;
+
+    /* 標準行間 */
+    --line-height-normal: 1.1;
+
+    /* 広い行間 */
+    --line-height-loose: 1.3;
+
+    /* レイアウト */
+    --slide-width: 1920px;
+    --slide-height: 1080px;
+    --content-padding: 92px;
+    --border-radius: 8px;
+    --border-width: 1.47px;
+}
+
 *:not(code *) {
     color: var(--gray-medium);
 }
@@ -96,52 +134,58 @@ h1 {
     font-size: var(--font-size-title);
     line-height: var(--line-height-tight);
     font-weight: 600;
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+    padding-bottom: 0;
 }
 
 h2 {
     font-size: var(--font-size-large);
     line-height: var(--line-height-tight);
     font-weight: 600;
-    margin-top: 8px;
-    margin-bottom: 8px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding-bottom: 0;
 }
 
 h3 {
     font-size: var(--font-size-medium);
     color: var(--gray-medium);
     line-height: var(--line-height-normal);
     font-weight: 600;
-    margin-top: 6px;
-    margin-bottom: 6px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding-bottom: 0;
 }
 
 h4 {
     font-size: var(--font-size-body);
     color: var(--gray-medium);
     line-height: var(--line-height-normal);
     font-weight: 600;
-    margin-top: 6px;
-    margin-bottom: 6px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding-bottom: 0;
 }
 
 h5 {
     font-size: var(--font-size-small);
     color: var(--gray-medium);
     line-height: var(--line-height-normal);
     font-weight: 600;
-    margin-top: 6px;
-    margin-bottom: 6px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding-bottom: 0;
 }
 
 h6 {
     font-size: var(--font-size-caption);
     color: var(--gray-medium);
     line-height: var(--line-height-normal);
     font-weight: 600;
-    margin-top: 6px;
-    margin-bottom: 6px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding-bottom: 0;
 }
 
 h1>strong,
@@ -156,30 +200,30 @@ h6>strong {
 /* 本文・段落 */
 p {
     font-size: var(--font-size-body);
-    color: var(--gray-dark);
+    color: var(--gray-medium);
     line-height: var(--line-height-loose);
-    margin-bottom: 16px;
+    margin-bottom: 8px;
     margin-top: 0;
 }
 
 /* リスト */
 ul,
 ol {
     font-size: var(--font-size-body);
-    color: var(--gray-dark);
+    color: var(--gray-medium);
     line-height: var(--line-height-loose);
     padding-left: 0px;
-    margin-top: 8px;
-    margin-left: 16px;
-    margin-bottom: 14px;
+    margin-top: 0;
+    margin-left: 22px;
+    margin-bottom: 8px;
+}
 
-    >li:first-child {
-        margin-top: 0;
-    }
+ol {
+    margin-left: 32px;
 }
 
 li {
-    padding-top: 8px;
+    padding-top: 6px;
 
     ul,
     ol {
@@ -188,6 +232,33 @@ li {
         margin-top: 0;
     }
 
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &+li {
+        margin-top: 0;
+    }
+
+    &::marker {
+        margin-left: 6px;
+    }
+
+}
+
+/* 見出し直後のリストのマージンを削除 */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+
+    &+ul,
+    &+ol {
+        margin-top: 0;
+    }
 }
 
 code {
@@ -209,6 +280,7 @@ em {
 :is(pre, marp-pre) {
     background-color: var(--bg-accent-code);
     font-size: var(--font-size-small);
+    margin-bottom: 8px;
 }
 
 /* 引用 */
@@ -217,7 +289,7 @@ blockquote {
     color: var(--gray-medium);
     border-left: 4px solid var(--gray-light);
     padding-left: 1rem;
-    margin: 1rem 0;
+    margin: 12px 0;
     font-style: italic;
 
     &::after {
@@ -277,7 +349,6 @@ table {
             }
         }
     }
-
 }
 
 

debug/debug-slide.md

@@ -18,7 +18,7 @@ description: ClassMethodテーマの各クラスのテスト用スライド
 
 ---
 
-<!-- _class: section -->
+<!-- _class: section small-te -->
 <!-- _paginate: false -->
 
 ## sectionクラスのテスト
@@ -425,6 +425,33 @@ console.log(result);
 
 ---
 
+<!-- _class: small-text -->
+
+# small-textクラスのテスト
+
+# 見出しレベル1
+
+## 見出しレベル2
+
+### 見出しレベル3
+
+#### 見出しレベル4
+
+##### 見出しレベル5
+
+###### 見出しレベル6
+
+通常の段落テキスト
+
+- リスト項目1
+- リスト項目2
+  - リスト項目3
+1. 番号付きリスト項目1
+2. 番号付きリスト項目2
+   1. ネストされた番号付きリスト項目1
+
+---
+
 <!-- _class: all-text-center align-center -->
 
 ![w:450px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg)

index.html

@@ -11,7 +11,7 @@ description: サンプルスライドです。
 特にスライド上部にある"_class: "は大切な要素なので間違えないようにしてください
  -->
 
-<!-- _class: title -->
+<!-- _class: title　-->
 <!-- _paginate: false -->
 
 ![classmethod-logo w:400px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg)
@@ -359,6 +359,16 @@ $$
 
 ---
 
+<!-- _class: small-text -->
+
+# 文字を小さくする
+
+`small-text` クラスを使用すると、スライド全体のフォントサイズが20%程度縮小されます。
+
+情報量が多いスライドや、通常のサイズでは収まりきらない内容を表示する際に便利です。
+
+---
+
 <!-- _class: all-text-center align-center -->
 
 ![w:450px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg)