参考記事・まとめ

カスタマイズ

スクロールバーのカスタマイズ

解像度

💡コツは、ChromeでのViewportサイズ(ブラウザでの表示サイズをAIに聞くこと)

iPhone / iPad / Apple Watch解像度(画面サイズ)早見表

アプリ開発

1. アプリ設計の進め方(1日)

2. アプリ開発の進め方

フレームワークとライブラリの違い

3. 開発の流れと手順(実践編)

エディタ

// VSCode関連

SEO関連

faviconの設定&チェック方法

Googleサーチコンソール登録方法

Googleアナリティクス(GA4)導入&確認方法

**言語・ライブラリ・

フレームワーク**

// HTML系

//CSSクラス命名一覧

// CSS(SCSS)系

// Sass関連

// JavaScript・jQuery

// TypeScript(React × TypeScript)

// React

// Redux(react-redux)

// Next.js

Vue.js / Nuxt.js

package.json

Babel

// フロントエンドのテスト

// axos(外部データ取得)

// PHP関連

Googleフォーム

▼CSS設計

BEM / FLOCSS関連

ノーコードツール

Bubble

API

▼実践

Web APIの設計・実装

▼解説

Web概論

RESTとは【アーキテクチャ含む】

URIの仕様と設計【ルールを学ぶ】

HTTP【基本 / メソッド / ステータスコード / ヘッダ】

コード管理・タスクランナー

// GitHub関連

// Gulp関連

**サーバー・

ホスティングサービス**

ホスティングサービス

// サーバー関連

Web Storage

localStorage

CMS(開発環境含む)

// ヘッドレスCMS

// Local by Flywheel関連

// WordPress関連

// Snow Monkey関連

// SWELL関連

EC

// Shopify関連

ECサイト関連

おすすめサイト・教材集

サイボウズの公開資料【めちゃ勉強になる✨】

TAKさんの記事【Zenn】

コードの勉強になるサイト集

アイデア

メインビジュアルアイデア

案件参考サイト集

実装が気になるサイト

デザイン

// デザイン・デザインカンプ関連

その他

// SEO対策

// Windows10⇔Macでファイル/フォルダを共有する方法

スニペット

よく使うCSSクラス名

パーツ集

JavaScript集

横スクロールの原因箇所探し

React(React × TypeScript) / Next.js

Vue.js / Nuxt.js スニペット

コーディングテスト

変数

typography.scssの書き方見本

カラー変数の書き方見本

制作物

ec-app

【Bubble】Kagus

便利なもの

APIの動きを確認

httpbin.org

APIからダミーデータ取得

JSONPlaceholder

アイコン・ファビコン・ロゴ

ファビコン作成&チェックツール

ロゴ無料作成サイト7選

FLAT ICON DESIGN

Font Awesome

イラスト・画像

イラストサイト集

O-DAN(無料写真素材集)

タダピク(無料画像検索エンジン)

ダミー画像に【Unsplash】

Webデザインアイデア帳

動くWebデザインアイディア帳

Webフォント

Adobe Fonts

Adobe Fontsの使い方

Google Fonts

画像変換ツール

サルワカ 画像をWebPに変換(JPEG / PNG対応)

画像圧縮ツール

SVG画像圧縮サイト集