差分

このページの2つのバージョン間の差分を表示します。

--- html_css:less [2022/01/27 12:02] – 作成ともやん
+++ html_css:less [2025/04/06 14:19] (現在) – [クライアントサイドで esm.sh を利用して less を埋め込む...🤔] ともやん
@@ 行 2: / 行 2: @@
 本家: [[https://lesscss.org|Getting started | Less.js]]\\
 ソースコード: [[git>less|Less - GitHub]]\\
+CDN: [[https://www.jsdelivr.com/package/npm/less|less CDN by jsDelivr - A CDN for npm and GitHub]]\\
-===== インストール =====
+===== クライアントサイドで esm.sh を利用して less を埋め込む...🤔 =====
+本家: [[https://esm.sh/|ESM>CDN]]\\
+==== コード例 ====
+<WRAP color_term>
+<WRAP color_mincode><html><pre>
+<font color="#FFFFFF">&lt;</font><font color="#F92672">style</font><font color="#F8F8F2"> </font><font color="#A6E22E">type=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">text/less</font><font color="#FFFFFF">&quot;&gt;</font>
+<font color="#F8F8F2">  </font><font color="#F6AA11">#gozou_tbl</font><font color="#F8F8F2"> {</font>
+<font color="#F8F8F2">    </font><font color="#F92672">table</font><font color="#F8F8F2"> {</font>
+<font color="#F8F8F2">      </font><font color="#F92672">th</font><font color="#F8F8F2">, </font><font color="#F92672">td</font><font color="#F8F8F2"> {</font>
+<font color="#F8F8F2">        </font><font color="#66D9EF">padding</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">10</font><font color="#F92672">px</font><font color="#FFFFFF">;</font>
+<font color="#F8F8F2">        </font><font color="#66D9EF">width</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">54</font><font color="#F92672">px</font><font color="#FFFFFF">;</font>
+<font color="#F8F8F2">      }</font>
+<font color="#F8F8F2">      </font><font color="#F92672">td</font><font color="#F8F8F2"> { </font><font color="#66D9EF">vertical-align</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#66D9EF">middle</font><font color="#FFFFFF">;</font><font color="#F8F8F2"> }</font>
+<font color="#F8F8F2">    }</font>
+<font color="#F8F8F2">  }</font>
+<font color="#F8F8F2">  </font><font color="#75715E">// bootstrap fix</font>
+<font color="#F8F8F2">  </font><font color="#A6E22E">.table-striped</font><font color="#F8F8F2"> &gt; </font><font color="#F92672">tbody</font><font color="#F8F8F2"> &gt; </font><font color="#F92672">tr</font><font color="#A6E22E">:nth-of-type</font><font color="#FFFFFF">(</font><font color="#BE84FF">2</font><font color="#F92672">n</font><font color="#FFFFFF">)</font><font color="#F8F8F2"> {</font>
+<font color="#F8F8F2">    </font><font color="#66D9EF">background-color</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#66D9EF">unset</font><font color="#FFFFFF">;</font>
+<font color="#F8F8F2">  }</font>
+<font color="#F8F8F2">  </font><font color="#A6E22E">.table</font><font color="#F8F8F2"> &gt; </font><font color="#F92672">tbody</font><font color="#F8F8F2"> &gt; </font><font color="#F92672">tr</font><font color="#A6E22E">:hover</font><font color="#F8F8F2"> </font><font color="#F92672">td</font><font color="#F8F8F2"> {</font>
+<font color="#F8F8F2">    </font><font color="#66D9EF">color</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">#c00</font><font color="#FFFFFF">;</font>
+<font color="#F8F8F2">    </font><font color="#75715E">//font-weight: bold;</font>
+<font color="#F8F8F2">    </font>
+<font color="#F8F8F2">    </font><font color="#75715E">//line-height: 1.6em;</font>
+<font color="#F8F8F2">    </font><font color="#66D9EF">border-radius</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">.5</font><font color="#F92672">em</font><font color="#FFFFFF">;</font>
+<font color="#F8F8F2">    </font><font color="#66D9EF">box-shadow</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#66D9EF">inset</font><font color="#F8F8F2"> </font><font color="#BE84FF">0</font><font color="#F8F8F2"> </font><font color="#BE84FF">0</font><font color="#F8F8F2"> </font><font color="#BE84FF">.7</font><font color="#F92672">em</font><font color="#F8F8F2"> </font><font color="#BE84FF">#fff</font><font color="#FFFFFF">;</font>
+<font color="#F8F8F2">    </font><font color="#66D9EF">padding</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">.03</font><font color="#F92672">em</font><font color="#F8F8F2"> </font><font color="#BE84FF">.2</font><font color="#F92672">em</font><font color="#FFFFFF">;</font>
+<font color="#F8F8F2">    </font><font color="#66D9EF">background-color</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">#4169E177</font><font color="#FFFFFF">;</font>
+<font color="#F8F8F2">  }</font>
+<font color="#FFFFFF">&lt;/</font><font color="#F92672">style</font><font color="#FFFFFF">&gt;</font>
+</pre></html></WRAP>
+<WRAP color_mincode><code>
+<WRAP fsize20 #gozou_tbl>
+^  五行  ^  五臟  ^  五腑  ^  五主  ^  五竅  ^  五情  ^  五色  ^  五季  ^  五味  ^
+|  木  |  肝  |  胆  |  筋  |  目  |  怒  |  青  |  春  |  酸  |
+|  火  |  心  |  小腸  |  血  |  舌  |  喜  |  赤  |  夏  |  苦  |
+|  土  |  脾  |  胃  |  肌肉  |  口  |  思  |  黄  |  土用  |  甘  |
+|  金  |  肺  |  大腸  |  皮  |  鼻  |  悲  |  白  |  秋  |  辛  |
+|  水  |  腎  |  膀胱  |  骨  |  耳  |  驚  |  黒  |  冬  |  鹹  |
+</WRAP>
+</code></WRAP>
+<WRAP color_mincode><html><pre>
+<font color="#FFFFFF">&lt;</font><font color="#F92672">script</font><font color="#F8F8F2"> </font><font color="#A6E22E">type=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">module</font><font color="#FFFFFF">&quot;&gt;</font>
+<font color="#F8F8F2">  </font><font color="#F92672">import</font><font color="#A6E22E"> </font><font color="#FFFFFF">less</font><font color="#A6E22E"> </font><font color="#F92672">from</font><font color="#A6E22E"> </font><font color="#E6DB74">&apos;https://esm.sh/less@4.2.2&apos;</font><font color="#A6E22E">;</font>
+<font color="#A6E22E">  </font><font color="#FFFFFF">less.</font><font color="#A6E22E">refreshStyles();</font>
+<font color="#FFFFFF">&lt;/</font><font color="#F92672">script</font><font color="#FFFFFF">&gt;</font>
+</pre></html></WRAP>
+</WRAP>
+==== 実行例 ====
+<html><style type="text/less">
+  #gozou_tbl {
+    table {
+      th, td {
+        padding: 10px;
+        width: 54px;
+      }
+      td { vertical-align: middle; }
+    }
+  }
+  // bootstrap fix
+  .table-striped > tbody > tr:nth-of-type(2n) {
+    background-color: unset;
+  }
+  .table > tbody > tr:hover td {
+    color: #c00;
+    //font-weight: bold;
+    //line-height: 1.6em;
+    border-radius: .5em;
+    box-shadow: inset 0 0 .7em #fff;
+    padding: .03em .2em;
+    background-color: #4169E177;
+  }
+</style></html>
+<WRAP fsize20 #gozou_tbl>
+^  五行  ^  五臟  ^  五腑  ^  五主  ^  五竅  ^  五情  ^  五色  ^  五季  ^  五味  ^
+|  木  |  肝  |  胆  |  筋  |  目  |  怒  |  青  |  春  |  酸  |
+|  火  |  心  |  小腸  |  血  |  舌  |  喜  |  赤  |  夏  |  苦  |
+|  土  |  脾  |  胃  |  肌肉  |  口  |  思  |  黄  |  土用  |  甘  |
+|  金  |  肺  |  大腸  |  皮  |  鼻  |  悲  |  白  |  秋  |  辛  |
+|  水  |  腎  |  膀胱  |  骨  |  耳  |  驚  |  黒  |  冬  |  鹹  |
+</WRAP>
+<html>
+<script type="module">
+  import less from 'https://esm.sh/less@4.2.2';
+  less.refreshStyles();
+</script>
+</html>
+===== 参考文献 =====
+==== 付録 ====
+[[tw>tomoyan596sp/status/1590470634743947264|JupyterLabでLess CSSでけた🤤
+less.jsをcdんからロードする🤔
+<script src="cdn.jsdelivr.net/npm/less@4/dis…"></script>
+...
+<style type="text/less">
+  lessを書く🤤
+</style>
+...
+refreshStylesで埋め込まれたLessを有効化する🤔
+<script>
+// Enable embedded Less CSS!
+less.refreshStyles();
+</script>]]\\