#
ドキュメント

Document

自分のための備忘録です。

サイト制作

Repository

Our repositories

テンプレート(Boilerplate)

Boilerplate

フロントエンド

Reference

W3C

  • https://www.w3.org/TR/
    ref. https://www.kanzaki.com/w3c/process.html

CSS

  • https://developer.mozilla.org/ja/docs/Web/Reference

Javascript

  • https://developer.mozilla.org/ja/docs/Web/API
  • http://kangax.github.io

ブラウザ対応状況

HTML5/CSS

  • Can i use
    https://caniuse.com/

JavaScript

  • https://developer.mozilla.org/ja/docs/Web/API

Document.querySelectorの対応ブラウザを調べたいときは以下手順

  1. https://developer.mozilla.org/ja/docs/Web/API にアクセス
  2. Documentを検索・クリック
  3. https://developer.mozilla.org/ja/docs/Web/API/Document
  4. querySelectorを検索・クリック
  5. https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
  6. ブラウザーの互換性に対応ブラウザが掲載
早見表
  • http://kangax.github.io/compat-table/es5/
  • http://kangax.github.io/compat-table/es6/

browserslist

  • https://github.com/browserslist/browserslist
    例)package.jsonのbrowserslistキーにターゲットブラウザを指定することで、autoprefixer, babelなどの対象を指定できる
    以下サイトで指定した値に該当するブラウザを確認できる
    https://browserl.ist/

Babel/Webpack

  • https://ics.media/entry/12140/
  • https://ics.media/entry/16028/
  • https://knowledge.sakura.ad.jp/21623/
    • minify
    • ソースマップ
  • https://aloerina01.github.io/blog/2019-06-21-1

CSS

コーディング規約

詳細度

  • https://specificity.keegan.st/

メディアクエリ/@media

  • メディアクエリ
    • https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax
  • @media
    • https://developer.mozilla.org/ja/docs/Web/CSS/@media

Sass

画像

動画

IntersectionObserver

高速化

モバイルフレンドリー

  • https://search.google.com/test/mobile-friendly
  • https://support.google.com/webmasters/answer/9063469?hl=ja

モバイル端末確認方法

フロントエンドライブラリ

スライダー

  • https://swiperjs.com/

Web font

  • https://www.fontisto.com/

SVG

  • https://norde.io/
  • https://icooon-mono.com/12064-svg%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3/

バックエンド

ドメイン・DNS・レコード

ドメイン・DNS・レコード設定

SSL

Tools

DevTools

  • Command + Shift + p Command Menu 表示
    https://developers.google.com/web/tools/chrome-devtools/command-menu
  • Animation
    • 上記Command MenuにAnimationと入力
    • 3点リーダーからShow console drawerESC)を開く

他ツール