html_css:less

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
html_css:less [2024/10/03 12:16] – [Less - Leaner Style Sheets] ともやんhtml_css:less [2025/04/06 14:19] (現在) – [クライアントサイドで esm.sh を利用して less を埋め込む...🤔] ともやん
行 4: 行 4:
 CDN: [[https://www.jsdelivr.com/package/npm/less|less CDN by jsDelivr - A CDN for npm and 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>
  
 ===== 参考文献 ===== ===== 参考文献 =====
  • html_css/less.1727925412.txt.gz
  • 最終更新: 2024/10/03 12:16
  • by ともやん