manabuyasuda

@use '@root/common/styles/index.scss' as *;

.tooltip_content {
  z-index: 1;
  width: 510px;
  max-width: 100%;
  padding: 8px;
  border-radius: 8px;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;

manabuyasuda

GitHub

用語集

• repository（リポジトリ）：ファイルや変更内容が保存される場所のことで、パソコン内にあるものをローカルリポジトリ、GitHubなどローカル以外のサーバ上にあるものをリモートリポジトリと呼ぶ
• 作業ディレクトリ：リモートリポジトリをclone（複製）したディレクトリ（ローカルリポジトリ）のことで、作業中のファイルが含まれる
• ステージングエリア：ローカルリポジトリのなかにあるコミットをする予定のファイルを仮置きしておく場所のこと
• Gitディレクトリ：ステージングエリアにあるファイルをコミット（登録）して、変更が確定したディレクトリ
• branch（ブランチ）：並行して作業を進めるためにmasterブランチからコミットの流れを分岐すること（最終的にmasterブランチにマージ（合体）される）

---

manabuyasuda

.bordering {
  position: relative;
  color: #fff;
  -webkit-text-stroke: 4px #000; // デザインデータ上の縁取り×2

  &::before {
    content: attr(data-text);
    position: absolute;
    -webkit-text-stroke: 0;
  }

manabuyasuda

Noto Sans JP

Noto Sans JPをWebサイトで使う場合、大きく分けて2つの方法があります。

1. CDNを使う場合
2. サーバーにフォントファイルを置く場合

CDNの場合は、他のサイトを含めて一度でも読み込まれていればブラウザ側でキャッシュを持っているので、読み込み速度が速くなることが期待できます。
サーバーのフォントファイルはサブセット化（不要なデータを削除すること）でファイルサイズを削減できるメリットがあります。

基本的にはCDNを利用して、フォールバックとしてサーバーに置いたフォントファイルとシステムフォントを指定するのがいいでしょう。

manabuyasuda

/**
 * ナビゲーションリンクの絶対パスをルート相対パスに変換します。
 * @param {HTMLElement|SVGElement} selector - 対象となるHTML要素またはSVG要素
 * @returns {string} ルート相対パス
 */
const hrefToRootAbsolutePath = selector => {
  // HTMLElementとSVGElementでhrefの取得方法が異なるため、条件分岐を行う
  const absolutePath = selector instanceof HTMLElement ? selector.href : selector.href.baseVal
  const windowLocation = window.location
  // プロトコル（http, https）とホスト（www.example.com）を結合

manabuyasuda

/**
 * 指定された要素がイベントのターゲット要素に含まれているかどうかをチェックします。
 * @param {Event} event チェックしたい`click`などのイベント
 * @param {Array<string>} elements `DOMString`で指定した要素名の配列
 * @returns {boolean} ターゲット要素が指定された要素を含む場合はtrue、そうでない場合はfalse
 * @example
 * import { containsTargetElements } from '@utility/containsTargetElements'
 * document.addEventListener('click', (event) => {
 *   const elements = ['.foo', '#bar', '[data-baz]']
 *   const hasElements = containsTargetElements(event, elements) // => `true` or `false`

manabuyasuda

WindowsからMacに変えた人や、ずっとMacを使っているけど使いこなせていない人に向けてのドキュメントです。

ホームポジションから使えるMacの便利なショートカットをまとめています。

1. カーソル移動に関するショートカット
2. 文字を削除するショートカット
3. 同じアプリケーションの違うウィンドウを選択するショートカット

それ以外のショートカットはAppleのサポートページを確認してください。

manabuyasuda

import { loadDefaultJapaneseParser } from 'budoux'

const parser = loadDefaultJapaneseParser()

/**
 * 文字列を解析して、適切に改行されるように`wbr`タグを挿入します。
 * IEは`wbr`タグに対応していません。
 * @see https://caniuse.com/wbr-element
 * @see https://github.com/google/budoux/tree/main/javascript
 * @param {HTMLElement} element 最適化する要素

manabuyasuda

import { getScrollingElement } from '@utility/getScrollingElement'

/**
 * ウィンドウを固定するCSSです。
 */
const styles = {
  position: 'fixed',
  left: '0',
  overflow: 'hidden',
  width: '100vw',

manabuyasuda

import SweetScroll from 'sweet-scroll'

/**
 * スムーススクロールの共通処理です。
 * https://github.com/tsuyoshiwada/sweet-scroll
 * @example
 * import { scroller } from '@utility/scroller'
 * const element = document.getElementById('element')
 * scroller.toElement(element)
 * element.setAttribute('tabindex', '-1')