サイト制作

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

コーディング規約

• Google HTML/CSS Style Guide

詳細度

• 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

• stylesheet-css-sass.html

画像

• 画像
• SVG

動画

• 動画

IntersectionObserver

• IntersectionObserver

高速化

• Webサイト高速化
• WordPress高速化

モバイルフレンドリー

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

モバイル端末確認方法

• iPhoneを使った確認

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

スライダー

• 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

• 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 drawer（ESC）を開く

他ツール

• Dynamic Dummy Image Generator
• Adobe Color