サイト制作

Repository

Our repositories

要素技術

• Cookie
• submit ボタン / form.submit
• JavaScript 同一生成元ポリシーと CORS

Chrome DevTools

Chrome DevTools

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
• HTML5/CSS
• Can i use
  https://caniuse.com/
• https://github.com/browserslist/browserslist
  例）package.jsonのbrowserslistキーにターゲットブラウザを指定することで、autoprefixer, babelなどの対象を指定できる
  以下サイトで指定した値に該当するブラウザを確認できる
  https://browserl.ist/

[!NOTE]
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. ブラウザーの互換性に対応ブラウザが掲載

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