<body>
        <!-- （googleアナリティクスを入れる箇所②） -->
        <main>
          <h1>
            RoughNotation 基本動作デモ
          </h1>
          <p>
           この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 <em>文字の大きさ</em>、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、
          </p>
          <p>
            この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 <strong>文字の大きさ</strong> 、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、
             <span>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 文字の大きさ 、量、字間、行間等を確認するために入れています。.</span>この文章はダミーです。文字の大きさ
          </p>
          <p id="block">
            この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
          </p>
        </main>
  </body>
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');


body{
  font-family: 'Yomogi', cursive !important;
  padding: 3rem;
  line-height:2;
}


import { annotate } from "https://unpkg.com/rough-notation?module";

const n1 = document.querySelector("em");
const n2 = document.querySelector("strong");
const n3 = document.querySelector("h1");
const n4 = document.querySelector("span");
const n5 = document.querySelector("#block");

const a1 = annotate(n1, { type: "underline", color: "blue", padding: 0, iterations: 3  });
const a2 = annotate(n2, { type: "circle", color: "red", padding: [5,5,5,5] });
const a3 = annotate(n3, { type: "box", color: "orange" });
const a4 = annotate(n4, {
  type: "highlight",
  color: "yellow",
  iterations: 1,
  multiline: true
});
const a5 = annotate(n5, {
  type: "bracket",
  color: "red",
  padding: [2, 10],
  brackets: ["left", "right"],
  strokeWidth: 3
});

a1.show();
a2.show();
a3.show();
a4.show();
a5.show();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.