>SVGアニメーション、mask要素で手書き風テキスト。

<!DOCTYPE html> <html lang = "ja"> <head>    <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-133409287-1'); </script>   <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-6918386144875495", enable_page_level_ads: true }); </script> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width"> <title>>SVGアニメーション、mask要素で手書き風テキスト。 </title>  <meta name = "description" content = "SVGのマスク要素の仕組みを理解すれば、さまざまな描画アニメーションが実現します。〽️「線」でマスクする。〽️画像作成。〽️コーディング。〽️理解していれば応用も。 ">    <link rel = "icon" type = "image/x-icon" href = "https://fuuno.net/main_img/favicon.ico">  <link rel = "stylesheet" href = "https://fuuno.net/gaibcenter.css">   <style> /*-----------tu_card実験-----------------------------*/ /*共通。*/ .tu_card { width:80%; margin: 0 auto; border:solid 1px; background-color:beige; } .tu_card svg { width:80%; margin-left:10%; } /*01。*/ /*-----------------newcard。-----------------*/ /* divの親のa。*/ .newa { text-decoration:none; } .newcard { display:flex; background-color:floralwhite; border:solid 2px black; } .hidari { width:69%; /* margin:1em;*/ margin:auto; /* padding-top:1em;*/ /* background-color:white;*/ } .newcard object { padding-left:1em; /* padding-right:1em;*/ display:block; width:100%; margin:auto; /* padding:1em;*/ } /* ⬆︎これ、いずれはviewportのアスペクトによって使い分ける。それが⬇︎。*/ #quad { width:69%; } .migi { color:black; margin-left:1em; width:100%; } .title { font-weight:900; font-size:1.3em; margin:0; padding-top:1em; /* padding-left:1em;*/ } .capt { padding-top:0; /* padding-bottom:0;*/ } #bg { background-image:url(huyu.png); background-size:cover; } #check { transform-origin:38%; animation:jr 2s ease-out infinite; /* 拡大と回転は同時進行できないのか？ ⬆︎このように書くのじゃ。 */ } @keyframes jr { 0% { transform:scale(0) rotate(90deg); } 50% { transform:scale(1) rotate(0deg); } 100% { transform:scale(1) rotate(0deg); } } #topsita { width:80%; } .minicheck { display:flex; width:100%; } .kao { width:20%; padding:0; } .check { width:39%; padding:0; transform-origin:left; /* transform:rotate(45deg);*/ animation:jr 2s infinite; /* border:solid 1px;*/ /* 拡大と回転は同時進行できないのか？ ⬆︎このように書くのじゃ。 */ } /*ーーーーーーーー新たなkajonaiyou。ーーーーーーーーーー*/ .points { font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace; line-height: 1.5; /* border: solid 1px;*/ padding:1em; font-size:120%; font-weight:800; background-color:beige; /*margin-top:1em;*/ margin-bottom:1em; color:black; margin-left:5%; margin-right:5%; position:relative; z-index:0; } .points img { padding:0; /* margin-left:-1em;*/ /* overflow:visible;*/ } /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/ .sample { background-color:#fff; /* height:10em;*/ border-radius:1em; border-left:solid 5px beige; /* border-top:solid 5px beige;*/ margin:1em; } .tyoku { display:inline-block; width:80%; padding-left:10%;; } /*---------------conoha⬇︎-----------------*/ .bana img { width:initial; padding:initial; } .bana { margin:10%; } /*---------------conoha⬆︎-----------------*/ </style> </head> <body> <div id = "wrapper">  <div class = "katamari">  <div id = "menubar"> <img id = "menu" src = "https://fuuno.net/main_img/menudasi.svg" onclick = "hyouji()"> <div id = "mokuji"> </div> <br><br> <div id = "topmenu"> <p> <br> <a href = "https://fuuno.net/">フーノページTOP</a> </p> <p> <a href = "https://fuuno.net/SVG/vec00/vec00.html">Vectorator使い方TOP</a> </p> <p> <a href = "https://fuuno.net/ani/ani00/ani00.html">SVGアニメーションTOP</a> </p> <p> <a href = "https://fuuno.net/web/web00/web00.html">WEBサイト作り方TOP</a> </p> <p> <a href = "https://twitter.com/fukarakaru">「ふ」のtwitter。記事を更新するとつぶやきます。</a> </p> <p> <a href = "https://fuuno.net/contact.html">コメント・お問い合わせはこちら。</a> </p> <br> </div> </div>  <div class = "komidasi"> <h3 id = "toplink"><a href = "https://fuuno.net/" style = "text-decoration:none; color:black; ">フーノページ</a></h3> </div>  <header> <script> //フラグ。 var onoff = 0; //メニューバー全体。 var menubar = document.getElementById("menubar"); //目次部分。 var mokuji = document.getElementById("mokuji"); //トップメニュー。 var topmenu = document.getElementById("topmenu"); //画像部分。 var itio_ = document.getElementById("menu"); //ジャンプ時には目次を消失させ、スクロールも解放しなければ。そのためにはhyouji()の外部で関数定義をしよう。 function hyouji() { if(onoff == 0) { mokuji.style.display = "block"; topmenu.style.display = "block"; menu.src = "https://fuuno.net/main_img/menutoji.svg"; menubar.style.overflow = "scroll"; menubar.style.height = "100%"; menubar.style.backgroundColor = "rgba(256,256,250,0.9)"; menubar.style.zIndex = "2"; onoff = 1; } else { mokuji.style.display = "none"; topmenu.style.display = "none"; menu.src = "https://fuuno.net/main_img/menudasi.svg"; menubar.style.overflow = "visible"; menubar.style.height = "10%"; menubar.style.backgroundColor = "rgba(255,255,255,0)"; menubar.style.zIndex = "0"; onoff = 0; } } </script> <img src = "katamuki.svg" style = "padding-top:0;">  <h1>SVGアニメーション、mask要素で手書き風テキスト。</h1> <p> 〽️「線」でマスクする。〽️画像作成。〽️コーディング。〽️理解していれば応用も。 </p> </header><br>   <a href = "https://fuuno.net/"> <img src = "../../main_img/topmenu.svg " style = "width:6em; padding-left:0;padding-top:0;"> </a> <a href = "https://fuuno.net/contact.html"> <img src = "../../main_img/conta.svg " style = "width:6em; padding-left:0;padding-top:0;"> </a> <a href = "https://twitter.com/fukarakaru" style = "text-decoration:none; font-size:1.7em;"> <img src = "../../main_img/twitter.svg " style = "width:3.5em; padding-left:0;padding-top:0;"> </a> </div> <br><br><br>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani00/ani00.html"><img src ="https://fuuno.net/ani/ani00/aniicon.svg" loading = "lazy"> <strong>SVGアニメーション、作り方。 </strong><br> <p>2020.06.30<br> 静的コンテンツの枠を飛び出す。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani00/cani00.html"><img src ="https://fuuno.net/cani/cani00/icon.svg" loading = "lazy"> <strong>CSSアニメーション、作り方。 </strong><br> <p>2021.04.17<br> webアニメーションを１から学ぼう♪ </p> </a> </li> </ul>  <p> ⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。 </p> <div class = "yohaku"></div> <p> こんにちは、「ふ」です。<br> 前回は「線」を描くSVGアニメーションについて紹介しました。<br> その中でテキストのアウトラインもアニメーションさせてみましたが、では「テキスト自体」をアニメーションさせて、手で書いているような表現をするにはどうすればいいのか。今回探っていきます。 </p> <p> こういったアニメーションの実装には、外部のライブラリを使用しているケースもよく見かけます。しかし、フツーのnativeなコーディングで簡単に作成することができます。<br><br> 今回登場するmask要素についての解説はちょっぴり難解なものがありますが、頑張って仕組みを理解し、応用にも役立ててください。<br><br> </p>  <a class = "newa" href = "https://fuuno.net/ani/ani16/ani16.html" target = "_blank"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani16/sen_fu.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVG、線を描くアニメーション。 </strong> </p> <p class = "capt"> 2020.09.23<br> 〽️ 破線のプロパティをつかいます。 </p> </div> </div> </a> <br>  <p> ＊前回の記事⬆︎も踏まえた内容と成増ので、まだお読みになっていない方はぜひ参考にしてください。 </p> <div class = "yohaku"></div>   <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6918386144875495" data-ad-slot="4281704178" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class = "yohaku"></div>  <div id = "maskgenri" class = "katamari"> <h2 class = "kaisi_02"> 「線」でマスクする。。 </h2> <br> <div class = "codelabel"> <p> ◼︎ SVGタグ内 </p> </div> <br> <div class = "codesample"> <mask id = "〇〇"> 〜オブジェクト〜 </mask> </div> <p> 手書き風アニメーションを実装するには、SVGの<mask>要素を使います。<br> id属性を付け、参照出来るようにしておきます。 </p> <div class = "codelabel"> <p> ◼︎ CSS </p> </div> <br> <div class = "codesample"> element { mask:url(#〇〇); } </div> <p> マスクを掛けたい要素に対して、maskプロパティにurlを参照させることで実装できます。 </p> <img src = "mask01.svg" loading = "lazy"> <p> こちらの画像。前面に重ねた円で背面の正方形をマスクしてみましょう。 </p> <img src = "mask02.svg" loading = "lazy"> <p> 結果はこのように。<br> 前面オブジェクトでクリップされているみたいですが、正方形の色がマスクをかける前より薄くなっています。 </p> <p> SVGにおけるマスクは、マスクを掛けられる側のオブジェクトを「隠す」役割ではありません。<br> マスクを掛ける側のオブジェクトの<b>「不透明度」</b>を掛けられる側のオブジェクトに<b>「移植する」</b>働きをします。<br> 前面にあった円の不透明度が正方形に移植されたため、色合いも変わってしまったのですね。 <br><br><br> webカラーで一般的に使用されるRGBは、それに加えたalpha値だけによって「不透明度」が決定されますが、SVGにおける「不透明度」は、rgba全ての値を使って算出されます。<br> 計算式は以下の通り。 </p> <div class = "codesample"> 「「２◼︎ SVG、ピクセルの情報から算出される不透明度」」   (0.2125*r+0.7154*g+0.0721*b)*alpha </div> <p> ややこしいですね💧 <br> もう少しお付き合いください。<br><br><br> rgbaのうちalpha値は「１（完全な不透明）」に固定しているとします。<br> 通常RGB値は0〜255と、256段階に分割して表現されますが、これを0〜1の範囲で256分割して表現したとき、 </p> <img src = "01.png" loading = "lazy"> <p> マスクオブジェクトが完全な黒（RGB : 0 0 0）の時、計算結果は0〜「完全な透明」となり、マスクされる側のオブジェクトにもそれが移植され、完全な透明と成増。 </p> <img src = "02.png" loading = "lazy"> <p> 完全な白（RGB : 1 1 1）のときは計算結果は1　〜「完全な不透明」となり、マスクされる側のオブジェクトも完全な不透明に成増。 </p> <img src = "senb01.svg" loading = "lazy"> <p> SVGのマスクは図形オブジェクトだけでなく、「線」で行うことも可能です。<br> マスクしてみましょう。 </p> <img src = "senb02.svg" loading = "lazy"> <p> このようになりました。<br><br> ところで、マスクする側の線をCSSで破線にしてみましょう。<br> 前回使ったstroke-dasharrayを使います。 </p> <img src = "senb03.svg" loading = "lazy"> <p> 破線部分はマスクされますが、隙間部分はalpha値が0　〜完全な不透明なので、背面のオブジェクトにも移植されて透明に成増。 </p> <img src = "senb04.svg" loading = "lazy"> <p> ここで線幅を広げていきます。<br> もっともっと。 </p> <img src = "senb05.svg" loading = "lazy"> <p> 〜背面オブジェクトが隠れるくらいに広げました。<br><br> さらに、１つの破線で後ろのオブジェクトが完全に隠れるまでstroke-dasharrayも大きくします。プレビューしながら値を調整。 </p> <img src = "senb06.svg" loading = "lazy"> <p> １つの破線で、背面オブジェクトが完全にマスクされました。<br> 〜この状態を①としましょう。 </p> <img src = "senb08.svg" loading = "lazy"> <p> 同じく前回使用したstroke-dashoffsetでdasharrayと同じ長さ分、破線のスタート位置をずらします。<br><br> 破線の隙間部分に背面オブジェクトがすっぽり入ってしまっているので、何も見えなくなりました。<br> 〜これが②。そして、 </p> <img src = "senb09.svg" loading = "lazy"> <p> 時間経過とともに②→①と変化させれば、徐々に背面オブジェクトが表示されていくアニメーションができます。<br> </p> <img src = "03.png" loading = "lazy"> <p> この仕組みを使って、背面オブジェクトをテキスト、前面オブジェクトを「手書きの軌道」にすれば、テキストを描いていくようなアニメーションが実現するのです。 <br> 実際に作っていきましょう。 </p> <div class = "yohaku"></div>   <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6918386144875495" data-ad-slot="4990057280" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class = "yohaku"></div>  </div>  <div class = "katamari"> <h2 class = "kaisi_02"> 画像作成。 </h2> <br> <p> 画像から作っていきます。 </p> <img src = "04.png" loading = "lazy"> <p> これがマスクされる側のテキストオブジェクト。デバイスのフォントに依存しないよう、アウトライン化しておきましょう。 </p> <img src = "05.png" loading = "lazy"> <p> その上から、筆運びの軌跡を線でなぞってマスクオブジェクトを作っっていきます。<br> わかりやすいよう、ひとまずマスクの線にも色を付けています。<br><br> このとき鉛筆ツールなどのフリーハンド系を使用してもいいのですが、アンカーポイントが大量に生成されてしまうので、ペジェ（ペンツール）を使うことをおすすめします。 </p> <img src = "06.png" loading = "lazy"> <p> 一通りなぞったら、背面のテキストが隠れるまで線幅を広げていきましょう。 </p> <img src = "08.png" loading = "lazy"> <p> このとき、アニメーションの進行上まだ見せたくない部分に線が干渉しないよう、線の位置や軌道をダイレクト選択ツール（ノードツール）を使って微調整しながら作業を進めてください。<br><br> 出来上がったら、SVG形式で書き出します。 </p> <div class = "yohaku"></div> <div class = "yohaku"></div>  <div id = "rori"> <ul class = "kijilist"> <li><a href = "https://fuuno.net/sonota/rori/rori.html" target = "_blank"><img src ="https://fuuno.net/sonota/rori/icon.png" loading = "lazy"> <strong>ロリポップ！の取次店になりました。 </strong><br> <p> 〽️ 「ふ」が使ってるレンタルサーバーを紹介します。 </p> </a> </li> </ul> </div>  <div class = "yohaku"></div> <div class = "yohaku"></div>  </div>  <div class = "katamari"> <h2 class = "kaisi_02"> コーディング。 </h2> <br> <p> ではいよいよコーディングしていきましょう。<br> 今回はプレビューしやすいよう、HTMLの<body>〜</body>内にインラインで表記しました。 </p> <div class = "codelabel"> <p> ◼︎ HTML </p> </div> <div class = "codesample"> <body> <svg viewBox="0 0 841.9 595.3"> <style type="text/css"> 「「３〜略〜」」 </style> 「「４」」 <g> <path d = ・・・「「３〜略〜」」 </g> 「「４」」 <path d = ・・・「「３〜略〜」」 /> </svg> </div> <img src = "code01.svg" loading = "lazy"> <p> まづはそのままプレビュー。このようになっています。 </p> <br><br> <div class = "codesample"> 「「３」」 <path 「「１ id = "mask-line"」」 d = ・・・「「３〜略〜」」 /> </div> <p> マスクする側の線オブジェクトにid名を付けます。「mask-line」としました。<br> そしてCSSで参照し、stroke-dasharrayを広げていきましょう。 </p> <div class = "codelabel"> <p> ◼︎ CSS </p> </div> <div class = "codesample"> #mask-line { 「「１stroke-dasharray:500px;」」 } </div> <img src = "code02.svg" loading = "lazy"> <p> ‥まだまだ短いですね。１つの破線が線オブジェクトいっぱいの長さになるまで、もっと広げていきます。 </p> <img src = "code03.svg" loading = "lazy"> <p> 現在2600px。破線が線オブジェクトいっぱいの長さになりました。<br> 次にstroke-dashoffsetを変化させるアニメーションを仕込んでいきます。 </p> <div class = "codelabel"> <p> ◼︎ CSS </p> </div><br> <div class = "codesample"> #mask-line { stroke-dasharray:2600px; 「「１animation:h-written 6s infinite;」」 } @keyframes h-written { 「「１0% { stroke-dashoffset:2600px; } 100% { stroke-dashoffset:0px; }」」 } </div> <br><br> <p> animationプロパティの内容は、<br><br> ・アニメーション名 : h-written<br> ・継続時間 : 6s<br> ・繰り返し : inifinite（無限大）<br><br> としました。<br><br> キーフレームですが、0%ではstroke-dashoffsetを先ほど指定した2600px、100%で0px。<br> 破線部分が徐々にテキストに重なっていく仕組みです。<br> </p> <img src = "code04.svg" loading = "lazy"> <p> プレビューはこんな感じ。<br> それでは、線オブジェクトで背面のテキストをマスクしましょう。参照出来るよう、要素id属性を付けていきます。 </p> <div class = "codesample"> 「「３」」 <g 「「１id = "text"」」> <path d = ・・・〜略〜 </g> 「「３」」「「１<mask id = "mask-ani">」」 <path id = "maskline" d = ・・・〜略〜 /> 「「１</mask>」」 </div> <p> テキスト部分はSVGで書き出された段階で<g>〜</g>でグループ化されていると思います。id名を「text」とします。また線オブジェクトの外側を<mask>〜</mask>で囲み、id名を「mask-ani」とします。 </p> <div class = "codelabel"> <p> ◼︎ CSS </p> </div> <div class = "codesample"> #text { mask:url(#mask-ani); } </div> <p> CSSで#textをマスク。url先を#mask-aniに指定。<br> プレビューしてみましょう。 </p> <img src = "code5.svg" loading = "lazy"> <p> いい感じですね。<br><br> では最後の仕上げ。線オブジェクトにはプレビューしやすいように色を付けたまま作業を進めてきましたが、背面のテキストが完全に不透明になるよう、線の色を完全な「白」に指定します。<br> </p> <div class = "codelabel"> <p> ◼︎ CSS </p> </div> <div class = "codesample"> #mask-line { stroke-dasharray:2600px; animation:h-written 6s infinite; 「「１stroke:#fff;」」 } </div> <p> 結果はこちら⬇︎。 </p> <img src = "code06.svg" loading = "lazy"> <p> 完成です。お疲れ様でした！ </p> <div class = "yohaku"></div> <div class = "bana"> <a href="https://px.a8.net/svt/ejp?a8mat=35O4IP+4OHOZ6+50+5SFN69" rel="nofollow"> <img border="0" width="250" height="250" alt="" src="https://www24.a8.net/svt/bgt?aid=190922209283&wid=001&eno=01&mid=s00000000018035009000&mc=1"></a> <img border="0" width="1" height="1" src="https://www11.a8.net/0.gif?a8mat=35O4IP+4OHOZ6+50+5SFN69" alt=""> </div> <div class = "yohaku"></div>  </div>  <div class = "katamari"> <h2 class = "kaisi_02"> 理解していれば応用も。 </h2> <br> <p> 最後までお読みいただき、ありがとうございました。<br> 今回は難解なmask要素の挙動と破線プロパティ操作の合わせ技でした。外部ライブラリなどを使用せずに原始的な手順をお伝えしたのは、<b>仕組みを理解していれば応用が広がる</b>からです。 </p> <img src = "09.png"> <p> 仕組みを理解できた皆さんなら、例えば、虹を架けるアニメーションなんかにも簡単に応用できますね！<br><br> 他にも新たな使い道を探してみてください。ではまた〜 ♩ </p>  </div> <br><br> <div class = "yohaku"></div> <div id = "mosimo">  <script type="text/javascript"> (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d=c.createElement(f),d.src=g, d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js","msmaflink"); msmaflink({"n":"Adobe Illustrator CC","b":"アドビシステムズ","t":"2200630053423","d":"https:\/\/images-fe.ssl-images-amazon.com","c_p":"\/images\/I","p":["\/41C2lgdwNfL.jpg","\/51cMX-DRwtL.jpg","\/51VkqFbzNCL.jpg","\/51o0f2C4X6L.jpg","\/512LrKY5A%2BL.jpg","\/51pWHYBEHjL.jpg","\/41A%2BMUCI43L.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/Adobe-Illustrator-12%E3%81%8B%E6%9C%88%E7%89%88-Windows-Mac%E5%AF%BE%E5%BF%9C\/dp\/B07N2XCLSM","t":"amazon","r_v":""},"aid":{"amazon":"1617364","rakuten":"1526493","yahoo":"1618576"},"eid":"aJTud","s":"s"}); </script> <div id="msmaflink-aJTud">リンク</div>  </div> <div class = "yohaku"></div> <div class = "codelabel"> <p> 関連記事 </p> </div>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani11/ani11.html"><img src = "https://fuuno.net/ani/ani11/icon.png" loading = "lazy"> <strong>SVGコード、読み方（構成を知る）。 </strong><br> <p>2020.08.02<br> 〽️ 構成さえ読み取れればOK。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani05/ani05.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani05/axis.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション04、軸を基準に拡大/縮小〜 </strong> </p> <p class = "capt"> 2020.06.13<br> 〽️ 「切実な一言」に使おう。 </p> </div> </div> </a> <br>   <a class = "newa" href = "https://fuuno.net/ani/ani10/ani10.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani10/hon_kumo.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション、エンドレスに流れる画像。 </strong> </p> <p class = "capt"> 2020.07.23<br> 〽️ タイトル部分に使えそう？ふふふ。 </p> </div> </div> </a> <br>   <a class = "newa" href = "https://fuuno.net/ani/ani09/ani09.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani09/dekita.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション06、アニメーションに合わせてテキストの色を反転。 </strong> </p> <p class = "capt"> 2020.07.15<br> 〽️ ３つの長方形を動かします。 </p> </div> </div> </a>  <br><br><br><br> <br><br><br><br> <script> //classnameで要素たちをhtmlcollectionとして取得。変数名はclstrs。 var clstrs = document.getElementsByClassName("codesample"); //順に取り出しreplace。 for(i=0;i<=clstrs.length;i++) { //innerHTMLを取り出す var clstr = clstrs[i].innerHTML; //試しにlog。 // console.log(clstr); //---------------ここからreplace作業。----------------------- //タグを特殊文字化。 clstr = clstr.replace(/</g,"<"); clstr = clstr.replace(/>/g,">"); //ダブルクオテーション。 //clstr = clstr.replace(/"/g,"&quot"); //自動改行。 clstr = clstr.replace(/\r?\n/g,'<br>'); //{}の字下げ。 clstr = clstr.replace(/\{/g,"{<div style = 'padding-left:4em;margin-top:-1.7em; margin-bottom:-1.7em;'>"); clstr = clstr.replace(/\}/g,"}</div>"); //「「1 で▶︎をdardcyanに。// clstr = clstr.replace(/「「１/g,"<span style = 'color:dodgerblue;'>"); clstr = clstr.replace(/」」/g,"</span>"); //「「２　で行を強調。 clstr = clstr.replace(/「「２/g,"<span style = 'color:mediumblue;'>"); clstr = clstr.replace(/」」/g,"</span>");//これ共通でいいのでは？ // console.log(clstr); //「「３　でコメアウト。 clstr = clstr.replace(/「「３/g,"<span style = 'color:gray;'>"); //「「４　は紫式部。 clstr = clstr.replace(/「「４/g,"<span style = 'color:mediumvioletred;'>"); //「「５　はダークオレンジ。 clstr = clstr.replace(/「「５/g,"<span style = 'color:darkorange;'>"); //最初のbrを削除。 clstr = clstr.replace(/<br>/,""); //字下げさせたくない波括弧。 clstr = clstr.replace(/｛/g,"{"); clstr = clstr.replace(/｝/g,"}"); //反映させる。--------------------------------------------- var realstr = clstrs[i]; realstr.innerHTML = clstr; } </script> <script> var mokuji = document.getElementById("mokuji"); var midasi = document.getElementsByClassName("kaisi_02"); console.log(midasi); //for文の中身を書き換えアンカーを仕込む for (i = 0; i < midasi.length; i++) { var koumoku = document.createElement("p"); //作った<p>をリンク付きにする koumoku.innerHTML = '<a href="#midasi' + i + '">' + '◼︎' + midasi[i].innerText + '</a>'; //pをクリックするとhyouji()が発動。 koumoku.addEventListener('click',hyouji,false); //<h2>にアンカーポイントを仕込む midasi[i].outerHTML = '<h2 id="midasi' + i + '" class = "kaisi_02">' + midasi[i].innerText + '</h2>'; console.log(midasi[i].outerHTML); //目次部分に追加 mokuji.appendChild(koumoku); } </script>  <div id = "profile"> <hr><hr> <img src = "../../main_img/fu_icon.png " style = "width:31%;float:left" loading = "lazy"> </div> <div class = "komidasi" style = "background-color:forestgreen; color:azure;"> <h3 style = "padding:0.5em; color:#ffffff;">「ふ」です。</h3> </div> <p>swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。<br><br>  </p><hr>  </div> <script> var anal = document.createElement("script"); anal.type = "text/javascript"; anal.async = true; anal.src = "https://www.googletagmanager.com/gtag/js?id=UA-133409287-1"; document.body.appendChild(anal); </script>  <script> (function(window, document) { function main() { // GoogleAdSense読込み var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す // 旧コードの場合、コメントアウトしたままにする //ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXXX'; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); } // 遅延読込み var lazyLoad = false; function onLazyLoad() { if (lazyLoad === false) { // 複数呼び出し回避 + イベント解除 lazyLoad = true; window.removeEventListener('scroll', onLazyLoad); window.removeEventListener('mousemove', onLazyLoad); window.removeEventListener('mousedown', onLazyLoad); window.removeEventListener('touchstart', onLazyLoad); window.removeEventListener('keydown', onLazyLoad); main(); } } window.addEventListener('scroll', onLazyLoad); window.addEventListener('mousemove', onLazyLoad); window.addEventListener('mousedown', onLazyLoad); window.addEventListener('touchstart', onLazyLoad); window.addEventListener('keydown', onLazyLoad); window.addEventListener('load', function() { // ドキュメント途中（更新時 or ページ内リンク） if (window.pageYOffset) { onLazyLoad(); } }); })(window, document); </script> </body> </html>

CINXE.COM

>SVGアニメーション、mask要素で手書き風テキスト。