目的
カスタム CSS を備忘録として残す
CSS (2023-09-29)
/* Please visit the URL below for more information: */ /* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */ .markdown-preview.markdown-preview { // modify your style here // eg: background-color: blue; font-family: "hackgen"; // background-color: #141414; // color: #a6a6a6; background-color: #ffffff; color: #525252; h1 { background-color: #333; color: white; // color: #f39c12; /* オレンジ系の色でテキストをハイライト */ // font-size: 2.5em; /* 標準的な文書のフォントサイズより大きく */ font-size: 3.5em; /* 標準的な文書のフォントサイズより大きく */ padding-top: 10px; padding-left: 10px; /* バーとテキストの間のスペース */ margin-bottom: 10px; /* 下の要素との間隔 */ border-left: 10px solid #754c0b; /* 左端に縦のバー */ border-top: 2px solid #f39c12; /* アンダーバー */ border-bottom: 2px solid #f39c12; /* アンダーバー */ } h2 { position: -webkit-sticky; /* Safariのためのプレフィックス */ position: sticky; top: 5px; background-color: #444; font-size: 2em; color: white; // color: #f39c12; /* オレンジ系の色でテキストをハイライト */ border-left: 4px solid #e67e22; padding-top: 10px; padding-left: 10px; margin-bottom: 8px; border-bottom: 2px solid #e67e22; border-top: 2px solid #e67e22; } /* h2要素の直後の要素のスタイル */ h2 + * { padding-top: 10px; /* h2要素との間にスペースを追加 */ } h3 { background-color: #555; font-size: 1.75em; color: white; padding-left: 10px; margin-top: 6px; margin-bottom: 6px; border-top: 2px solid #d35400; border-bottom: 2px solid #d35400; } h4 { font-size: 1.5em; color: #525252; padding-left: 10px; margin-bottom: 5px; border-bottom: 1px solid #c0392b; } h5 { font-size: 1.25em; color: #525252; padding-left: 10px; border-bottom: 1px dashed #c0392b; } /* テーブルの基本スタイル */ table { border-collapse: collapse; margin-bottom: 20px; } /* テーブルヘッダのスタイル */ th { background-color: #444; /* 深いグレー */ color: #f39c12; /* オレンジ系の色でテキストをハイライト */ padding: 10px; border: 1px solid #333; /* ボーダーの色 */ text-align: left; } /* テーブルボディのスタイル */ td { background-color: #555; /* やや明るいグレー */ color: #e6e6e6; /* テキストの色 */ padding: 10px; border: 1px solid #444; /* ボーダーの色 */ } code { font-size: 1.10em; font-family: "hackgen"; } // TOC に関する CSS .md-toc .md-toc-link { position: relative; /* 疑似要素の基準となる位置を設定 */ display: inline-block; /* インラインブロック要素として扱う */ width: calc(100% - 30px); /* 親要素の全幅からアイコンの幅を引いた値を設定 */ text-decoration: none; /* 通常のテキスト下線を削除 */ } .md-toc .md-toc-link::after { content: ""; /* 疑似要素の内容 */ position: absolute; /* 絶対位置を指定 */ left: 0; /* 左端から0の位置に配置 */ right: 0; /* 右端から0の位置に配置 */ bottom: 0; /* 下端から0の位置に配置 */ border-bottom: 1px solid #cccccc; /* 薄い色の下線 */ } }