ノート風(罫線)表示HTML&CSS

もくじ

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

表示例

• 直線
• あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゐゆゑよらりるれろわをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽ
• 点線
• あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゐゆゑよらりるれろわをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽ

HTMLコード

• 直線
• • <div class="keisen">あいうえお</div>
• 点線
• • <div class="keisen-tensen">あいうえお</div>

CSSコード

• 直線
• • div.keisen{
  • width:100%;
  • margin:0 auto;padding:1px calc(1em / 2) 0 calc(1em / 2);border:0;
  • box-sizing:border-box;
  • background-color:rgb(254,254,254);
  • background-image:linear-gradient(180deg, transparent calc(1em * 2 - 1px), rgb(199,199,199) 1px);
  • background-position:left top;
  • background-size:auto calc(1em * 2);
  • overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;
  • font-size:1em;
  • line-height:calc(1em * 2);
  • }
• 点線
• • div.keisen-tensen{
  • width:100%;
  • margin:0 auto;padding:1px calc(1em / 2) 0 calc(1em / 2);border:0;
  • box-sizing:border-box;
  • background-color:rgb(254,254,254);
  • background-image:linear-gradient(90deg, transparent 0%, transparent 50%, rgb(254,254,254) 50%, rgb(254,254,254) 100%), linear-gradient(180deg, transparent calc(1em * 2 - 1px), rgb(199,199,199) calc(1em * 2 - 1px), rgb(199,199,199) calc(1em * 2));
  • background-position:left top;
  • background-size:calc(1em / 2) auto, auto calc(1em * 2);
  • overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;
  • font-size:1em;
  • line-height:calc(1em * 2);
  • }