おぼえがき

CSS アイコン

CSS ICON
CSSコードで作られたアイコンがまとめられているアイコン集

矢印アイコン
CSSで作るシンプルな矢印アイコン

CSS GG
ミニマルなアイコンを使えるCSSライブラリ

jQuery

ナビゲーションに「current（カレント）」を付与する

ページ内スクロールのナビゲーションにカレントを付与する

スクロールで要素をフェードインさせる(throttle 関数付き)

スクロールで要素をフェードインさせる：再アニメーション（何度でも発火）するバージョン（throttle 関数付き）

スクロールで要素をフェードインさせる

スクロールで要素をフェードインさせる：再アニメーション（何度でも発火）するバージョン

アコーディオン

slideToggle / 開閉

slideToggle / 一つ開けると他は閉じる

slideToggle / 一つ開けると他は閉じる（一番目は開けておく）

slideUp ・ slideDown / 開閉

slideUp ・ slideDown / 一つ開けると他は閉じる / 開閉

slideUp ・ slideDown / 一つ開けると他は閉じる（一番目は開けておく）

JavaScript（脱jQuery）

ナビゲーションに「current（カレント）」を付与する（使用中）

ページ内スクロールのナビゲーションにカレントを付与する

スクロールで要素をフェードインさせる

スクロールで要素をフェードインさせる：再アニメーション（何度でも発火）するバージョン

「SimpleBar」プラグインを使ってスクロールバーを実装する

クッキー同意するボタン

郵便番号を入力したら自動で住所を表示するフォーム。「YubinBango.js」プラグイン

アコーディオン

シンプル版

一つ開けると他は閉じる

一つ開けると他は閉じる（一番目は開けておく）

モーダルウインドウ

アクセシビリティ対応のモーダルウインドウ

Swiper

フェード（クロスフェード）切替時に動画を自動で再生・一時停止させる（video/.mp4）

スライド間の余白

左右のスライドをチラ見させる（左右に余白）

スクロールして、画面内に現れたら「autoplay」を開始

縦方向のスライダー

上下複数行のスライダー

初期状態で右側だけコンテンツ幅からはみ出る

スマホ・PCだけ有効化／無効化（PC時のみ有効に、スマホ時は無効化）

スマホ・PCだけ有効化／無効化（スマホ時のみ有効に、PC時は無効化）

マウスホイール／タッチパッドでスライド

Splide

左右のスライドをチラ見させる（左右に余白）

特定のブレークポイントでスライダーを解除する

1つのページで複数のSplideを動かす方法

無限ループスライダー

サムネイルと連動するスライダー(ギャラリー)

サムネイル付きスライダー

プログレスバー

slick

ループ再生しないとき：最初と最後だけ矢印を消す

無限ループスライダー

「background-image」の背景画像を使ったスライド

途中のスライドから始める：開始スライドの順番（数値）を指定

WordPress

最初に設定しておきたい初期設定と実施しておきたい設置

VS Codeで関数に波線（通常は赤色または黄色/緑色の警告）が表示されないようにする

LOCAL

「XAMPP」と「LOCAL」のポート競合を解消する

オリジナルテーマを作る

VScode

拡張機能

Sass コンパイルの設定

WordPressの関数に波線（通常は赤色または黄色/緑色の警告）が表示されないようにする

SourceTree

React

インストール

image

アスペクト比計算ツール

アスペクト比計算ツール（画像の縦横比を簡単に計算できるツール）

ダミー画像を作ってくれるツール

ImageRecycle
背景を削除

ファイルコンバーター
ファイルをある形式から別の形式に変換できる

画像軽量化ツール

Optimizilla
同時に20枚までの軽量化が可能
画像の圧縮率を、左右で画像を比較しながら調整できまする

Tiny PNG
一度に20枚、5MBまでの画像が圧縮できる

Squoosh
Googleが推奨する画像軽量化ツール

ImageRecycle
PDFも軽量化できる

Accessibility

ウェブアクセシビリティ検証ツール

aria-label

開閉パネルには「aria-expanded」と「aria-controls」

ナレーター (Windows 標準のスクリーンリーダー)

ツール

Markup Validation Service（マークアップ検証）

CSS Validation Service（CSS検証）

Can I use
・ブラウザでの対応状況についての情報を調べることのできるサイト

Wayback Machine
・過去のWebページ閲覧ができる

HTML5 入れ子チートシート

ImageRecycle
・背景を削除

ファイルコンバーター
・ファイルをある形式から別の形式に変換できる

File Converter
・200以上のフォーマット変換に対応したマルチコンバーター

マルチアイコン（favicon.ico）作成

HTMLエンティティ変換ツール
・HTMLエンティティ(実体参照)のエンコード・デコード、HTMLエスケープ処理を行います

ランダムパスワードジェネレータ
・「1password」のランダムパスワードジェネレータ

ソフト

XAMPP（必須）

CopyExt for x64（必須）
・拡張コピー

WinMerge（必須）
・ファイルとフォルダの差分比較・マージツール

CLaunch
・ボタン型ランチャー

サクラエディタ（必須）
・テキストエディタ

XMedia Recode
・無料の動画一括変換ソフト

画像軽量化ツール

Optimizilla
・同時に20枚までの軽量化が可能
画像の圧縮率を、左右で画像を比較しながら調整できまする

Tiny PNG
・一度に20枚、5MBまでの画像が圧縮できる

Squoosh
・Googleが推奨する画像軽量化ツール

ImageRecycle
・PDFも軽量化できる

Domo

ランディングページ/ 動画・スライドショー

スマホ向けデザイン

パララックス

メインビジュアル：全画面表示
背景画像：MENU、ABOUT、LOCATIONの背景画像は、PC時のみ固定で表示
ABOUTボタン：ホバー時に枠線で囲みます。CSSで表現。
LOCATION：Googlemapの埋込。グレー表示になるようCSSで設定。

固定サイドメニュー

動画：全幅で背景に固定
特徴のボタン：3つの円はリンクにして、ホバー時は左から右にスライドするよう背景色を変更
問い合わせ：ホバー時は枠線を太く「3px」にする
ブレークポイント：「960px」スマホ時はヘッダーを上部に固定

縦書きレイアウト

メイン画像はPCとスマホ表示で切り替え
お知らせ：PC表示は5件、スマホ表示は3件に切り替え
ブレークポイント：768px

CSS：animation

メインビジュアル：CSSアニメーションでフェードで切り替え。
BBBが選ばれる理由：「オンライン対応」を左からスライド、「講師はネイティブ」を右からスライド表示
受講生の声：非表示の状態から、少しづつ大きくなるようにふわっと表示
スクールの概要：背景画像のドット柄を右上から左下へ繰り返し流す
ブレークポイント：900px

CSS：transform

メインビジュアル：CSSアニメーションでフェードで切り替え
BBBが選ばれる理由：「オンライン対応」を左からスライド、「講師はネイティブ」を右からスライド表示
受講生の声：非表示の状態から、少しづつ大きくなるようにふわっと表示
ブレークポイント：900px

その他

Chrome

拡張機能

head

Webフォント

モーダル

input (フォーム)

border

ボタン

ツール

CSS アイコン

アコーディオン

アコーディオン

モーダルウインドウ

LOCAL

画像軽量化ツール

ソフト

画像軽量化ツール

Chrome