misc.laboradian.com

Webに関する実験コンテンツ一覧

目次

  1. 未分類
  2. Web
  3. Web performance
  4. HTTP(S)
  5. HTML
  6. CSS
  7. フォント
  8. アイコン
  9. JavaScript
  10. Vue
  11. PHP
  12. Security

未分類

  1. ブラウザのベンチマーキング
  2. cache-test/
  3. アニメーションSVG。/ ある要素の背景画像をウィンドウに固定して表示する。
  4. table width test
  5. Gentelella の解析
  6. dat.GUI を使ったサンプルページ001 (/dat-gui-sample/001/)（廃止）
    • 古いページでモバイル非対応なので廃止。
  7. DataTables を使ってみる
  8. DataTables で行と列を固定する
  9. DataTables (+ Bootstrap 3) で行と列を固定する
  10. e-Stat サンプル
  11. e-Stat を使ったページのサンプル001
  12. firebase/1/ (403)
  13. Firebase Test 2
  14. Speedtest (example6.html をそのまま使った場合)
  15. Speedtest (example6.html を一部変更して使用した場合)
  16. FUTURE IMPERFECT
  17. ZEROFOUR
  18. js-sample/window-opener-test/ (403)
  19. milkcocoa/pc/ (403)
  20. milkcocoa/sp/ (403)
  21. Hello, p5.js!!
  22. PDF 埋め込みテスト
  23. PDF 埋め込みテスト1
  24. PDF 埋め込みテスト2
  25. PDF 埋め込みテスト3
  26. 定期的に動く画像のサンプル001
  27. simplest-page-1.php
  28. simplest-page-2.php
  29. simplest-page-3.html
  30. simplest-page-3.php
  31. simplest-page-4.php
  32. pubnub/ (403)
  33. qrcode-reader-page/ (external link)
  34. トランザクション課題 (エラーになる)
  35. test001
  36. alert を無限に表示し続ける
  37. 素数計算でブラウザに負荷をかける
  38. Return PNG by PHP
  39. timesheet/
  40. TweenMax を使ったサンプルページ001
  41. ウェブページにアクセスした1回目だけ要素を動かすサンプル001
  42. WebGLが使える環境かどうかを判定する
  43. WebP Test
  44. WordPress の機能を使って独自のPHPファイルにヘッダーとフッターを追加する (error)
  45. あなたのブラウザが送信した情報
  46. Source Map Test using UglifyJS2 and Sass
  47. コントラスト テスト

Web

  1. Hello AMP World!
  2. amp/001/b.html
  3. 検索結果に対する AMP テスト
  4. Canvas に回転した画像を表示するサンプル001
  5. IntersectionObserver API Test
  6. document に関する DOMイベントの発生タイミングを調査する
  7. Intersection Observer API を使った画像の遅延読み込みサンプル
  8. Intersection Observer API を使った動画の遅延読み込みサンプル
  9. loading 属性のブラウザ対応テスト
  10. requestAnimationFrame が呼び出される間隔を測定する
  11. My IP address (HTML)
  12. My IP address (Text)
  13. rel="preload" のテストページ
  14. rel="preload" のテストページ2
  15. rel="preload" をどう書くか？
  16. rel="prefetch" のテストページ
  17. Service Worker Cache Test 3
  18. Service Worker Cache Test 4
  19. Service Worker Cache Test 5
  20. Service Worker の状態変化テスト
  21. Push API Test (Service Worker)
  22. Web Storage API のサンプル001
  23. Web Workers API のサンプル001
  24. Canvas と WebGL のサンプル001
  25. OpenID Connect Test 1
  26. そのブラウザのサードパーティ Cookie が有効かどうかテストする
  27. 3rd party cookie test (Samesite)
  28. Google マップ 埋め込みテスト
  29. リダイレクトのテスト
  30. notifications-test/ (403)
  31. Notification API Test
  32. The Native File System API テスト
  33. Osano の Cookie Consent Test
  34. Web Components
  35. Tagged templates を試す
  36. CSRF対策トークンの実験
  37. クリックジャッキングの実験
  38. HTTPS/HTTP 混在テスト（画像ファイルのみ）
  39. HTTPS/HTTP 混在テスト２（CSS, JS, Image, Iframe）
  40. CORS の プリフライト・リクエストを観察する
  41. 文字列コピーのテスト
  42. Cookie 上書きテスト
  43. Screen Wake Lock API を試す
  44. Web Development for Beginners に関するページ
  45. Performance Timeline
  46. ページトップ位置にある画像とLCPのテスト
  47. インラインの <style> 内から Source Map ファイルを使うテスト
  48. DevTools の Performance パネルを使って Chrome の動作を検証する
  49. ES6(ES2015)以上をサポートしているブラウザとそうでないブラウザを分けてスクリプトを読み分ける
  50. requestIdleCallback を使ってリソースを読み込ませる
  51. facade を使って YouTube 動画を埋め込む (YouTube Lite Embed)
  52. COOP, COEP をテストする (window.open())
  53. DOM Event Listeners が発生する順番を観察する

Web performance

  1. ファーストビュー上の画像とLCPの関係についてテスト

HTTP(S)

  1. HTTPメソッドの動作を見るためのサンプル001
  2. HTTP Range Header Test
  3. Basic認証をテスト (foo:password)
  4. Digest認証をテスト (foo:password)

HTML

  1. dot dir test 1
  2. タイトルとその内容を複数個並べるときに使用するHTMLタグを比較する
  3. Picture 要素のテスト
  4. srcset 属性の実験
  5. srcset と sizes 属性の実験(1)
  6. srcset と sizes 属性の実験(2)
  7. srcset と sizes 属性の実験(3)
  8. srcset と sizes 属性の実験(4)
  9. img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年)
  10. img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年) その2
  11. img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年) その3
  12. img要素の width, height 属性新仕様と srcset を同時に使ってみる (2021年) その4
  13. max-width:100%;height:auto; のテスト
  14. sizes 属性、width 属性、CSS の width プロパティの実験
  15. meta tag (copyright) のテスト
  16. dl要素内にdiv要素を使ってみる
  17. プライム記号と似た記号たち
  18. ウェブページ上で右クリックを禁止する
  19. 1行目のインデントについて
  20. HTML その他（ちょっとしたHTMLを試す）
  21. モバイル端末用ブラウザでツールチップ表示する。etc. (touch イベントなど)

CSS

  1. Bulma sample
  2. CSS Flexible Box Layout Module のサンプルページ001
  3. Flexbox を使ってページ全体を中央寄せにするテスト
  4. Semantic UI を試すページ1
  5. CSS: ol 要素の先頭番号のデザインを変更する
  6. Font size names
  7. CSS Grid Layout を試す
  8. CSS Grid Layout を試す (2)
  9. CSS Grid Layout を試す (3)
  10. CSS Grid Layout を試す (4) 固定幅中央寄せ、レスポンシブ
  11. CSS Grid Layout + レスポンシブ(1)
  12. Tailwind Test 001
  13. CSS: サイズの単位である %とvwの比較
  14. Bootstrap 4.3 を日本語向けに設定する
  15. prefers-color-scheme (CSS) を試す
  16. CSS による余白設定の実験
  17. :target 疑似クラス
  18. CSS Properties and Values API をテストする（カスタムプロパティ）
  19. CSS Writing Models を使って縦書きしてみる
  20. CSS: background に URL を指定した場合の挙動をテストする
  21. Box Model を変更する box-sizing プロパティ
  22. margin の相殺
  23. CSS: Scrollbar に関連するプロパティ
  24. CSSカウンターを使ってみる
  25. CSSカウンターで見出し番号を振る
  26. CSS: aspect-ratio プロパティを使ってみる
  27. CLSスコアを実験するページ(floatレイアウト)
  28. CLSスコアを実験するページ(Gridレイアウト)
  29. テーブルのラベル行を sticky 表示する
  30. 丸番号付きのリストをCSSで実現する

フォント

  1. font-test/1/ (403)
  2. Web Font に対する font-display のテスト
  3. Web Font に対する font-display のテスト2
  4. TypeSquare を使ってみる
  5. Google Fonts を使う（外部リンク利用）
  6. Google Fonts を使う（フォントファイルをサブセット化して利用）
  7. Font Awesome 5 を使ってみる

アイコン

  1. Material Icons Test
  2. Material Icons (All Themes) Sample
  3. Icons8 の Free Icons を使ってみる

JavaScript

  1. highlight.js
  2. 時間とともに風景画像の色が変わっていくサンプル001
  3. JavaScript ファイルの読み込みと実行のタイミングを調べる(async, defer)
  4. Dynamic Import Test
  5. Dynamic Import Test 2
  6. Static Import Test
  7. Static Import Test
  8. JavaScript で a 要素を追加する
  9. JavaScript でスライドを作ってみる001
  10. JavaScriptで回線速度測定
  11. MathJax のテスト
  12. 月の満ち欠けのシミュレーション
  13. NASA Open APIs の実験
  14. Prism を使ってみる(1)
  15. React + Redux のサンプル002
  16. React + Redux のサンプル003: Example: Reddit API
  17. React + Redux のシンプルなサンプル001
  18. JavaScriptファイル読み込みテスト1
  19. JavaScriptファイル読み込みテスト2
  20. JavaScriptファイル読み込みテスト3
  21. JavaScriptファイル読み込みテスト4
  22. Redux の非同期処理サンプル001
  23. Redux + React Router を使ったサンプルページ001
  24. スロットマシーンのサンプル001 (slot-machine-sample001)
  25. スロットマシーンのサンプル002 (Canvas版) (slot-machine-sample002)
  26. スロットマシーンのサンプル003 (slot-machine-sample003)
  27. スロットマシーンのサンプル003 (offline対応版) (slot-machine-sample003/tree/offline)
  28. スロットマシーンのサンプル003 (offline対応版) (slot-machine-sample003)
  29. スロットマシーンのサンプル003 (PWAインストール対応版) (slot-machine-sample003/tree/offline)
  30. jQueryを使ったタイマーのサンプル
  31. viewport(width=device-width) のサイズを得る
  32. webpack + react + redux + mini.css のサンプル001
  33. webpack 3.x を使ったページのサンプル
  34. PostCSS をコマンドラインから使う (postcss-cli)
  35. ES6 Generator に関するメモ
  36. Web Share API テスト
  37. Yellow Fade のサンプル
  38. JavaScript でHTTP(S)リクエストを送信する
  39. JavaScript: ブラウザが、クラスのプライベートフィールドに対応しているかチェックする
  40. ブラウザのタブに日付・時刻を表示する
  41. addEventListener() に渡すコールバック関数内で、自分自身を removeEventListener() する
  42. Mutation Observer Test
  43. Luminous を使ってみる
  44. lit-html を試す
  45. カスタムイベントを使う
  46. ECMAScript 2015 で導入された class 構文
  47. JavaScript で CSS を追加する
  48. ユーザー・インタラクションをトリガーとして .css / .js を読み込む
  49. ScrollHint を使ってみる
  50. barba.js (pjax) を使ってみる
  51. <noscript> のテスト

Vue

  1. vue.js の学習001
  2. vue.js の学習002
  3. Vue コンポーネントの基本
  4. DOM Based XSS 1
  5. Vuetify を CDN で利用するテスト
  6. vue-rate-it のテスト

PHP

  1. php-json-api/
  2. PHP のPDO (MySQL) を使うサンプル001
  3. PHP: スーパーグローバル(変数)を上書きしてみる
  4. PHP: password_verify() 関数の動作テスト
  5. Set-Cookie Test
  6. PHP: __destruct() のテスト１
  7. PHP から SQLite を使う
  8. PHP + SQLite を利用してアクセスカウンターを作る
  9. PHP: セッションクッキーを観察する
  10. PHP: http: と https: で使えるセッションクッキーを観察する
  11. PHP: セッション情報をデータベースに保存する
  12. ローカルプロキシツールを使って送信したパラメータ値を観察する
  13. ブラウザの戻るボタンについて調査する
  14. PHP: ファイルアップロードの処理
  15. PHP: ob_start() によるバッファのスタック構造を検証する

Security

  1. Same-site cookie test 1
  2. iframe sandbox test (read)
  3. XSS Test1
  4. XSS Auditor が有効かどうかチェックする
  5. CSP Level 2 の出力例
  6. CSP Level 3 (Strict CSP) を利用する

ページを作成する際の心がけ

作成中のページ

ボツになったページ

おまけ

HTML入門

数学

その他