ソースコード表示HTML&CSS

もくじ

• 表示例
• HTMLコード
• CSSコード

表示例

• • .example1{
  • background-color:rgb(255,255,255);
  • color:rgb(0,0,0);
  • }
• • .example2{
  • background-color:rgb(128,128,128);
  • color:rgb(128,128,128);
  • }

HTMLコード

• 明るい背景色の場合
• • <ul class="code white">
  • <li>
  • </ul>
• 暗い背景色の場合
• • <ul class="code">
  • <li>
  • </ul>

CSSコード

• • ul.code{margin:8px 0 8px 0;border:solid 2px rgb(90,90,90);border-radius:4px;box-shadow:0 0 2px 1px rgb(236,236,236);}
  • ul.code li{padding:0px 8px 0px 7px;background-color:rgb(37,37,37);color:rgb(249,249,249);white-space:normal;overflow:visible;text-overflow:clip;font-size:16px;line-height:2;}
  • ul.code li::before{content:"　";font-size:1px;}
  • ul.code li:first-child{padding:0px 8px 0px 7px;border-radius:2px 2px 0 0;}
  • ul.code li:nth-child(even){background-color:rgb(27,27,27);}
  • ul.code li:last-child{padding:0px 8px 0px 7px;border-radius:0 0 2px 2px;}
  • ul.code.white{border:solid 2px rgb(199,199,199);}
  • ul.code.white li{background-color:rgb(249,249,249);color:rgb(32,33,36);}
  • ul.code.white li:nth-child(even){background-color:rgb(238,238,238);}