kobitoDevelopment

/*
ブラウザストレージの目的別使い分けサンプル

【認証トークン】→ HttpOnly Cookie
  - セキュリティ最優先
  - XSS攻撃から保護
  - サーバー側で設定
  ※注意: localStorageに保存しない（XSS攻撃で盗まれる）

【ユーザー設定（テーマ、言語など）】→ localStorage

kobitoDevelopment

<a href="https://twitter.com/intent/tweet?text=共有するテキスト&url=https://example.com&hashtags=タグ1,タグ2">Twitterで共有</a>
<br>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://example.com">Facebookで共有</a>
<br>
<a href="https://line.me/R/msg/text/?共有するテキスト%0Ahttps://example.com">LINEで共有</a>

kobitoDevelopment

<select id="actionSelect">
  <option value="open">window.openを実行</option>
  <option value="copy">クリップボードにコピー</option>
</select>

kobitoDevelopment

.list {
  display: flex;
  /* justify-content: center;  これだと画面縮小時に両橋が見切れ始める*/
  justify-content: safe center; /* safe centerで解決 */
  gap: 64px;
  & .item {
    flex-shrink: 0;
    font-size: 64px;
  }
}

kobitoDevelopment

p {
  font-size: 64px;
}

.css {
  color: #fff;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke;
}

kobitoDevelopment

<div ここにmask-imageプロパティを動的に着脱するとチラつきが発生する></div>

<style>
  div{
    mask-image:hoge; /* mask-imageプロパティは固定で記述しておき、*/
    mask-size: calc(infinity + 1vmax) /* 巨大なmask-sizeを初期状態にするなどで回避する*/
  }
</style>

kobitoDevelopment

canvas {
  display: block;
  width: 320px;
  aspect-ratio: 16/9;
}

kobitoDevelopment

.auto-resize {
  max-width: 640px;
  width: 100%;
  max-height: 320px;
  resize: none;
  overflow-y: auto;
}

kobitoDevelopment

/* viewportの横幅と高さの実数値を取得する */

@property --viewport-w {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw;
}
@property --viewport-h {
  syntax: "<length>";
  inherits: true;

kobitoDevelopment

/* CSSのstrokeは中心から内側と外側に向かって線を描画するため、10pxと書いても実際に外側の表示される枠線の太さは5px*/
.text {
  font-size: 180px;
  -webkit-text-stroke-width: 10px;
  -webkit-text-stroke-color: red;
  paint-order: stroke;
}

/* SVGのstrokeは、viewboxの中での割合で描画されるため、viewboxとwidth/heightが一人くない場合は
 * その拡大縮小率と同じ割合で枠線の太さも変わる。stroke=2と書いてもそれは2pxが描画される訳ではない