misc.laboradian.com
Webに関する実験コンテンツ一覧
未分類
- ブラウザのベンチマーキング
- cache-test/
- アニメーションSVG。/ ある要素の背景画像をウィンドウに固定して表示する。
- table width test
- Gentelella の解析
- dat.GUI を使ったサンプルページ001
- DataTables を使ってみる
- DataTables で行と列を固定する
- DataTables (+ Bootstrap 3) で行と列を固定する
- e-Stat サンプル
- e-Stat を使ったページのサンプル001
- firebase/1/ (403)
- Firebase Test 2
- Speedtest (example6.html をそのまま使った場合)
- Speedtest (example6.html を一部変更して使用した場合)
- FUTURE IMPERFECT
- ZEROFOUR
- js-sample/window-opener-test/ (403)
- milkcocoa/pc/ (403)
- milkcocoa/sp/ (403)
- Hello, p5.js!!
- PDF 埋め込みテスト
- PDF 埋め込みテスト1
- PDF 埋め込みテスト2
- PDF 埋め込みテスト3
- 定期的に動く画像のサンプル001
- simplest-page-1.php
- simplest-page-2.php
- simplest-page-3.html
- simplest-page-3.php
- simplest-page-4.php
- pubnub/ (403)
- qrcode-reader-page/ (external link)
- トランザクション課題 (エラーになる)
- test001
- alert を無限に表示し続ける
- 素数計算でブラウザに負荷をかける
- Return PNG by PHP
- timesheet/
- TweenMax を使ったサンプルページ001
- ウェブページにアクセスした1回目だけ要素を動かすサンプル001
- WebGLが使える環境かどうかを判定する
- WebP Test
- WordPress の機能を使って独自のPHPファイルにヘッダーとフッターを追加する (error)
- あなたのブラウザが送信した情報
- Source Map Test using UglifyJS2 and Sass
- コントラスト テスト
Web
- Hello AMP World!
- amp/001/b.html
- 検索結果に対する AMP テスト
- Canvas に回転した画像を表示するサンプル001
- IntersectionObserver API Test
- document に関する DOMイベントの発生タイミングを調査する
- Intersection Observer API を使った画像の遅延読み込みサンプル
- Intersection Observer API を使った動画の遅延読み込みサンプル
loading
属性のブラウザ対応テスト
- requestAnimationFrame が呼び出される間隔を測定する
- My IP address (HTML)
- My IP address (Text)
- rel="preload" のテストページ
- rel="preload" のテストページ2
- rel="preload" をどう書くか?
- rel="prefetch" のテストページ
- Service Worker Cache Test 3
- Service Worker Cache Test 4
- Service Worker Cache Test 5
- Service Worker の状態変化テスト
- Push API Test (Service Worker)
- Web Storage API のサンプル001
- Web Workers API のサンプル001
- Canvas と WebGL のサンプル001
- OpenID Connect Test 1
- そのブラウザのサードパーティ Cookie が有効かどうかテストする
- 3rd party cookie test (Samesite)
- Google マップ 埋め込みテスト
- リダイレクトのテスト
- notifications-test/ (403)
- Notification API Test
- The Native File System API テスト
- Osano の Cookie Consent Test
- Web Components
- Tagged templates を試す
- CSRF対策トークンの実験
- クリックジャッキングの実験
- HTTPS/HTTP 混在テスト
- CORS の プリフライト・リクエストを観察する
- 文字列コピーのテスト
- Cookie 上書きテスト
- Screen Wake Lock API を試す
- Web Development for Beginners に関するページ
- Performance Timeline
HTTP(S)
- HTTPメソッドの動作を見るためのサンプル001
- HTTP Range Header Test
- Basic認証をテスト (foo:password)
- Digest認証をテスト (foo:password)
HTML
- dot dir test 1
- タイトルとその内容を複数個並べるときに使用するHTMLタグを比較する
- Picture 要素のテスト
- srcset 属性の実験
- srcset と sizes 属性の実験(1)
- srcset と sizes 属性の実験(2)
- srcset と sizes 属性の実験(3)
- srcset と sizes 属性の実験(4)
- img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年)
- img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年) その2
- img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年) その3
- max-width:100%;height:auto; のテスト
- meta tag (copyright) のテスト
- dl要素内にdiv要素を使ってみる
- プライム記号と似た記号たち
- ウェブページ上で右クリックを禁止する
- 1行目のインデントについて
- HTML その他(ちょっとしたHTMLを試す)
CSS
- Bulma sample
- CSS Flexible Box Layout Module のサンプルページ001
- Flexbox を使ってページ全体を中央寄せにするテスト
- Semantic UI を試すページ1
- CSS: ol 要素の先頭番号のデザインを変更する
- Font size names
- CSS Grid Layout を試す
- CSS Grid Layout を試す (2)
- CSS Grid Layout を試す (3)
- CSS Grid Layout + レスポンシブ(1)
- Tailwind Test 001
- CSS: サイズの単位である %とvwの比較
- Bootstrap 4.3 を日本語向けに設定する
- prefers-color-scheme (CSS) を試す
- CSS による余白設定の実験
- :target 疑似クラス
- CSS Properties and Values API をテストする(カスタムプロパティ)
- CSS Writing Models を使って縦書きしてみる
- CSS: background に URL を指定した場合の挙動をテストする
- Box Model を変更する box-sizing プロパティ
- margin の相殺
- CSS: Scrollbar に関連するプロパティ
- CSSカウンターを使ってみる
- CSSカウンターで見出し番号を振る
フォント
- font-test/1/ (403)
- Web Font に対する font-display のテスト
- Web Font に対する font-display のテスト2
- TypeSquare を使ってみる
アイコン
- Material Icons Test
- Material Icons (All Themes) Sample
- Icons8 の Free Icons を使ってみる
JavaScript
- highlight.js
- 時間とともに風景画像の色が変わっていくサンプル001
- JavaScript ファイルの読み込みと実行のタイミングを調べる(async, defer)
- Dynamic Import Test
- Dynamic Import Test
- Static Import Test
- Static Import Test
- JavaScript で a 要素を追加する
- JavaScript でスライドを作ってみる001
- JavaScriptで回線速度測定
- MathJax のテスト
- 月の満ち欠けのシミュレーション
- NASA Open APIs の実験
- Prism を使ってみる(1)
- React + Redux のサンプル002
- React + Redux のサンプル003: Example: Reddit API
- React + Redux のシンプルなサンプル001
- JavaScriptファイル読み込みテスト1
- JavaScriptファイル読み込みテスト2
- JavaScriptファイル読み込みテスト3
- JavaScriptファイル読み込みテスト4
- Redux の非同期処理サンプル001
- Redux + React Router を使ったサンプルページ001
- スロットマシーンのサンプル001
- スロットマシーンのサンプル002 (Canvas版)
- スロットマシーンのサンプル003
スロットマシーンのサンプル003 (offline対応版)
スロットマシーンのサンプル003 (offline対応版)
- スロットマシーンのサンプル003 (PWAインストール対応版)
- jQueryを使ったタイマーのサンプル
- viewport(width=device-width) のサイズを得る
- webpack + react + redux + mini.css のサンプル001
- webpack 3.x を使ったページのサンプル
- PostCSS をコマンドラインから使う (postcss-cli)
- ES6 Generator に関するメモ
- Web Share API テスト
- Yellow Fade のサンプル
- JavaScript でHTTP(S)リクエストを送信する
- JavaScript: ブラウザが、クラスのプライベートフィールドに対応しているかチェックする
- ブラウザのタブに日付・時刻を表示する
- addEventListener() に渡すコールバック関数内で、自分自身を removeEventListener() する
- Mutation Observer Test
- Luminous を使ってみる
- lit-html を試す
- カスタムイベントを使う
- ECMAScript 2015 で導入された class 構文
- JavaScript で CSS を追加する
Vue
- vue.js の学習001
- vue.js の学習002
- Vue コンポーネントの基本
- DOM Based XSS 1
- Vuetify を CDN で利用するテスト
- vue-rate-it のテスト
PHP
- php-json-api/
- PHP のPDO (MySQL) を使うサンプル001
- PHP: スーパーグローバル(変数)を上書きしてみる
- PHP: password_verify() 関数の動作テスト
- Set-Cookie Test
- PHP: __destruct() のテスト1
- PHP から SQLite を使う
- PHP + SQLite を利用してアクセスカウンターを作る
- PHP: セッションクッキーを観察する
- PHP: http: と https: で使えるセッションクッキーを観察する
- PHP: セッション情報をデータベースに保存する
- ローカルプロキシツールを使って送信したパラメータ値を観察する
- ブラウザの戻るボタンについて調査する
- PHP: ファイルアップロードの処理
Security
- Same-site cookie test 1
- iframe sandbox test (read)
- XSS Test1
- XSS Auditor が有効かどうかチェックする
ページを作成する際の心がけ
作成中のページ
ボツになったページ
おまけ
HTML入門
数学
その他