いろいろメモ

コンソールログ関連

JSのコンソールログを見やすくする。

https://qiita.com/ashketcham/items/06e50b3f7f6238d9b51b

変数名と変数値を出力

console.log('name: ' + name);の代わりにconsole.log({変数名});を使用する。

      console.log({name});

処理時間が知りたい

該当の処理の場所をconsole.time();とconsole.timeEnd();で挟む。

      console.time();
      let input = document.getElementsByClassName('input');
      console.timeEnd();

テーブル

console.table(配列の変数);にて、配列の要素を表形式にできる

      <form>
       <input type="text" value="1" class="input">
       <input type="text" value="2" class="input">
       <input type="text" value="3" class="input">
       <input type="text" value="4" class="input">
      </form>
      のようにたくさんの要素がある場合。

      let input = document.getElementsByClassName('input');
      console.table(input);

JavaScript ES2022

ES2022で気に入った仕様

https://zenn.dev/tonkotsuboy_com/articles/es2022-whats-new

クラスフィールド宣言

これまでできなかったクラスフィールド宣言ができるようになった！！
静的なクラスフィールド宣言もできるようになった！
（今まではconstructor()内で宣言するしかなかった。）

      class Human {
         age = 18;
         static category = "animal"
      }

プライベートフィールドとメソッド

フィールド名、メソッド名の最初の文字を#にする。（アクセスするときはthis.#nameみたいな感じ）
従来のフィールドやメソッドはすべてパブリックでした〜。

      class MyClass {
         #foo = "ラーメン";

          #bar() {
             console.log("うどん")
           }
      }

配列の「最後の要素」を取得

配列のat();メソッドを使うと、位置を指定して要素を取得できる。

      const myArray = ["りんご", "バナナ", "ぶどう"];
      console.log(myArray.at(-1)); // ぶどう

[CSS] flexBox関連

ちょっと特殊なCSS

https://meshikui.com/2022/05/27/3362/

flexboxで、SPとPCで順番が違うとき（一部の要素を括ってるとき）

display: contents;を使用する！

      <div class="flex">
       <div class="box">
        <div>pc1 sp1;</div>
        <div>pc2 sp3</div>
        <div>pc3 sp4</div>
       </div>
       <div class="singleBox">pc4 sp2</div>
      </div>

      <style>
        .flex { display: flex; }
        .box { border: 1px solid #000; }
        @media screen and (max-width: 768px) {
           .box {
              display: contents;
           }
           .box :nth-child(1) { order: 1; }
           .box :nth-child(2) { order: 3; }
           .box :nth-child(3) { order: 4; }
           .singleBox { order: 2; }
        }
        </style>

pc1 sp1;

pc2 sp3

pc3 sp4

pc4 sp2

[CSS] IEでは使えなかったCSS関連

新しめのCSS

https://deep-space.blue/web/2263

backdrop-filter (背景のぼかしなど)

backdrop-filterを使用する！
※Firefoxは2022年6月末から利用可能とのこと
ぼかしたり、明るくしたり、白黒やセピアにしたり、透明度を調整したりできる。複数フィルターを重ねることも可能。

      .backdrop-filter {
         width: fit-content;
         padding: 2rem;
         margin: 0 auto;
         text-align: center;
         backdrop-filter: blur(3px);
      }

この領域にフィルターをかける！！！！

この領域にフィルターをかける！！！！
saturate(入力画像の彩度を上げたり下げたりできる）にて、彩度を上げている。
（すりガラス風の場合はこの方が綺麗。縞々だとよくわからないけど）

mix-blend-mode と background-blend-mode (描画モード)

要素の内容物と親要素の内容物を混合するにはmix-blend-modeを使用する！
要素の背景を混合するにはmix-blend-modeを使用する！
どちらもパラメータが色々ある。

      .star {
         mix-blend-mode: screen;
      }

      .stripe.-addStar {
         background-image: url(/assets/images/star.svg), linear-gradient(-45deg,#fff 25%,#99ff00 25%,#99ff00 50%,#fff 50%,#fff 75%,#99ff00 75%,#99ff00);
         background-size: 40px 40px, 20px 20px;
         background-blend-mode: screen;
      }

text-decoration関連のスタイル

下線の太さや距離など調整できる。
太さはtext-decoration-thickness、距離はtext-underline-offsetにて指定する！

      .offset { text-underline-offset: 5px; }
      .color { text-decoration-color: #c00; }
      .thickness { text-decoration-thickness: 3px; }

距離調整（5px下げる）

色調整（赤）

太さ調整（3px）

画面幅によらず、良いところで改行させるwbr

wbrを使用する！
word-break: keep-all; も設定必須っぽい。
ただ、完璧ではなさそうだから、そんなに使えないかも・・・。
（このタグは日本語に適用されていないらしい。だからkeep-allが必須とのこと）

      /* htmlの方で改行したい位置にを入れる */
      <p class="wbrContainer">良い位置で改行したい！<wbr>どうしたらうまくいくのかって話。<wbr>それにはwbrを使用すると。<wbr>さて、うまくいく？</p>
      .wbrContainer {
         word-break: keep-all;
      }

良い位置で改行したい！どうしたらうまくいくのかって話。それにはwbrを使用すると。さて、うまくいく？

[CSS] colissの記事にあったもの

colissの記事の色々。

https://coliss.com/

border-image (はみだしボーダーを作成できる)

border-imageは、border-image-source, border-image-slice, border-image-outsetを含んでいる。
ボーダーを拡張する方向とサイズは、0 100vw 0 0で設定されている。左側に拡張する場合は、0 0 0 100vwとなる。

記事リンク

      .borderOver {
         border-image: linear-gradient(0deg, #1095c1 5px, #0000 0) fill 0 / /0 100vw 0 0;
      }

コンテンツ領域の右側にはみ出すボーダー

コンテンツ領域の左側にはみ出す背景（と言いつつボーダー）
ついでに右側に50pxはみ出す。

ファビコン

700*700か512*512くらいのjpg or pngの元画像を用意する。
それをジェネレータにかけて、ファビコン用画像を用意する。
svgも用意する。

記事リンク

      【必要なファイル】
      ・favicon.ico
      ・apple-touch-icon.png ←サイズは180*180
      ・icon-192.png ←サイズは192*192
      ・icon-512.png ←サイズは512*512
      ・icon.svg
      ・manifest.webmanifest

      【manifest.webmanifestの中身】
      {
         "icons": [
          { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
          { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
         ]
      }

      【head内への記述】
      <link rel="icon" href="/favicon.ico" sizes="any">
      <link rel="icon" href="/icon.svg" type="image/svg+xml">
      <link rel="apple-touch-icon" href="/apple-touch-icon.png">
      <link rel="manifest" href="/manifest.webmanifest">

      ※ ルートにファビコンを置かない場合は、パスの記述を変更する必要あり！

[CSS] なんか色々

ネットで見た情報

box-decoration-break (行ごとに背景を区切れる)

box-decoration-breakは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定できる。
display: inline;の要素に対して有効。

記事リンク

      &.-slice {
         box-decoration-break: slice;
      }
      &.-clone {
         box-decoration-break: clone;
      }

box-decoration-break: slice;を
指定するとこうなる。（規定値こっちかな）

box-decoration-break: clone;を
指定するとこうなる。

ダークモード対応

基本的には@media (prefers-color-scheme: dark) { }でダークモードの装飾を記述すれば適用される。
ちなみに、JSでダークモードかどうかの判断も可能。
// ダークモードかどうかを取得 const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; // ダークモードへの変更イベントハンドラ window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => { if (e.matches) { // ダークモード時の処理 } else { // それ以外のモードの処理 } });

記事リンク

      @media (prefers-color-scheme: dark) {
         color: #eee;
         background-color: #333;
      }
      .btn a {
         @media (prefers-color-scheme: dark) {
             color: #333;
             background: #c9d371;
         }
      }

[1] @media (prefers-color-scheme: dark) { } の中に装飾を記述

ボタン

      :root {
          --main-text: #333;
         --main-bg: #fff;
         --btn-text: #fff;
          --btn-bg: #92d00c;
      }
      @media (prefers-color-scheme: dark) {
         :root {
             --main-text: #eee;
             --main-bg: #333;
             --btn-text: #333;
             --btn-bg: #c9d371;
         }
      }
      &.-dark2 {
         color: var(--main-text);
         background: var(--main-bg);
         .btn a {
             color: var(--btn-text);
             background: var(--btn-bg);
         }
      }

[2] CSS変数を使用して全体の装飾を記載。
@media (prefers-color-scheme: dark) { } 内にはCSS変数のセットのみ記載

ボタン

      .dark-theme {
         color: #eee;
         background-color: #333;
         .btn a {
            color: #333;
            background: #c9d371;
         }
      }

      <script>
        const btn = document.querySelector("#btnMode"); // チェックボックス
        const area = document.querySelector("#dark3");  // 対象領域（普通ならbody）
        // チェックした時の挙動
        btn.addEventListener("change", () => {
           if (btn.checked == true) { // ダークモード
              area.classList.remove("light-theme");
              area.classList.add("dark-theme");
            } else { // ライトモード
              area.classList.remove("dark-theme");
              area.classList.add("light-theme");
           }
        });
        </script>

ダークモード

[3] モード切り替えボタン用意し、領域にクラスをつけることで対応。
JSの処理を入れているよ。
（[2]のようにスタイルを用意して、JSでCSS変数を更新するやり方もOK。
サウザンスマイルズはこのやり方）

ボタン

ローディングアニメーション

本来なら画面全体にかけるものだけど、とりあえずこのサンプル領域にのみ対象とする。

記事リンク

      <div class="loading" id="loading">
         <div class="spinner"></div>
      </div>

      .loading {
         position: absolute;
         top: 0;
         left: 0;
         z-index: 1000;
         width: 100vw;
         height: 100vh;
         ・・・（略）・・・
         .spinner {
            ・・・（略）・・・
         }
         &.loaded {
            visibility: hidden;
            opacity: 0;
         }
      }

      <script>
      window.onload = function() {
         const loadingAnime = document.getElementById('loading');
         loadingAnime.classList.add('loaded');
      }
      </script>

コンテンツエリア

ランダムは求めているランダムではない件

別ページを用意

このページに飛んでね！！(/random/)

記事リンク

GSAPアニメーション

別ページを用意

このページに飛んでね！！(/gsap/)

記事リンク

スクロールスナップ

scroll-snap-type, scroll-snap-align, scroll-snap-stopを使用する！

https://qiita.com/k__watanabe/items/70171a5095e714509af4

      // scrollSnapAreaというdivの中にimgが3つある構造
      .scrollSnapArea {
         overflow-y: scroll;
         scroll-snap-type: y mandatory;
      }
      img {
         object-fit: cover;
         object-position: center;
         scroll-snap-align: start;
         scroll-snap-stop: always;
         scroll-margin-top: 0;   //この記述は本来は不要だが、この値がセットされていたら0にしないとスクロール位置がずれる
      }