@charset “UTF-8”; /* MDwikiに外部CSSファイルを読み込ませるため、 という行をあらかじめ追加しておく */ /* ----基本設定（400px以下） ---------------------------------------------- */ /* フォント */ html, body, #md-title h1, #md-content :not(i){font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3','ヒラギノ角ゴシック','Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro','Hiragino Sans',"游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,"游ゴシック","Yu Gothic",Yu-gothic,verdana,'ＭＳ Ｐゴシック',sans-serif,system-ui;} #md-content pre code, #md-content pre, #md-content code, #md-content var, #md-content samp, #md-content kbd{font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace, 'Courier New', Courier, Monaco;} /* #md-menu */ #md-all{overflow-x:hidden;} #md-menu a.navbar-brand{font-size:15px!important;} /* フォントサイズ固定 */ #md-menu ul.nav.navbar-nav>*:not(li){display:none;} /* ----navigation.mdにメニュー項目以外の情報を記述をしてもナビゲーションバーには表示されないようにする -- */ #md-menu a.navbar-brand{max-width:80%;} /* #md-title-container */ body{overflow-x:hidden;} /* マイナスマージンで.page-header要素を幅100%以上にするための準備 */ #md-title-container.container{margin-top:-10px; margin-bottom:40px; background-color:#fff;} /* タイトル背景 */ #md-title-container.container .page-header{margin:0 -50px; padding:55px 50px 50px; background:#666 url(./img/background.jpg) no-repeat center center; background-size:cover;} #md-title h1{margin:0;padding:0;} #md-title h1{font-size:20px;font-weight:bold;color:#fff;} /* #md-menu-container */ /* #md-left-column */ #md-left-column #md-page-menu{margin-top:10px;margin-bottom:70px;} /* #md-content */ #md-content *:not(i){font-size:16px; line-height:1.7;} #md-content h1{font-size:20px; font-weight:bold; line-height:1.2;} #md-content h2{font-size:20px; font-weight:bold; line-height:1.2;} #md-content h3{font-size:16px; font-weight:bold; line-height:1.2; font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace, 'Courier New', Courier, Monaco;} #md-content h4{font-size:16px; font-weight:normal; line-height:1.2; font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace, 'Courier New', Courier, Monaco;} #md-content h5{font-size:16px; font-weight:normal; line-height:1.2; font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace, 'Courier New', Courier, Monaco;} #md-content h6{font-size:16px; font-weight:normal; line-height:1.2; font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace, 'Courier New', Courier, Monaco;} #md-content li, #md-content li *, #md-content dd, #md-content dd *, #md-content pre code{line-height:1.2;} #md-content pre code{font-size:14px;} /* 上下のマージン */ #md-content h1, #md-content h2, #md-content h3, #md-content h4, #md-content h5, #md-content h6, #md-content p, #md-content ol, #md-content ul, #md-content dl, #md-content table, #md-content pre, #md-content blockquote, #md-content hr, #md-content h1, #md-content h2{margin:10px 0;} #md-content *+h1, #md-content *+h2{margin-top:80px;} #md-content a.visible-xs.visible-sm.jumplink+h3{margin-top:20px;} #md-content *+h3{margin-top:30px;} #md-content *+h4{margin-top:30px;} #md-content *+h5{margin-top:30px;} #md-content *+h6{margin-top:30px;} #md-content li p, #md-content li a{margin:0;} /* ----brockquoteの修飾---- */ #md-content blockquote{padding:10px 10px 10px 40px; background-color:aliceblue; border:1px solid lavender;} #md-content blockquote{position:relative;} #md-content blockquote:after{font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f10d"; font-size:30px; line-height:1; display:block; position:absolute;top:2px; left:3px; font-weight:bold; color:lavender;} #md-content blockquote code{background-color:#fff; } /* ----リストli同士の間隔を広げる---- */ #md-content li, #md-content dd{padding-top:8px;padding-bottom:8px;} /* ----見出し修飾---- */ #md-content h1{} #md-content h2{} #md-content h3{} #md-content h4::before{font-weight:900; content:"〓"; color:#ccc; padding-right:5px;} #md-content h5::before{font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f0c9"; color:#ccc; padding-right:5px;} #md-content h6::before{font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f039"; color:#ddd; padding-right:5px;} /* ----見出しアンカーの修飾---- */ #md-content span.anchor-highlight, #md-content span.anchor-highlight a{font-size:12px;line-height:1.0;} /* ----表組みの修飾---- */ #md-content .table-bordered {border:0px solid #ddd;border-bottom:1px solid #ddd;} #md-content .table-bordered>thead>tr>th{background-color:#fcfcfc;} #md-content .table-bordered>thead>tr>th, #md-content .table-bordered>tbody>tr>th, #md-content .table-bordered>tfoot>tr>th, #md-content .table-bordered>thead>tr>td, #md-content .table-bordered>tbody>tr>td, #md-content .table-bordered>tfoot>tr>td{border:0px solid #ddd; border-top:1px solid #ddd;} #md-content .table thead>tr>th{border-bottom:0px solid #ddd; background-color:#fcfcfc;} /* ----入れ子リストの修飾---- */ #md-content li>ol, #md-content li>ul, #md-content li>dl{border-bottom:1px solid #ddd;} /* ----ページトップに戻るボタンの修飾---- */ #md-content a.visible-xs.visible-sm.jumplink::before{font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f139"; color:#ddd; font-size:20px; padding-left:16px;} #md-content a.visible-xs.visible-sm.jumplink{color:#fff;margin-top:-10px;margin-bottom:-10px;} /* ----アラートブロックの修飾---- */ /* ----Attention: 橙orangered---- */ /* ----Note: 白#fff---- */ /* ----Hint: 緑lightseagreen---- */ #md-content p.alert.alert-warning{position:relative;} #md-content p.alert.alert-warning{color:#fff; background-color:orangered; border-left:36px solid firebrick;} #md-content p.alert.alert-warning div.md-text:before{position:absolute; top:10px; left:-30px; font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f071"; font-size:22px;} #md-content p.alert.alert-info{position:relative;} #md-content p.alert.alert-info{color:#000; background-color:#fff; border:1px solid #ddd; border-left:36px solid #eee;} #md-content p.alert.alert-info div.md-text:before{position:absolute; top:10px; left:-26px; font-family:"Font Awesome 5 Free"; font-weight:400; content:"\f02e"; font-size:22px; color:#fff;} #md-content p.alert.alert-success{position:relative;} #md-content p.alert.alert-success{color:#fff; background-color:lightseagreen; border-left:36px solid darkcyan;} #md-content p.alert.alert-success div.md-text:before{position:absolute; top:10px; left:-21px; font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f129"; font-size:22px;} /* ----ページ内目次の修飾---- */ div#md-page-menu::before{content:"table of contents"; color:#ddd; font-weight:bold;} #md-page-menu .panel {border:0px solid transparent;-webkit-box-shadow:0 0px 0px rgba(0,0,0,0);box-shadow:0 0px 0px rgba(0,0,0,0);} #md-page-menu .panel li{font-size:14px; line-height:1.2;padding-top:0; padding-bottom:0;} #md-page-menu .panel li a{font-size:14px;line-height:1.2;padding-top:10px; padding-bottom:10px; padding-left:8px; display:block;} #md-page-menu .panel li:last-child{border-bottom:1px solid #ddd;} #md-page-menu .panel .list-group-item{padding-left:0px; padding-right:0px;} #md-page-menu .panel li a.active {padding-left:8px; color:#000;text-indent:-8px;font-weight:normal;} #md-page-menu .panel li a.active:before {font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f105"; margin-right:1px;color:#000;line-height:1;} /* ----HR線の修飾---- */ hr{border-top: 1px solid #ddd;} /* ----コードブロックpreの修飾---- */ #md-content pre{border: 1px solid #ddd; padding:0; background-color:floralwhite; } #md-content code{color:#000; background-color:floralwhite; border:1px solid #ddd;} #md-content pre>code{color:#000; margin:10px; background-color:floralwhite;border:none;} /* ----画像imgの修飾---- */ #md-content .md-image-group.row .col-sm-12{padding:0;} /* ----外部リンクアイコンの修飾---- */ #md-content p i.fas.fa-external-link-alt{font-size:0.5em;padding-left:0.1em;} /* ----コードブロックの行頭に擬似行番号を表示する、ただしh6直後のコードブロックには表示しない---- */ /* 擬似行番号の表現手法についてはSaKuRaiさん https://www.studiomic.net/pre-line-numbers/ の解説を参考にしました。 */ #md-content :not(h6)+pre{padding:0;} #md-content :not(h6)+pre{position:relative} #md-content :not(h6)+pre>code:before{position:absolute; top:0px; left:0px;} #md-content :not(h6)+pre>code:before{width:36px; display:block; text-align:right; line-height:1.8;padding-top:10px; border-right:1px solid #ddd; color:#aaa; background-color:#fff; content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A";} #md-content :not(h6)+pre>code{display:block; padding-left:36px; line-height:1.8;margin-bottom:5px;} #md-content :not(h6)+pre{overflow-y:hidden;overflow-x:scroll;} #md-content :not(h6)+pre>code{white-space:pre;} /* ----このCSSではh6を特殊な表現を呼び出すキーとして使用しています。---- */ /* ----h2直後のh6を消す---- */ #md-content h2+a+h6{display:none!important;} /* ----リスト内のh6を消す（リスト内に擬似行番号無のコードブロックを使いたい時にh6+pre+codeを使う）---- */ #md-content li>p+h6{display:none;} #md-content li>p+h6+pre{margin-top:10px;} /* ----h6直後の順序なしリストの修飾---- */ #md-content h6+ul{border:1px solid #ddd; text-indent:-13px; padding:10px 10px 10px 32px;} #md-content h6+ul>li{list-style: none; padding:10px 0;} #md-content h6+ul>li:before {font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f0da"; margin-right:5px;color:#ddd;} /* ----h6直後の表組tableの1行目theadを消す---- */ #md-content h6+ .table-bordered > thead{display:none;} /* ----h2直後のh6の直後に画像と順序なしリストの組み合わせがある場合、自己紹介ページとみなす---- */ #md-content h2+a+h6+p.md-image-group{width:160px;margin-top:20px;} #md-content h2+a+h6+p.md-image-group+ul{list-style-type:none;padding-left:0px;} #md-content h2+a+h6+p.md-image-group+ul ul{list-style-type:none;padding-left:3em;text-indent:-1.3em;} #md-content h2+a+h6+p.md-image-group+ul li>ol, #md-content h2+a+h6+p.md-image-group+ul li>ul, #md-content h2+a+h6+p.md-image-group+ul li>dl{border-bottom:none;} #md-content h2+a+h6+p.md-image-group+ul+hr{display:none;} /* 401px--767px ---------------------------------------------- */ @media only screen and (min-width: 401px) { /* ----フォントサイズ---- */ #md-title h1, #md-content h1, #md-content h2{font-size:22px;} /* ----h6直後の画像と順序なしリストの組み合わせを自己紹介とみなす---- */ #md-content h2+a+h6{display:none;} #md-content h2+a+h6+p.md-image-group{width:30%;float:right;display:block;} #md-content h2+a+h6+p.md-image-group+ul{width:70%;float:left;list-style-type:none;display:block;margin-top:20px;margin-bottom:80px;} #md-content h2+a+h6+p.md-image-group+ul:after{content:"";display:block;clear:both;overflow:hidden;} #md-content h1,#md-content h2,#md-content h3,#md-content h4,#md-content h5,#md-content hr{clear:both;} #md-menu a.navbar-brand{max-width:100%;} } /* 768px--991px ---------------------------------------------- */ @media only screen and (min-width: 768px) { /* ----ここでナビゲーションバーがPC用になる---- */ /* ----フォントサイズ---- */ #md-content *:not(i){font-size:17px;} #md-title h1, #md-content h1, #md-content h2{font-size:24px;} #md-content h3{font-size:17px;} #md-content h4{font-size:17px;} #md-content h5{font-size:17px;} #md-content h6{font-size:17px;} /* ----h6直後の画像と順序なしリストの組み合わせを自己紹介とみなす---- */ #md-content h2+a+h6{display:none;} #md-content h2+a+h6+p.md-image-group{width:25%;} #md-content h2+a+h6+p.md-image-group+ul{width:75%;} body{overflow-x:hidden;} #md-all{overflow-x:visible;} /* タイトル背景 */ #md-title-container.container .page-header{margin:0 -150px; padding:55px 150px 50px;} } /* 992px--1440px ---------------------------------------------- */ @media only screen and (min-width: 992px){ /* ----ここから目次がサイドバーに移る---- */ /* ----ページトップに戻るボタンの修飾---- */ #md-content a.visible-xs.visible-sm.jumplink::before{content:none;} /* ----h6直後の画像と順序なしリストの組み合わせを自己紹介とみなす---- */ #md-content h2+a+h6+p.md-image-group{margin-top:10px;} #md-content h2+a+h6+p.md-image-group+ul{margin-top:10px;} /* ----目次の罫線がウインドウ全体に広がることを防ぐ---- */ #md-left-column #md-page-menu{margin-bottom:0px; max-width:263px;} } /* 1441px--1840px ---------------------------------------------- */ @media only screen and (min-width: 1441px){ /* タイトル背景 */ #md-title-container.container .page-header{margin:0 -350px; padding:55px 350px 50px;} } /* 1841px--2240px ---------------------------------------------- */ @media only screen and (min-width: 1841px){ /* タイトル背景 */ #md-title-container.container .page-header{margin:0 -550px; padding:55px 550px 50px;} } /* 2241px--2640px ---------------------------------------------- */ @media only screen and (min-width: 2241px){ /* タイトル背景 */ #md-title-container.container .page-header{margin:0 -750px; padding:55px 750px 50px;} } /* 2641px--max ---------------------------------------------- */ @media only screen and (min-width: 2641px){ /* タイトル背景 */ #md-title-container.container .page-header{margin:0 -1150px; padding:55px 1150px 50px;} }