Strapdown.js
Bootstrapã»Bootswatch ããŒããé©çšãã Markdown ããŒãµ Strapdown.js ã«ã€ããŠãŸãšããŠããŸãã
Markdown ã HTML ã«å€æããã ãã® Markdown ããŒãµã¯ããã€ãååšããŸããã
Strapdown.js ã¯ããã« Bootstrap ããŒãããã³
Bootswatch ãå
¬éããŠãã Bootstrap ããŒããé©çšããŸãã
.html ãã¡ã€ã«åäœã§ Markdown ãèšèŒããããŒããé©çšãã Web ãµã€ãã
容æã«ïŒæå° 1 ãã¡ã€ã«ã ãã§ïŒå
¬éã§ããã¡ãªããããããŸãã
è€æ°ããŒãžã«ãªã£ãŠãããšæ§é ãè€éã«ãªã£ãŠããŸããã
ã¯ããŒã©ãŒã®åéãšã㊠HTML ãã¡ã€ã«ã«ãªã£ãŠããæ¹ãæå©ãªã®ã§ã
ãŸãšãã« Web ãµã€ããæ§ç¯ããã®ã¯ éçãµã€ããžã§ããŒã¿ ãè¯ãã§ãã
ð Mkdocs | ãµãããð FU-SEN
MkDocs ã«ã¯ Bootswatch ãæ¡çšããããŒããããããã¶ã€ã³ã¯ã»ãŒãã®ãŸãŸã§ã
TOC ä»ãµã€ãããŒãšã¡ãã¥ãŒãä»ãã Web ãµã€ãã容æã«æ§ç¯ã§ããŸãã
 mkdocs/mkdocs-bootswatch | GitHub
ç®æ¬¡
å ¬åŒãµã€ã
 arturadib/strapdown | GitHub
泚æ
å
¬åŒã§äœ¿ãããŠããç¬èªãã¡ã€ã³ strapdownjs.com
ã¯çŸåšæ©èœããªããªã£ãŠããŸãã
çŸåšã¯  jsDelivr ã® CDN ã䜿çšã§ããŸãã®ã§ã
ãªãªãžãã«ã® Strapdown.js ã®ãŸãŸ CDN ã䜿çšãããå Žåã¯æ¬¡ã«çœ®ãæãããšè¯ãã§ãããã
<script src="https://cdn.jsdelivr.net/gh/arturadib/strapdown@gh-pages/v/0.2/strapdown.min.js"></script>
ç¹åŸŽã»é£ç¹
<html>
<title>Strapdown.js ã®ãµã³ãã«</title>
<xmp>
ãã®äžã« **Markdown** ãèšèŒããŠãããŸãã
</xmp>
<script src="https://cdn.jsdelivr.net/gh/arturadib/strapdown@gh-pages/v/0.2/strapdown.min.js"></script>
</html>
ð ãœãŒã¹ | GitHub
ð è¡šç€ºçµæ | strapdown-js.balloon.net.eu.org
.html ã®äžã« Markdown ãèšèŒããäºã§ãJavaScript ã§ HTML ã«å€æã«è¡šç€ºããŸãã
ãã®ãããªãã®ã Markdown ããŒãµ ãšèšããŸããã
ä»ã® Markdown ããŒãµãšç°ãªãç¹ã« Bootstrap ããŒã ãé©çšããç¹ãæããããŸãã
Markdown ã§èšèŒããŠã容æã«ããŒããé©çšãã Web ãµã€ããæ§ç¯ã§ããŸãã
1 ãã¡ã€ã«åäœã§å®çµãããµãŒãã«ã¢ããããŒãããªããŠã
ããŒã«ã«ã§å®éã«è¡šç€ºã確èªããäºãã§ããŸãã
JavaScript ã§å€æããããããå€æã¯ Web ãã©ãŠã¶ã§è¡ãããŸãã
ãã®ããããŒãžã®è¡æ°ãé·ããªãçšãWeb ãã©ãŠã¶ã«ã¯è² è·ãšãªããŸãã
ããŸã倧ããªãµã€ãºã®è¡šç€ºã«ã¯é©ããŠããŸããã
ãŸããGoogle ãªã©ã®æ€çŽ¢ãšã³ãžã³ãåç
§ããŠããã¯ããŒã©ãŒã¯
JavaScript ã§å€æããåã®ããã¹ããåç
§ããæ€çŽ¢çµæãžåæ ããŸãã
ãã®ãããã¯ããŒã©ãŒã¯ Markdown ã§èšèŒãããŠããè£
食ãçè§£ã§ããŸããã
åé¿çãšããŠãç¹ã«èªèããŠã»ãããªã³ã¯ãç»åãªã©ã HTML ã¿ã°ã§èšèŒããæ¹æ³ããããŸãã
äžèšã«å ããŠãããŒãžæ°ãå¢ããŠãããšããã¡ã€ã«ã»ã¡ãã¥ãŒæ§æãªã©ã
ãã¡ã€ã«ç®¡çãè€éã«ãªã£ãŠããŸãã
è€æ°ããŒãžãçæããŠãŸãšãã« Web ãµã€ããå
¬éããã®ã§ããã°ã
éçãµã€ããžã§ãã¬ãŒã¿ã䜿çšããã®ãç¡é£ã§ãããã
ð Hugo ã ð Jekyll ãªã©ããããŸããã
MkDocs ã«ã¯ Strapdown.js ã§æ¡çšãããŠããããŒããšåã
Bootswatch ã®ããŒããååšããŠããŸãã
ããœã³ã³ã§ã®è¡šç€ºã§ã¯éåžžãµã€ãããŒã«ããŒãžèŠåºãã衚瀺ããŸãã
 MkDocs
ð MkDocs | ãµãããð FU-SEN
 mkdocs/mkdocs-bootswatch | GitHub
èšèŒæ¹æ³
äžã«ãã£ããµã³ãã«ããããã詳现ã«èšèŒããäºãã§ããŸãã
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Strapdown.js ã®ãµã³ãã«</title>
<meta name="description" content="Strapdown.js ã®ãµã³ãã«çµæã衚瀺ããŸãã" />
</head>
<body>
<textarea theme="simplex">
`<xmp>` ã®ä»£ããã« `<textarea>` ã䜿çšã§ããŸãã
</textarea>
<script src="https://cdn.jsdelivr.net/gh/arturadib/strapdown@gh-pages/v/0.2/strapdown.min.js"></script>
</body>
</html>
ð ãœãŒã¹ | GitHub
ð è¡šç€ºçµæ | strapdown-js.balloon.net.eu.org
å
¬åŒãµã€ãã®ãµã³ãã«ã§ã¯é衚瀺ã«ããããã style="display:none;"
ãä»å ãããŠããŸãã
<textarea theme="united" style="display:none;">
ããããããããªããŠãäžç¬å€æåã®ç¶æ
ãèŠããã ãã§ã倧ããªæ¯éã¯ãããŸããã
SEO çãªèæ
®ããèšèŒããªãæ¹ãè¯ããšèšèŒããªãã±ãŒã¹ããããŸãã
å®éã«éå¶è
ã詊ããæãã§ã¯ style="display:none;"
ãä»ããŠããŠãã
æ£åžžã« Google ã§æ€çŽ¢çµæã«åæ ãããããã«èŠããŸãã
<head>
å
ã¯éåžžã® HTML åæ§ã«èšèŒããŠæ§ããŸãããJavaScript ãæå¹ã§ããã
CSS ã¯ããŒããé©çšãããç¹ã«æ³šæãèŠããŸãã
title
<title>ã¿ã€ãã«</title>
ãšããå Žåã
ããŒãžäžéšã®ãããã¯æ¬¡ã® HTML ãœãŒã¹ã«å±éãããŸãã
<div id="headline" class="brand">ã¿ã€ãã«</div>
å Žæçã« <h1>
ã«ãªã£ãŠãããã§ãããå®éã«ã¯ <div>
ã§ãã
åŸã£ãŠæ¬æå
ã®èŠåºã㯠<h1>
ãMarkdown ã§ã¯ #
ãã䜿çšããŠäžããã
ããŒã
<xmp>
ãŸã㯠<textarea>
ã« theme
ãå
¥ããŠ
Bootwatch ã§å
¬éãããŠãã Bootstrap ããŒããèšå®ã§ããŸãã
å
¬åŒãµã€ããªã©ã¯å°æåã«çµ±äžãããŠããŸããã
å®éã«ã¯é æåã倧æåã®ãŸãŸã§ã䜿çšã§ããŸããtheme
èšèŒãªã㯠Bootstrap ã®ããã©ã«ãããŒãã«ãªããŸãã
ãªãªãžãã«ã® Strapdown.js ãæ¡çšãããŠãã Bootstrap ã¯
Bootstrap 2 ãšãªããŸãã
ãªãªãžãã«ã§å
¥ã£ãŠããªã Cosmo ãš Flatly ã¯themes/
å
ã«å
¥ããäºã§æå®ããŠè¡šç€ºå¯èœã§ãã
ð fu-sen/strapdown | GitHub
ð fu-sen/strapdown.js | GitHub
ãµããã Fork ç
éå¶è
ã Fork ããŠææ°ç¶æ
ãåæ ãã
Fork ãããœãŒã¹ãšå®ãã¡ã€ã«ãã®ãã®ã¯ strapdown
ã§ããã
 jsDelivr ãçšãã CDN ã§çŽæ¥ Web ã§äœ¿çšã§ããããã
æŽã« strapdown.js
ã§å°çšãããžã§ã¯ããäœã£ãŠãããŸãã
 Bootstrap 3 | Bootwatch
 Bootstrap 4 | Bootwatch
 Bootwatch
çŸåš Bootstrap 㯠Bootstrap 5 ãææ°ã§ãã
åãã㊠Bootswatch ããŒããå¶äœã»å
¬éãããŠããã®ã§ããã
ããã Bootstrap 3ïœ5 ã®ããŒããé©çšãã Strapdown.js ãå
¬éããŠãããŸãã
Bootstrap 4 ãã仿§ãå€ãã£ãŠãããããCSS ã远å ã»å€æŽããŠããŸãã
2ã»3 ãšã¯èŠãç®ãå€ãããšããããããŸãããæ³šæäžããã
2ïœ5 ãã¹ãŠ 20250520
ã§ Marked v15.0.12 ãžæŽæ°ããŠãããŸãã
2 ã®ãªãªãžãã«çãšã®éãã¯ããããææ°ããŒãžã§ã³ã§ããäºä»¥å€ã«ã
ããŒã Cosmo ãš Flatly ã远å ããŠãããŸãã
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20250603/2/strapdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20250603/3/strapdown.min.js"></script>
4 ã®ã¿ 20220726
ã§ v4.6.2 ã®ããŒããžæŽæ°ããŠãããŸãã
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20250603/4/strapdown.min.js"></script>
5 ã®ã¿ 20250511
ã§ v5.3.6 ã®ããŒããžæŽæ°ããŠãããŸãã20250603
ããããŒã Brite ã远å ããŠãããŸãã
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20250603/5/strapdown.min.js"></script>
@
åŸã®æ¥ä»éšåã main
ã«å€æŽãããšãåžžã«ææ°çãåç
§ããŸãã
ãã ãããŒã仿§ã®å€æŽãªã©ã§æ¥ã«è¡šç€ºãå€åããæãããããŸãã
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/2/strapdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/3/strapdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/4/strapdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/5/strapdown.min.js"></script>
䜿çšã§ããããŒãã¯æ¬¡ã®ãšããã«ããããããã® index.html
ã§äžèŠ§è¡šç€ºã§ããŸãã
ð strapdown-js.balloon.net.eu.org
ãŸãã3ã»4ã»5 ã§ã¯ navbar ã®è²ãæŽã«éžæã§ããŸããïŒ20210310
ããïŒ
4ã»5 㯠navbar="dark"
ãŸã㯠navbar="light"
ã
5 ã§ã¯æŽã« navbar="body-tertiary"
ãæå®ã§ããŸãã (body-tertiary
ã¯20230729
ãã)
çç¥æã®ããã©ã«ã㯠navbar="primary"
ã§ãã
<textarea theme="yeti" navbar="light">
3 㯠navbar="inverse"
ã§ããŒãå®çŸ©ã®ããäžè²ãé©çšããŸãã
<textarea theme="yeti" navbar="inverse">
SEO 察ç
ã¯ããŒã©ãŒã¯ Markdown ç¶æ
ã®ããã¹ããåç
§ããäºã«ãªããŸãã
æ€çŽ¢çµæã«åæ ãããäºãèæ
®ãããšã次㯠HTML ã¿ã°ã§èšèŒããæ¹ãè¯ãã§ãã
éã«ãã®ä»çµã¿ãå©çšã㊠Markdown ã§èšèŒããäºã§
ãããŠæ€çŽ¢çµæã«åºã«ããããäºãã§ããŸãã
- ãªã³ã¯
<a>
- ãªã³ã¯å ãã¯ããŒã©ãŒãåç §ã§ããŸãã - ç»å
<img>
- ç»åãæ€çŽ¢çµæã«è¡šç€ºãããŸãã - èŠåºã
<h1>
ïœ<h6>
- èŠåºããæ€çŽ¢çµæã«åºãŠããäºããããŸãã
ãŸãã<meta name="description">
ã <head>
å
ã«å
¥ããäºã§ã
æ€çŽ¢çµæã®ããã¹ãã«è¡šç€ºã§ããã®ã§ãçæ³çã«ã§ããã§ãããã
<title>Strapdown.js ãã¹ã</title>
<meta name="description" content="Strapdown.js ã䜿çšãã Web ãµã€ãã®å
¬éãã¹ããè¡ã£ãŠã¿ãŸããã">
Bootstrap Components
Strapdown.js ã§ã¯ Bootstrap ããŒããæ¡çšããŠããããã
Bootstrap Components ã䜿çšããäºãã§ããŸãã
 ããã¥ã¡ã³ã Components | Bootstrap
該åœãã HTML ã¿ã°ã䜿çšããå Žæã«èšèŒããŠäžããã
Strapdown.js 㯠HTML ã¿ã°å
ã® Markdown ã倿ããªãããã
äžã®è£
食ã HTML ã¿ã°ã§èšèŒããå¿
èŠããããŸãã
掟ç
æ©èœã®äžè¶³ãè£ããããè¿œå æ©èœã掟çãçãŸããŠããŸãã
 joedf/strapdown-topbar | GitHub
ãªãªãžãã«ç Strapdown.js ã®åŸã«è¿œå ããäºã§ãããããŒã«ã¡ãã¥ãŒã远å ã§ããŸãã
ããŸãã§å·Šäžã«ããŽã远å ããlogo.js
ããããŸãã
ããŒãžéå¶è å ¬éçã§ã¯ãªãªãžãã«ãšåã Bootstrap 2 çã«éãé©çšã§ããŸãã ndossougbe/strapdown | GitHub
å·Šãµã€ãããŒã«èŠåºãã®äžèЧïŒTOCïŒTable Of ContentsïŒã衚瀺ããŸãã
ããŒãžéå¶è å ¬éçã§ã¯ãªãªãžãã«ãšåã Bootstrap 2 çã«éãé©çšã§ããŸãã chaitin/strapdown-zeta | GitHub
MathJax 察å¿ãèŠåºãã®äžèЧã highlight.js 察å¿ãªã©ã
Bootstrap 㯠Bootstrap 3 ããŒã¹ã§ãBootswatch ããŒããæŽæ°ãããŠããŸãã Naereen/StrapDown.js | GitHub
詳ãã説æãStrapdown.js ãããããªã©ã®æ¹è¯ãèŠãããŸãã
ããŒãã¯ãªãªãžãã«ããããã€ã远å ãããŠããŸããã
ãªãªãžãã«çã® Bootstrap 2 ããŒã¹ã«ç¬èªå¯Ÿå¿ããŠããããã§ãã
Q&A
ã¹ããŒããã©ã³ã«å¯Ÿå¿ããŠããŸããïŒ
ã¯ããã¬ã¹ãã³ã·ããã¶ã€ã³å¯Ÿå¿ã§ãã¹ããŒããã©ã³ãµã€ãºã®æšªå¹ ã§è¡šç€ºãããŸãã
Google ã®æ€çŽ¢çµæã§è¡šç€ºãããŸããïŒ
éå¶è
ãå®éã«äœ¿çšããŠããéããGoogle ã®æ€çŽ¢çµæã«ã¯æ£åžžã«è¡šç€ºãããŸãã
ãã ãã Google ãªã©ã¯ Markdown ã®æ§æãèªèããŸããã
æ€çŽ¢çµæã®èª¬ææã§ãã <meta name="description">
ã䜿çšãã
ãŸãããªã³ã¯ã¯ <a href="ïœ">
ãç»å㯠<img src="ïœ">
ãš HTML ã¿ã°ã䜿çšãããšã
ãã®éšåã¯è¿œã£ãŠåç
§ããäºãæåŸ
ã§ããŸãã
ããŒãžã©ã³ã¯ãé«ããªããšãèŠåºãã <h1>
ïœ <h6>
ã§å¹æãåºãŠããŸãã
è¡šç€ºçµæã Google ãªã©ã®æ€çŽ¢çµæã§æååãããŠããŸãã
æè¿ã® Web ãµãŒãã¹ã§ã¯ .html ã Content-Type: text/html; charset=utf-8
ãš
æåã³ãŒã UTF-8 ã§èšèŒãããŠããåæã§èšå®ãããŠããã®ã§ããã
é·å¹ŽéçšãããŠããå€ã HTML ã®è¡šç€ºãèæ
®ããã¬ã³ã¿ã«ãµãŒãã Web ãµãŒãã¹ã§ã¯
UTF-8 ãªã©ã® Unicode ãå®çŸ©ããã以åã§ãæåã³ãŒãããã©ãã©ã ã£ãããã
.html ã Content-Type: text/html
ãšå®çŸ©ãããæåã³ãŒããæªå®çŸ©ã«ãªã£ãŠããŸãã
è§£æ±ºææ®µãšã㊠<title>
ã¿ã°ã®äžã«æ¬¡ã远å ããŠäžããã
<meta charset="utf-8">
ããã§ .html ãã¡ã€ã«ãæåã³ãŒã UTF-8 ã§ããäºãå®çŸ©ãã
æåŸ
ããçµæãåŸãããããã«ãªããŸãã
ç¬èªã® CSS ãé©çšãããã®ã§ãããããŒããé©çšãããŠããŸããŸãã
ããŒãã® CSS 㯠strapdown.js
ãèªã¿èŸŒãã æã«é©çšãããŸãã
ãã㯠<body>
ã®çŽåã§ãã
<script src="https://strapdownjs.com/v/0.2/strapdown.js"></script>
</body>
åŸã£ãŠã strapdown.js
ã®åŸã<body>
ã®åã« CSS ãå
¥ããå¿
èŠããããŸãã
<script src="https://strapdownjs.com/v/0.2/strapdown.js"></script>
<link rel="stylesheet" href="sample.css">
</body>
ãã¡ããããã« <style>
ã§å²ã£ãŠçŽæ¥èšèŒããŠãæ§ããŸããã
<script src="https://strapdownjs.com/v/0.2/strapdown.js"></script>
<style>
a {
color: #0088ff;
}
</style>
</body>
OGP ã¯äœ¿çšã§ããŸããïŒ
 The Open Graph protocol
ð Open Graph protocol | ãµãããð FU-SEN
<head>
ãžæ®éã«è¿œå ã§ããã®ã§ã
OGPïŒOpenGraphïŒããã³ Teitter Card ã®æ
å ±ãä»å ããŠé©çšã§ããŸãã
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ã¿ã€ãã«">
<meta name="twitter:description" content="説æ">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.net.eu.org/ogp.png">
<meta property="og:type" content="website">
<meta property="og:title" content="ã¿ã€ãã«">
<meta property="og:description" content="説æ">
<meta property="og:site_name" content="ãµã€ãå">
<meta property="og:image" content="https://example.net.eu.org/ogp.png">