html_css:less

文書の過去の版を表示しています。


Less - Leaner Style Sheets

コード例:

<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>

<WRAP fsize20 #gozou_tbl>
^  五行  ^  五臟  ^  五腑  ^  五主  ^  五竅  ^  五情  ^  五色  ^  五季  ^  五味  ^
|  木  |  肝  |  胆  |  筋  |  目  |  怒  |  青  |  春  |  酸  |
|  火  |  心  |  小腸  |  血  |  舌  |  喜  |  赤  |  夏  |  苦  |
|  土  |  脾  |  胃  |  肌肉  |  口  |  思  |  黄  |  土用  |  甘  |
|  金  |  肺  |  大腸  |  皮  |  鼻  |  悲  |  白  |  秋  |  辛  |
|  水  |  腎  |  膀胱  |  骨  |  耳  |  驚  |  黒  |  冬  |  鹹  |
</WRAP>

<script type="importmap">
  {
    "imports": {
      "less": "https://esm.sh/less@4.2.2"
    }
  }
</script>
<script type="module">
  import less from "less"; // → https://esm.sh/less@4.2.2
  less.refreshStyles();
</script>

実行例:

五行 五臟 五腑 五主 五竅 五情 五色 五季 五味
小腸
肌肉 土用
大腸
膀胱

  • html_css/less.1743908077.txt.gz
  • 最終更新: 2025/04/06 11:54
  • by ともやん