レスポンシブ横並び（別々スクロール）

    CSS（styleタグで囲ってhead内）

@media (min-width:751px){
  .yokonarabe{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 100vh}
  .yokonarabe>.menu{
    width: 20%;
    box-sizing: border-box;
    overflow-y: auto;
    height: 100vh}
  .yokonarabe>.maincontent{
    width: 75%;
    box-sizing: border-box;
    overflow-y: auto;
    height: 100vh}
}
    
    

    HTML（body内、任意の位置）

<section class="yokonarabe">
  <section class="menu">左側要素</section>
  <section class="maincontent">右側要素</section>
</section>

    

class="list"内のidスクロール禁止

<!--pcでのidスクロール禁止--> 

<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.innerWidth >= 751) {
      document
        /*class名は任意（現在のコードではclass="list"）*/
        .querySelectorAll('.list a[href^="#"]')
        .forEach(anchor => {
          anchor.addEventListener('click', function(e) {
            e.preventDefault(); // スクロールをキャンセル
          });
        });
    }
  });  
</script>

    

外部ファイル(共通部分)

    js外部ファイルに記入
// 任意のHTMLを文字列で定義
　　/*任意の名前。headerHTMLなど自由に決めていい*/
const componentHTML = `
ここに記入
`;


// 任意のCSSを文字列で定義
　　/*任意の名前。styleタグ不要*/
const componentCSS = `
ここに記入
`;


// 任意のJavaScriptを文字列で定義
    /*任意の名前。scriptタグ不要*/
const componentJS = `
ここに記入
`;


// ページのHTMLがすべて読み込まれたタイミングで実行される。これにより、挿入先の要素（例：body）が確実に存在している状態で処理できる
document.addEventListener("DOMContentLoaded", function () {

  // HTMLの挿入（位置を調整可能）
  document
  /*bodyタグを取得。読み込み先のclass名でも可。その場合.を付けるのを忘れないように。*/
  .querySelector("body")
  /*bodyの最初の子要素としてHTMLを挿入。他には
  - "beforeend"：最後に追加
  - "beforebegin"：bodyの前（非推奨）
  - "afterend"：bodyの後（非推奨）
  がある。*/
  .insertAdjacentHTML("afterbegin", componentHTML);

  // CSSの挿入（styleタグを生成してheadに追加）
  const style = document.createElement("style");
  style.textContent = componentCSS;
  document.head.appendChild(style);
  
  // JavaScriptの挿入
  const script = document.createElement("script");
  script.textContent = componentJS;
  document.body.appendChild(script);
  
});

    

    読み込み先のhead内
<!--HTMLの挿入先をclass名で指定していた場合はsectionタグにclass名を付ける-->
<section> class="insert">
  <script src="読み込むjsファイルのURL"></script>
</section>

    

グリッド線

    CSS（styleタグで囲ってhead内）
.gridbox {
  background-image:linear-gradient (
    0deg,transparent calc(100% - 1px),
    #22b14c calc(100% - 1px)
  ),
  linear-gradient (
    90deg,transparent calc(100% - 1px),
    #22b14c calc(100% - 1px)
  );
  background-size:28px 28px;
  background-repeat:repeat;
  background-position:center center;
  padding:5px;
  height:4.5em
}

    

    HTML（body内）
<div class="gridbox"></div>

    

highlight.jsの設置

    CSS（head内）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css">
    
    

    CSS（styleタグで囲ってhead内）
/*他でもarticleタグを使っている場合はclassを追加する*/

/*記事全体*/
article {
  background-color:#161b22;
  padding:0.5em;
  border:solid 3px #30363d;
  border-radius:10px;/*角の丸み*/ 
  margin-bottom:3em
}
/*日付*/
article>div {
  color:#8b949e;
  font-size:0.7em
}
/*題名*/
article>p {
  color:#58a6ff;
  font-size:1.2em;
  font-weight:bold
}
/*デモ*/
article>section {
  background-color:#282a36;
  padding:1em;
  margin-bottom:2em
}
article>hr {margin-bottom:2em}

    

    JavaScript（head内）
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>
  // ハイライトを実行
  hljs.initHighlightingOnLoad();
</script>
    
    

    HTML（body内、任意の位置）
  <article>
    <div>日付</div>
    <p>題名</p>
    <section>
    ここにデモを表示
    </section>
    <hr noshade color="#30363d">
    <pre>
<code>
ここにコード記入
</code>
    </pre>
  </article>

    

タイピングアニメーション

  　CSS（styleタグで囲ってhead内）
/*縦棒の設定*/
.typing-animation::after {
  content: '';
  border-right: 2.5px solid #fff;
  margin-left: 2px;
  animation: flashing 1s linear infinite;
  opacity: 0;
}

/*点滅アニメーション*/
@keyframes flashing {
  0%, 100% {opacity: 0;}
  50% {opacity: 1;}
}

    

    HTML（body内、任意の位置）
<div style="text-align:center"/*文字中央寄せ*/ class="typing-animation"></div>
    
    

    JavaScript
<script>
const typing = (el, sentence) => {
  //文字列を１文字ずつ取り出して処理を実行する
  [...sentence].forEach((char, index) => {
    //0.1秒ごとに文字を出力する
    setTimeout(() => {
      document.querySelector(el).textContent += char;
    }, 100 * (index + 1));
  });
 };
//関数を呼び出す 
typing('.typing-animation', 'Welcome');
</script>