投稿日：2022-01-08T19:09:00+09:00

GIF画像のデータ形式とHTML+JavaScript (ローカル生成)のサンプルプログラム

GIF のデータ形式大雑把に以下の並びになっています。バイト位置バイト数内容 0 6 ヘッダ (Header) 6 7 論理画面記述子 (Logical Screen Descriptor) (13) - （共通色表：存在する場合） - - 記述子 (Descriptor) ... ... ... - 1 終端子 (Trailer) ヘッダ (Header) バイト位置バイト数内容 0 3 花押 (Signature) 3 3 版 (Version) : 「87a」または「89a」花押 (Signature) バイト位置文字 10進 16進 0 'G' 71 0x47 1 'I' 73 0x49 2 'F' 70 0x46 版 (Version) 「87a」バイト位置文字 10進 16進 3 '8' 56 0x38 4 '7' 55 0x37 5 'a' 79 0x61 版 (Version) 「89a」バイト位置文字 10進 16進 3 '8' 56 0x38 4 '9' 57 0x39 5 'a' 79 0x61 論理画面記述子 (Logical Screen Descriptor) バイト位置内容 6 画面の幅の下位8ビット (Logical Screen Width) 7 画面の幅の上位8ビット (Logical Screen Width) 8 画面の高さの下位8ビット (Logical Screen Height) 9 画面の高さの上位8ビット (Logical Screen Height) 10 混合情報 <Packed Fields> 11 背景色番号 (Background Color Index) 12 ピクセル縦横比 (Pixel Aspect Ratio) (13) （共通色表：存在する場合）　(Global Color Table) 混合情報 <Packed Fields> ビット位置ビット数内容備考 0 3 共通色数のビット数(Size of Global Color Table) SGCT と略す 3 1 共通色表は重要度順になっている(Sort Flag) 4 3 論理画面の色解像度(Color Resolution) ビット数（1〜8）を（0〜7）とする 7 1 共通色表あり(Global Color Table Flag) ピクセル縦横比 (Pixel Aspect Ratio) 計算式は次のとおり。 Aspect\ Ratio = \frac{ Pixel\ Aspect\ Ratio + 15 }{ 64 } = \frac{ 幅 } { 高 } 正方形 $\left[1:1\right]$ は $\left(Pixel\ Aspect\ Ratio = 49 \right)$ とする。共通色表 (Global Color Table) 共有色表が存在する場合は $\left( n=2^{SGCT+1} \right)$ 個の色情報が必要です。色番号バイト位置（共通色表） +0 +1 +2 $0$ $0$ R[0] G[0] B[0] $1$ $3$ R[1] G[1] B[1] ... ... ... ... ... $n-1$ $3(n-1)$ R[n-1] G[n-1] B[n-1] $n$ は最大で $256$ です。記述子 (Descriptor) 記述子には以下の種類があります。先頭バイト値(Descriptor) 後続バイト値(Label) 内容 0x2C - 画像記述子 (Image Descriptor) 0x3B - 終端子 (Trailer) 0x21 必要「89a」版による拡張 0x21 0xF9 図形制御拡張 (Graphic Control Extension) 0x21 0xFE 注釈拡張 (Comment Extension) 0x21 0x01 文字画面拡張 (Plain Text Extension) 0x21 0xFF 応用拡張 (Application Extension) 画像記述子 (Image Descriptor) バイト位置（画像記述子）内容 0 画像記述子 (Image Separator) : 0x2C (Image Descriptor) 1 画像の位置（左）の下位8ビット (Image Left Position) 2 画像の位置（左）の上位8ビット (Image Left Position) 3 画像の位置（上）の下位8ビット (Image Top Position) 4 画像の位置（上）の上位8ビット (Image Top Position) 5 画像の幅の下位8ビット (Image Width) 6 画像の幅の上位8ビット (Image Width) 7 画像の高さの下位8ビット (Image Height) 8 画像の高さの上位8ビット (Image Height) 9 混合情報 <Packed Fields> (10) （固有色表：存在する場合）　(Local Color Table) (?) 色番式画像 (Table Based Image Data) 混合情報 <Packed Fields> ビット位置ビット数内容備考 0 3 固有色数のビット数(Size of Local Color Table) SLCT と略す 3 2 予約 (Reserved) 5 1 固有色表は重要度順になっている(Sort Flag) 6 1 縞状形式 (Interlace Flag) 7 1 固有色表あり(Local Color Table Flag) 縞状形式 (Interlace Flag) 縦方向を、次の順に並び替える。先頭行(Y=0)から8行間隔 5行目(Y=4)から8行間隔 3行目(Y=2)から4行間隔 2行目(Y=1)から2行間隔固有色表 (Local Color Table) 固有色表が存在する場合は $\left( n=2^{SLCT+1} \right)$ 個の色情報が必要です。色番号バイト位置（固有色表） +0 +1 +2 $0$ $0$ R[0] G[0] B[0] $1$ $3$ R[1] G[1] B[1] ... ... ... ... ... $n-1$ $3(n-1)$ R[n-1] G[n-1] B[n-1] $n$ は最大で $256$ です。色番式画像 (Table Based Image Data) バイト位置（色番式画像）内容備考 0 LZW 最小コード幅 (LZW Minimum Code Size) LMCS と略す 1 圧縮画像（副塊情報形式 : Data Sub-blocks） LZW 圧縮圧縮画像画像の幅と高さを $w,h$ とすると $(w \times h)$ 個の色番号表が画像データとなります。＼ 0 1 ... w-1 0 $c_0$ $c_1$ ... $c_{w-1}$ 1 $c_w$ $c_{w+1}$ ... $c_{2w-1}$ ... ... ... ... ... h-1 $c_{w(h-1)}$ $c_{w(h-1)+1}$ ... $c_{w h - 1}$ 圧縮画像は、画像データを LZW アルゴリズムで圧縮して副塊情報形式 (Data Sub-blocks) で格納します。副塊情報形式 (Data Sub-blocks) バイト位置（副塊情報形式）内容 $0$ 後続のバイト数 $N$ $1$ データ列（$N$ バイト） $N+2$ 後続のバイト数 $N+3$ データ列（続き） ... ... ... ... ... ... - 後続のバイト数 - データ列（続き） - 後続のバイト数 = 0 後続のバイト数は最大で 255 です。「89a」版による拡張「89a」版による拡張は、以下の形式となっています。バイト位置（識別子）内容 0 「89a」版拡張 (Extension Introducer)：0x21 (Descriptor) 1 表題 (Label) 2 副塊情報形式 (Data Sub-blocks) - 〃この形式により、未知の表題 (Label) を未知のデータとして処理可能になっています。図形制御拡張 (Graphic Control Extension) バイト位置（図形制御拡張）内容 0 「89a」版拡張 (Extension Introducer)：0x21 (Descriptor) 1 図形制御表題 (Graphic Control Label)：0xF9 2 情報の大きさ：0x04 (副塊の後続バイト数) 3 混合情報 <Packed Fields> 4 遅延時間(1/100秒単位)の下位8ビット (Delay Time) 5 遅延時間(1/100秒単位)の上位8ビット (Delay Time) 6 透明色とする色番号 (Transparet Color Index) 7 終端：0x00 (副塊の後続バイト数) 混合情報 <Packed Fields> ビット位置ビット数内容 0 3 予約 (Reserved) 3 3 消去方法 (Disposal Method) 6 1 ユーザー操作による遅延時間の短縮 (User Input Flag) 7 1 透明色が有効 (Transparent Color Flag) 消去方法 (Disposal Method) 値内容 0 未定義（デコーダは何もしない） 1 消去しない 2 背景色 (論理画面記述子で指定) を使う 3 一つ前の画像に戻す 4-7 （予約）注釈拡張 (Comment Extension) バイト位置（注釈拡張）内容 0 「89a」版拡張 (Extension Introducer)：0x21 (Descriptor) 1 注釈表題 (Comment Label)：0xFE 2 注釈情報 (副塊情報形式：Data Sub-blocks) - 〃文字画面拡張 (Plain Text Extension) バイト位置（文字画面拡張）内容 0 「89a」版拡張 (Extension Introducer)：0x21 (Descriptor) 1 文字画面表題 (Plain Text Label)：0x01 2 文字画面設定のサイズ (副塊情報形式：Data Sub-blocks)：0x0C 3 文字画面の位置（左）の下位8ビット (Text Grid Left Position) 4 文字画面の位置（左）の上位8ビット (Text Grid Left Position) 5 文字画面の位置（上）の下位8ビット (Text Grid Top Position) 6 文字画面の位置（上）の上位8ビット (Text Grid Top Position) 7 文字画面の幅の下位8ビット (Text Grid Width) 8 文字画面の幅の上位8ビット (Text Grid Width) 9 文字画面の高さの下位8ビット (Text Grid Height) 10 文字画面の高さの上位8ビット (Text Grid Height) 11 文字の幅 (Character Cell Width) 12 文字の高さ (Character Cell Height) 13 文字の共通色番号 (Text Foreground Color Index) 14 文字背景の共通色番号 (Text Background Color Index) 15 任意の文字列 (副塊情報形式：Data Sub-blocks) (Plain Text Data) - 〃応用拡張 (Application Extension) バイト位置（応用拡張）内容 0 「89a」版拡張 (Extension Introducer)：0x21 (Descriptor) 1 応用拡張表題 (Application Extension)：0xFF 2 識別子と認識コードのサイズ (副塊情報形式: Data Sub-blocks)：0x0B 3 8バイトの識別子 (Application Identifier) 11 3バイトの認識コード (Application Authentication Code) 14 任意の応用拡張情報 (副塊情報形式：Data Sub-blocks) (Application Data) - 〃終端子 (Trailer) バイト位置（オフセット）内容 0 終端子 (Trailer)：0x3B GIF における LZW のパラメータ LZW 最小コード幅 (LZW Minimum Code Size) を LMCS とします。内容値　　　　　　　　各コードのビット幅（可変長データ） 3 〜 12 LMCS の最小値 2 初期化コード<Clear Code> $2^{LMCS}$ 最初のコード $2^{LMCS} + 1$ コードの最大値 $2^{12} - 1$ LZW の圧縮と展開クリアコードを省いているので完全ではありませんが、圧縮と展開のイメージが掴めればと思います。圧縮と展開の動作を示すサンプルプログラム lzw_sample.js // サンプル: (〒899-7103 鹿児島県)志布志市志布志町志布志 // const SAMPLE_TEXT = 'SHIBUSHISHI SHIBUSHICHO SHIBUSHI'; // コードと文字の変換. const CODE_TO_TEXT = ' BCHIOSU'; const codeToChar = ((c) => CODE_TO_TEXT[c]); // 文字列の並びを反転. const stringReverse = ((s) => s.split('').reverse().join('')); /* * LZW 圧縮 */ function encodeLZW(data, minimum_bits=3) { let encode_data = ''; // 圧縮データ列(10進). let encode_binary = ''; // 圧縮データ列(2進). // 空データ対策. if (data.length == 0) return [encode_data, encode_binary]; const code_end = (1 << minimum_bits); // 終端コード. const code_clear = code_end + 1; // 辞書クリアコード. let code_dict; // 文字列の辞書. let code_curr; // 辞書に追加する文字列のコード. // 辞書の初期化処理. // code_dict = { // ' ': 0, 'B': 1, 'C': 2, 'H': 3, // 'I': 4, 'O': 5, 'S': 6, 'U': 7, // } const initDict = function() { code_dict = new Map(); for (let i = 0; i < CODE_TO_TEXT.length; i++) code_dict.set(codeToChar(i), i); code_curr = code_clear; }; // 圧縮コードのビット列を生成. const make_binary = function(code) { bits = 32 - Math.clz32(code_curr); // 出力するデータのビット数を求める. binary = ''; for (let i = 0; i < bits; i++) binary = String((code >> i) & 1) + binary; return binary; } initDict(); // 辞書の初期化. console.log('圧縮: \'' + data + '\''); console.log('最小ビット = ' + minimum_bits); console.log('終端コード = ' + code_end); console.log('クリアコード = ' + code_clear); console.log('圧縮コードの先頭 = ' + (code_clear + 1)); let diter = data[Symbol.iterator](); // 参照するデータのイテレータ. let str = ''; // 検索文字列. let bin_curr; // 最初の圧縮コード for (;;) { let dinf = diter.next(); // 配列から文字を取り出す. if (dinf.done) break; // データがなければ終了. let ch = dinf.value; // 文字データ. str += ch; // 検索文字列の更新. let bin_try = code_dict.get(str); if (bin_try != undefined) { console.log('文字[\'' + ch + '\'] : 辞書あり: \'' + str + '\''); bin_curr = bin_try; // 検索結果を更新. continue; // 既に辞書にあれば検索文字列を長くする(次のデータへ). } console.log('文字[\'' + ch + '\'] : 辞書なし: \'' + str + '\''); // 圧縮コードは前回の検索結果を出力する. let binary = make_binary(bin_curr); encode_data += ' ' + bin_curr; encode_binary += ' ' + binary; // 辞書に文字列を登録する. code_dict.set(str, ++code_curr); console.log(' 圧縮コード(前回分): \'' + str.slice(0, -1) + '\':' + bin_curr + '=' + binary); console.log(' 新規辞書登録文字列: \'' + str + '\':' + code_curr); /* 本当は code_curr が最大コードに達したら、辞書クリアコードの発行と辞書の初期化が必要 */ // 文字列の最終文字は圧縮保留状態なので、その文字から再開する. str = ch; bin_curr = code_dict.get(str); } {// 最後の圧縮コードを出力する. let binary = make_binary(bin_curr); encode_data += ' ' + bin_curr; encode_binary += ' ' + binary; console.log(' 最後の圧縮コード : \'' + str + '\':' + bin_curr + '=' + binary); } {// 終端コードを出力する. let binary = make_binary(code_end); encode_data += ' ' + code_end; encode_binary += ' ' + binary; console.log(' 終端コード : ' + code_end + '=' + binary); } return [encode_data, encode_binary]; } // 圧縮データを得る. const encode_data = function() { const [encode_list, encode_binary] = encodeLZW(SAMPLE_TEXT); const binaries = encode_binary.slice(1).split(' '); const encbin = binaries.reduce(function(p, v) { return p + stringReverse(v); }, ''); let encstr = encbin; let encdat = []; while (encstr.length > 8) { encdat.push(stringReverse(encstr.slice(0, 8))); encstr = encstr.slice(8); } if (encstr.length > 0) encdat.push(stringReverse((encstr + '00000000').slice(0, 8))); const data = encdat.map((d) => Number('0b' + d)); console.log('圧縮コード(10進):' + encode_list); console.log('圧縮コード( 2進):' + encode_binary); console.log(binaries); // console.log(encbin); console.log('リトル・エンディアンで詰めた圧縮データ（バイト列）'); console.log(encdat); console.log(data); return data; }(); /* * LZW 解凍 */ function decodeLZW(data, minimum_bits=3) { const code_end = (1 << minimum_bits); // 終端コード. const code_clear = code_end + 1; // 辞書クリアコード. let code_dict; // 文字列の辞書. let code_curr; // 辞書に追加する文字列のコード. // 辞書の初期化処理. const initDict = function() { code_dict = [...Array(code_end)].map((_, i) => codeToChar(i)); code_dict.push(undefined, undefined); code_curr = code_clear + 1; }; // データからビット列を取り出す関数. let data_bit_pos = 0; const read = function() { bits = 32 - Math.clz32(code_curr); // 入力するデータのビット数を求める. let bps = (data_bit_pos >> 3); let bpe = ((data_bit_pos + bits - 1) >> 3); let v = data[bps]; if (bps != bpe) { v |= data[++bps] << 8; if (bps != bpe) v |= data[++bps] << 16; } let s = (data_bit_pos & 7); let m = ((1 << bits) - 1); data_bit_pos += bits; return ((v >> s) & m); }; initDict(); // 辞書の初期化. console.log('解凍: 入力は ' + data.length + ' バイト'); console.log('最小ビット = ' + minimum_bits); console.log('終端コード = ' + code_end); console.log('クリアコード = ' + code_clear); console.log('圧縮コードの先頭 = ' + (code_clear + 1)); let decode_data = ''; let code_last = undefined; let char_last = undefined; for (;;) { const code = read(); // コード・データの取得. // 終端コードならば終了. if (code == code_end) { console.log('コード(終端): ' + code); break; } // クリアコードならば辞書の初期化. // if (code == code_clear) { // console.log('クリアコード: ' + code); // initDict(); // code_last = undefined; // char_last = undefined; // continue; // } if (code_last == undefined) { // 辞書を初期化した直後のコード処理. code_last = code; char_last = codeToChar(code); decode_data += char_last; // 1文字出力する console.log('コード(先頭): \'' + char_last + '\':' + code); continue; } let data_last = code_dict[code_last]; let code_data; if (code < code_curr) { // コードは辞書内にあるので、データを辞書から取り出す. code_data = code_dict[code]; console.log('コード(辞書): \'' + code_data + '\':' + code); } else if (code == code_curr) { // 圧縮時に辞書に追加されたパターンに追随する. code_data = data_last + char_last; console.log('コード(追随): \'' + code_data + '\':' + code); } else { console.log('コード(失敗): ' + code + ' > ' + code_curr); throw 'デコード失敗：データの異常を検出しました'; } decode_data += code_data; // データを出力する. // 辞書を更新 char_last = code_data[0]; code_dict.push(data_last + char_last); console.log(' 辞書追加: \'' + data_last + char_last + '\':' + code_curr); code_curr++; // 次へ code_last = code; } return decode_data; } // 圧縮データの解凍をする. console.log('解凍結果: \'' + decodeLZW(encode_data) + '\''); 実行結果 $ node Welcome to Node.js v16.13.1. Type ".help" for more information. > $ node --trace-uncaught lzw_sample.js 圧縮: 'SHIBUSHISHI SHIBUSHICHO SHIBUSHI' 最小ビット = 3 終端コード = 8 クリアコード = 9 圧縮コードの先頭 = 10 文字['S'] : 辞書あり: 'S' 文字['H'] : 辞書なし: 'SH' 圧縮コード(前回分): 'S':6=0110 新規辞書登録文字列: 'SH':10 文字['I'] : 辞書なし: 'HI' 圧縮コード(前回分): 'H':3=0011 新規辞書登録文字列: 'HI':11 文字['B'] : 辞書なし: 'IB' 圧縮コード(前回分): 'I':4=0100 新規辞書登録文字列: 'IB':12 文字['U'] : 辞書なし: 'BU' 圧縮コード(前回分): 'B':1=0001 新規辞書登録文字列: 'BU':13 文字['S'] : 辞書なし: 'US' 圧縮コード(前回分): 'U':7=0111 新規辞書登録文字列: 'US':14 文字['H'] : 辞書あり: 'SH' 文字['I'] : 辞書なし: 'SHI' 圧縮コード(前回分): 'SH':10=1010 新規辞書登録文字列: 'SHI':15 文字['S'] : 辞書なし: 'IS' 圧縮コード(前回分): 'I':4=0100 新規辞書登録文字列: 'IS':16 文字['H'] : 辞書あり: 'SH' 文字['I'] : 辞書あり: 'SHI' 文字[' '] : 辞書なし: 'SHI ' 圧縮コード(前回分): 'SHI':15=01111 新規辞書登録文字列: 'SHI ':17 文字['S'] : 辞書なし: ' S' 圧縮コード(前回分): ' ':0=00000 新規辞書登録文字列: ' S':18 文字['H'] : 辞書あり: 'SH' 文字['I'] : 辞書あり: 'SHI' 文字['B'] : 辞書なし: 'SHIB' 圧縮コード(前回分): 'SHI':15=01111 新規辞書登録文字列: 'SHIB':19 文字['U'] : 辞書あり: 'BU' 文字['S'] : 辞書なし: 'BUS' 圧縮コード(前回分): 'BU':13=01101 新規辞書登録文字列: 'BUS':20 文字['H'] : 辞書あり: 'SH' 文字['I'] : 辞書あり: 'SHI' 文字['C'] : 辞書なし: 'SHIC' 圧縮コード(前回分): 'SHI':15=01111 新規辞書登録文字列: 'SHIC':21 文字['H'] : 辞書なし: 'CH' 圧縮コード(前回分): 'C':2=00010 新規辞書登録文字列: 'CH':22 文字['O'] : 辞書なし: 'HO' 圧縮コード(前回分): 'H':3=00011 新規辞書登録文字列: 'HO':23 文字[' '] : 辞書なし: 'O ' 圧縮コード(前回分): 'O':5=00101 新規辞書登録文字列: 'O ':24 文字['S'] : 辞書あり: ' S' 文字['H'] : 辞書なし: ' SH' 圧縮コード(前回分): ' S':18=10010 新規辞書登録文字列: ' SH':25 文字['I'] : 辞書あり: 'HI' 文字['B'] : 辞書なし: 'HIB' 圧縮コード(前回分): 'HI':11=01011 新規辞書登録文字列: 'HIB':26 文字['U'] : 辞書あり: 'BU' 文字['S'] : 辞書あり: 'BUS' 文字['H'] : 辞書なし: 'BUSH' 圧縮コード(前回分): 'BUS':20=10100 新規辞書登録文字列: 'BUSH':27 文字['I'] : 辞書あり: 'HI' 最後の圧縮コード : 'HI':11=01011 終端コード : 8=01000 圧縮コード(10進): 6 3 4 1 7 10 4 15 0 15 13 15 2 3 5 18 11 20 11 8 圧縮コード( 2進): 0110 0011 0100 0001 0111 1010 0100 01111 00000 01111 01101 01111 00010 00011 00101 10010 01011 10100 01011 01000 [ '0110', '0011', '0100', '0001', '0111', '1010', '0100', '01111', '00000', '01111', '01101', '01111', '00010', '00011', '00101', '10010', '01011', '10100', '01011', '01000' ] リトル・エンディアンで詰めた圧縮データ（バイト列） [ '00110110', '00010100', '10100111', '11110100', '11000000', '01101011', '01001111', '10001100', '00100010', '00010111', '01011101', '00001000' ] [ 54, 20, 167, 244, 192, 107, 79, 140, 34, 23, 93, 8 ] 解凍: 入力は 12 バイト最小ビット = 3 終端コード = 8 クリアコード = 9 圧縮コードの先頭 = 10 コード(先頭): 'S':6 コード(辞書): 'H':3 辞書追加: 'SH':10 コード(辞書): 'I':4 辞書追加: 'HI':11 コード(辞書): 'B':1 辞書追加: 'IB':12 コード(辞書): 'U':7 辞書追加: 'BU':13 コード(辞書): 'SH':10 辞書追加: 'US':14 コード(辞書): 'I':4 辞書追加: 'SHI':15 コード(辞書): 'SHI':15 辞書追加: 'IS':16 コード(辞書): ' ':0 辞書追加: 'SHI ':17 コード(辞書): 'SHI':15 辞書追加: ' S':18 コード(辞書): 'BU':13 辞書追加: 'SHIB':19 コード(辞書): 'SHI':15 辞書追加: 'BUS':20 コード(辞書): 'C':2 辞書追加: 'SHIC':21 コード(辞書): 'H':3 辞書追加: 'CH':22 コード(辞書): 'O':5 辞書追加: 'HO':23 コード(辞書): ' S':18 辞書追加: 'O ':24 コード(辞書): 'HI':11 辞書追加: ' SH':25 コード(辞書): 'BUS':20 辞書追加: 'HIB':26 コード(辞書): 'HI':11 辞書追加: 'BUSH':27 コード(終端): 8 解凍結果: 'SHIBUSHISHI SHIBUSHICHO SHIBUSHI' サンプルプログラム HTML+JavaScriptでローカル生成[少々長いので折りたたみ] gif_test.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>GIF プログラムのテスト</title> <style> body { margin-left: auto; margin-right: auto; width: 750px; } table { border: solid 1px gray; border-collaspe: collaspe; border-spacing: 0; } th, td { border: solid 1px gray; padding: 4px; } </style> </head> <body> <h2>GIF プログラムのテスト</h2> <table> <tr> <td style="text-align: center;"> Sample 1<br/> <span id="sample1"></span> </td> </tr> <tr> <td style="text-align: center;"> Sample 2<br/> <span id="sample2"></span><br/> 乱数を使用しているのでページを開く度に異なる </td> </tr> <tr> <td style="text-align: center;"> Sample 3<br/> <span id="sample3"></span><br/> 乱数を使用しているのでページを開く度に異なる </td> </tr> <tr> <td style="text-align: center;"> Sample 4<br/> <span id="sample4"></span><br/> 乱数を使用しているのでページを開く度に異なる </td> </tr> <tr> <td style="text-align: center;"> Sample 5<br/> <span id="sample5"></span><br/> 乱数を使用しているのでページを開く度に異なる </td> </tr>  <tr> <td style="text-align: center;"> Sample A1<br/> <span id="sampleA1"></span><br/> 乱数を使用しているのでページを開く度に異なる </td> </tr> </table> <script type="text/javascript">  </script> </body> </html>

　 Tweet
Qiitaで続きを読む

投稿日：2022-01-08T18:44:38+09:00

Scratchの作品をサイトに埋め込む方法

Scratchの作品をサイトに埋め込む方法 ①作品ページに行き、「リンクをコピー」ボタンを押す ②「埋め込みコードをコピー」をクリック ③HTMLの中に書く <body> <iframe src="https://scratch.mit.edu/projects/568126788/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen ></iframe> </body> ④完了こんな感じに表示されます Scratchのマークをクリックすると、Scratchのトップページを開けます。

　 Tweet
Qiitaで続きを読む

投稿日：2022-01-08T16:00:43+09:00

アクセシビリティを意識した<Table>の作り方

概要 HTMLのTABLEタグでテーブルを作るとき、いろんなタグが使うことができる。 <table>からはじまり、<thead>、<tbody>、<tr>、<th>、<rd>など、 Tableを作るのにたくさんタグが使うことができ、複雑でややこしい。この記事では、テーブルで使うことができるタグの役割を会せる、テーブルができる最小のサンプルとアクセシビリティを意識したサンプルの解説を行います。 TABLEで使えるタグについて <table> : 表要素テーブル形式のデータを表すフローコンテンツです。 <table>  </table> <caption> : 表キャプション要素テーブルのキャプション (またはタイトル) を指定する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>  </table> <colgroup> : 列グループ定義要素テーブル内の列(column)のグループを定義する要素です。子要素の、<col>のspan属性を指定することで、列をグループ化できます。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2">  <col span="2">  </colgroup>  </table> <thead> : 表ヘッダー要素テーブルの列の見出しを定義する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2">  <col span="2">  </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead>  </table> <tbody> : 表本体要素テーブルの本体要素で、行要素の<tr>を内包します。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2">  <col span="2">  </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead> <tbody> <tr> <th>太郎くん</th> <td>5個</td> 　　　　　　　　　　　　<td>10個</td> <td>3個</td> 　　　　　　　　　　　　<td>2個</td> </tr> <tr> <th>二郎くん</th> <td>2個</td> 　　　　　　　　　　　　<td>15個</td> <td>2個</td> 　　　　　　　　　　　　<td>4個</td> </tr> </tbody>  </table> <tfoot> : 表本体要素テーブル内の列を総括する行を追加する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2">  <col span="2">  </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead> <tbody> <tr> <th>太郎くん</th> <td>5個</td> 　　　　　　　　　　　　<td>10個</td> <td>3個</td> 　　　　　　　　　　　　<td>2個</td> </tr> <tr> <th>二郎くん</th> <td>2個</td> 　　　　　　　　　　　　<td>15個</td> <td>2個</td> 　　　　　　　　　　　　<td>4個</td> </tr> </tbody> <tfoot> <tr> <th>合計</th> <td>7個</td> 　　　　　　　　　　　　<td>25個</td> <td>5個</td> 　　　　　　　　　　　　<td>6個</td> </tr> </tfoot> </table> <tr> : 表本体要素表内でセルの行を定義する要素で、<th> と <td>を内容します。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2">  <col span="2">  </colgroup> <thead> <tr>  </tr> </thead> <tbody> <tr>  </tr> <tr>  </tr> </tbody> <tfoot> <tr>  </tr> </tfoot> </table> <th> : table header要素表のセルのヘッダーであるセルを定義する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2">  <col span="2">  </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead> <tbody> <tr> <th>太郎くん</th>  </tr> <tr> <th>二郎くん</th>  </tr> </tbody> <tfoot> <tr> <th>合計</th>  </tr> </tfoot> </table> <td> : table data要素表のセルのデータを定義する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2">  <col span="2">  </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead> <tbody> <tr> <th>太郎くん</th> <td>5個</td> 　　　　　　　　　　　　<td>10個</td> <td>3個</td> 　　　　　　　　　　　　<td>2個</td> </tr> <tr> <th>二郎くん</th> <td>2個</td> 　　　　　　　　　　　　<td>15個</td> <td>2個</td> 　　　　　　　　　　　　<td>4個</td> </tr> </tbody> <tfoot> <tr> <th>合計</th> <td>7個</td> 　　　　　　　　　　　　<td>25個</td> <td>5個</td> 　　　　　　　　　　　　<td>6個</td> </tr> </tfoot> </table> TABLEの最小サンプル <table>タグは以下の要素が必要になります。 <table>タグの中には以下コンテンツが入る 1 任意の1個の<caption> 要素省略可 2 0個以上の<colgroup> 要素省略可 3 任意の1個の<thead> 要素省略可 4 次の2つの選択肢から1つ・ 0個以上の<tbody> 要素・ 1個以上の<tr> 要素 5 任意の1個の<tfoot> 要素この要素をかみすると最小でテーブルを作るとこうなります。 <table> <tr> <th>太郎くん</th> <td>１０さい</td> </tr> </table> アクセシビリティを意識したサンプル <table > <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2">  <col span="2">  </colgroup> <thead> <tr> <td> </td> <th scope="col">りんご</th> <th scope="col">みかん</th> <th scope="col">にんじん</th> <th scope="col">とまと</th> </tr> </thead> <tbody> <tr> <th scope="row">太郎くん</th> <td>5個</td> 　　　　　　　　　　　　<td>10個</td> <td>3個</td> 　　　　　　　　　　　　<td>2個</td> </tr> <tr> <th scope="row">二郎くん</th> <td>2個</td> 　　　　　　　　　　　　<td>15個</td> <td>2個</td> 　　　　　　　　　　　　<td>4個</td> </tr> </tbody> <tfoot> <tr> <th scope="row">合計</th> <td>7個</td> 　　　　　　　　　　　　<td>25個</td> <td>5個</td> 　　　　　　　　　　　　<td>6個</td> </tr> </tfoot> </table> アクセシビリティで、意識すること caption要素やsummary属性を追加することで、スクリーンリーダーユーザーが概略を理解できるようにする HTML5では、summary属性は廃止されたので使う際は注意が必要。 summary属性をサポートしている人としてない人で情報に差が出てしまうので、要注意と評価される。そのため、サンプルでは、caption要素しか追加してません。ただ、caption要素とsummary属性を追加する場合は、違う内容を提供しなければなりません。 ref H39: データテーブルのキャプションとデータテーブルを関連付けるために、caption 要素を使用する H73: データテーブルの概要を提供するために、table 要素の summary 属性を使用するデータテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する th要素全てに、scope 属性があることが必要です。見出しとしての役割を果たす全ての td 要素に、scope 属性があることが必要です。全てのscope属性に、値として row、col、rowgroup、又は colgroup があることを確認する。 ref H63: データテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する

　 Tweet
Qiitaで続きを読む

投稿日：2022-01-08T11:17:23+09:00

?カメラ機能を作成してみよう　＊リアカメラ編

今回はリアカメラ編を作成しようと思いますリアカメラとは、キーボードがある方向のカメラですじゃ作ってみるでー <li><a href="#area-1">WEBカメラの映像を表示</a></li> <li><a href="#area-2">リアカメラでの、撮影</a></li> <li><a href="#area-3">フロントカメラでの撮影</a></li> <section class="area" id="area-1"> <footer id="footer"> <p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <section class="area" id="area-1"> <h2>WEBカメラの映像を表示</h2> </head> <body> <div> <h1>WEBカメラの映像を表示</h1> <div> <video id="video"></video> </div> </div> <script> const video = document.getElementById("video") navigator.mediaDevices.getUserMedia({ video: true, audio: false, }).then(stream => { video.srcObject = stream; video.play() }).catch(e => { console.log(e) }) </script> </body> </html> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Camera Test</title> <style> canvas, video{ border: 1px solid gray; } </style> </head> <body> <html> <body> <ol> <pre> <section class="area" id="area-2"> <h1>撮影します。</h1> 撮影したものは、右側の画面です。 <video id="camera" width="300" height="200"></video> <canvas id="picture" width="300" height="200"></canvas> <form> <button type="button" id="shutter">撮影する</button> </form> <audio id="se" preload="auto"> <source src="camera-shutter1.mp3" type="audio/mp3"> </audio> <script> window.onload = () => { const video = document.querySelector("#camera"); const canvas = document.querySelector("#picture"); const se = document.querySelector('#se'); /** カメラ設定 */ const constraints = { audio: false, video: { width: 300, height: 200, facingMode: "user" // フロントカメラを利用する // facingMode: { exact: "environment" } // リアカメラを利用する場合 } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then( (stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) .catch( (err) => { console.log(err.name + ": " + err.message); }); /** * 撮影 */ document.querySelector("#shutter").addEventListener("click", () => { const ctx = canvas.getContext("2d"); // 演出的な目的で一度映像を止めてSEを再生する video.pause(); // 映像を停止 se.play(); // シャッター音 setTimeout( () => { video.play(); // 1.5秒後にカメラ再開 }, 1500); // canvasに画像を貼り付ける ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const c = document.getElementById('picture'); c.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth()+1; var date = nowDate.getDate(); var hours = nowDate.getHours(); var minutes = nowDate.getMinutes(); var Seconds = nowDate.getSeconds(); var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒'; a.download = today + '.png'; a.href = url; a.click(); a.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 1E4); }, 'image/png'); }); }; </script> </body> </html> <html> <body> <ol> <pre> <section class="area" id="area-3"> <h1>撮影します。</h1> 撮影したものは、右側の画面です。 <video id="camera" width="300" height="200"></video> <canvas id="picture" width="300" height="200"></canvas> <form> <button type="button" id="shutter">撮影する</button> </form> <audio id="se" preload="auto"> <source src="camera-shutter1.mp3" type="audio/mp3"> </audio> <script> window.onload = () => { const video = document.querySelector("#camera"); const canvas = document.querySelector("#picture"); const se = document.querySelector('#se'); /** カメラ設定 */ const constraints = { audio: false, video: { width: 300, height: 200, facingMode: "user" // フロントカメラを利用する // facingMode: { exact: "environment" } // リアカメラを利用する場合 } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then( (stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) .catch( (err) => { console.log(err.name + ": " + err.message); }); /** * 撮影 */ document.querySelector("#shutter").addEventListener("click", () => { const ctx = canvas.getContext("2d"); // 演出的な目的で一度映像を止めてSEを再生する video.pause(); // 映像を停止 se.play(); // シャッター音 setTimeout( () => { video.play(); // 3秒後にカメラ再開 }, 3000); // canvasに画像を貼り付ける ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const c = document.getElementById('picture'); c.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth()+1; var date = nowDate.getDate(); var hours = nowDate.getHours(); var minutes = nowDate.getMinutes(); var Seconds = nowDate.getSeconds(); var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒'; a.download = today + '.png'; a.href = url; a.click(); a.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 1E4); }, 'image/png'); }); }; </script> </body> </html> <footer id="footer"> <p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p> <p class="js-pagetop scroll-top"><a href="#">Page Top</a></p> <small>© copyright.</small> </footer> すべてコピペで使用できます保存名は、その時の時間を、秒数で表しますまとめ　　　　　参考になると嬉しいです

　 Tweet
Qiitaで続きを読む

投稿日：2022-01-08T11:12:49+09:00

?カメラ機能を作成しよう　＊フロントカメラ編

カメラ機能が、パソコンに入ってなかった人優先でカメラ機能を作ってみました有線カメラを、パソコンに付けると監視カメラにもなりますねそれとピクチャインピクチャを利用するといつでも見れますねそれじゃ作ってみよう <li><a href="#area-1">WEBカメラの映像を表示</a></li> <li><a href="#area-2">リアカメラでの、撮影</a></li> <li><a href="#area-3">フロントカメラでの撮影</a></li> <section class="area" id="area-1"> <footer id="footer"> <p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <section class="area" id="area-1"> <h2>WEBカメラの映像を表示</h2> </head> <body> <div> <h1>WEBカメラの映像を表示</h1> <div> <video id="video"></video> </div> </div> <script> const video = document.getElementById("video") navigator.mediaDevices.getUserMedia({ video: true, audio: false, }).then(stream => { video.srcObject = stream; video.play() }).catch(e => { console.log(e) }) </script> </body> </html> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Camera Test</title> <style> canvas, video{ border: 1px solid gray; } </style> </head> <body> <html> <body> <ol> <pre> <section class="area" id="area-2"> <h1>撮影します。</h1> 撮影したものは、右側の画面です。 <video id="camera" width="300" height="200"></video> <canvas id="picture" width="300" height="200"></canvas> <form> <button type="button" id="shutter">撮影する</button> </form> <audio id="se" preload="auto"> <source src="camera-shutter1.mp3" type="audio/mp3"> </audio> <script> window.onload = () => { const video = document.querySelector("#camera"); const canvas = document.querySelector("#picture"); const se = document.querySelector('#se'); /** カメラ設定 */ const constraints = { audio: false, video: { width: 300, height: 200, facingMode: "user" // フロントカメラを利用する // facingMode: { exact: "environment" } // リアカメラを利用する場合 } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then( (stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) .catch( (err) => { console.log(err.name + ": " + err.message); }); /** * 撮影 */ document.querySelector("#shutter").addEventListener("click", () => { const ctx = canvas.getContext("2d"); // 演出的な目的で一度映像を止めてSEを再生する video.pause(); // 映像を停止 se.play(); // シャッター音 setTimeout( () => { video.play(); // 1.5秒後にカメラ再開 }, 1500); // canvasに画像を貼り付ける ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const c = document.getElementById('picture'); c.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth()+1; var date = nowDate.getDate(); var hours = nowDate.getHours(); var minutes = nowDate.getMinutes(); var Seconds = nowDate.getSeconds(); var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒'; a.download = today + '.png'; a.href = url; a.click(); a.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 1E4); }, 'image/png'); }); }; </script> </body> </html> <html> <body> <ol> <pre> <section class="area" id="area-3"> <h1>撮影します。</h1> 撮影したものは、右側の画面です。 <video id="camera" width="300" height="200"></video> <canvas id="picture" width="300" height="200"></canvas> <form> <button type="button" id="shutter">撮影する</button> </form> <audio id="se" preload="auto"> <source src="camera-shutter1.mp3" type="audio/mp3"> </audio> <script> window.onload = () => { const video = document.querySelector("#camera"); const canvas = document.querySelector("#picture"); const se = document.querySelector('#se'); /** カメラ設定 */ const constraints = { audio: false, video: { width: 300, height: 200, // facingMode: "user" // フロントカメラを利用する facingMode: { exact: "environment" } // リアカメラを利用する場合 } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then( (stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) .catch( (err) => { console.log(err.name + ": " + err.message); }); /** * 撮影 */ document.querySelector("#shutter").addEventListener("click", () => { const ctx = canvas.getContext("2d"); // 演出的な目的で一度映像を止めてSEを再生する video.pause(); // 映像を停止 se.play(); // シャッター音 setTimeout( () => { video.play(); // 3秒後にカメラ再開 }, 3000); // canvasに画像を貼り付ける ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const c = document.getElementById('picture'); c.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth()+1; var date = nowDate.getDate(); var hours = nowDate.getHours(); var minutes = nowDate.getMinutes(); var Seconds = nowDate.getSeconds(); var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒'; a.download = today + '.png'; a.href = url; a.click(); a.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 1E4); }, 'image/png'); }); }; </script> </body> </html> <footer id="footer"> <p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p> <p class="js-pagetop scroll-top"><a href="#">Page Top</a></p> <small>© copyright.</small> </footer> すべてコピペで使用できますまとめ今回はフロントカメラ編を作成してみました今度は、リアカメラ編を、投稿しますお待ちください参考になってくれると辛いです　

　 Tweet
Qiitaで続きを読む

投稿日：2022-01-08T02:13:15+09:00

HTMLの<picture>要素をIE11でも使えるように見せかける簡易版JSを作った

IE11も対象の案件。ブラウザの画面幅に応じてページのレイアウトが変わる際、一部の<img>要素の画像については縦横比が異なるものを表示させる必要がありました。そこで、サイズや縦横比が異なる複数の画像をあらかじめ用意しておき、画面幅に応じて自動で切り替わるようにしたい。最近のブラウザならHTMLの<picture>要素をサポートしているので、mediaクエリを付けた<source>要素を並べて書くだけで実現できますが、IE11は<picture>要素が未対応。もちろん、polyfill picturefill.jsの存在は知っています。が、今回はとりあえずmax-widthだけを基準にして画像を切り替えできれば十分だったので、自分でIE11用に簡易版のコードをJavaScriptで書いてみることにしました1。 ※コンテントの画像 via Unsplash 簡易版の仕様簡易版jsが扱うことができるシンタックスは以下のとおりです。 <source>要素にはsrcset属性とmedia属性のみ指定します。 media属性にはmax-width１つのみ、px単位で指定します。 <source>要素はmax-widthの値が小さい順に並べなければなりません。 example.html <picture> <source srcset="/path/to/img1" media="(max-width: 360px)"> <source srcset=/path/to/img2" media="(max-width: 420px)"> ..... <source srcset="/path/to/imgN" media="(max-width: 768px)"> <img src="/path/to/fallback/img" alt=""> </picture> See the Pen [JS] picture element in IE11 by Kazuhiro Hashimoto (@kaz_hashimoto) on CodePen. このCodePenはIE11以外でも動作を確認できるように2、HTMLネイティブの機能の代わりに簡易版jsを使って<picture>要素の画像を切り替え表示しています。実際の場面では、IE11以外には不要なコードなので、最初にブラウザのUA文字列によってIE11かどうかを判定し、IE11でなければ即returnさせます。 javascript document.addEventListener('DOMContentLoaded', function() { // 実際に使用する時は最初にUAでブラウザ判定を行い、 // IE以外のブラウザでは以降のコードが実行されないようにする。 // 例） // const parser = new UAParser(); // const ua = parser.getResult(); // if (ua.browser.name != 'IE') { // return; // } ..... 実装メモ処理の本体はIE11でも実行可能なようにコーディングする必要があるため、NodeListの各要素に対してcallback関数を呼ぶ箇所は、一旦Arrayを作ってからforEachを呼ぶ形式で書いてあります。 javascript const targets = document.querySelectorAll('picture'); Array.prototype.forEach.call(targets, function(picture) { ... <source>要素に設定した一連のmedia="(max-width:は、区間が重ならないように "(min-width: A px) and (max-width: B px)" に変換したクエリでMediaQueryListオブジェクトを作成し、リスナーを設定します。クエリとsrcsetの値のペアは、ハンドラ内からも参照するためMapオブジェクトで保持しておきます。ここで、Mapのキーに使うクエリ文字列は、matchMediaの戻り値から取り出した方のmql.mediaを使います。IE11の場合、それはmatchMedia(query)に指定したquery文字列と必ずしも一致しないためです。 javascript const mql = window.matchMedia(query); item.map.set(mql.media, source.getAttribute('srcset')); const func = handler.bind(item) mql.addListener(func); func(mql); 変数itemは<picture>要素ごとに設定情報を保持するオブジェクトです。ハンドラー内でitemをthisキーワードから参照可能にするため、bind()を呼んで生成した関数の方をリスナーに設定します。 javascript function handler(mql) { if (!mql.matches) { return; } const item = this; const src = item.map.get(mql.media); if (!src) { return; } item.img.src = src; } ハンドラーが呼ばれると、対象の<picture>要素に紐付けたitemを取り出し、ステータスが変化したmediaクエリをキーにsrcsetの値を取り出し、<img>要素のsrcに画像をセットします。 picturefill.jsは2017年3月リリースのver.3.0.3を最後に更新が止まっているようで、projectのstatusがよくわからなかったのも１つの理由。 ↩ CodePenはIE11をサポートしないため、このPenをIE11で確認したい時はPenのソース一式をExportし、localhost上のコンテンツとしてIE11からアクセスします。 ↩

　 Tweet
Qiitaで続きを読む

20220108のHTMLに関する記事は6件です。

GIF画像のデータ形式とHTML+JavaScript (ローカル生成)のサンプルプログラム

Scratchの作品をサイトに埋め込む方法

アクセシビリティを意識した<Table>の作り方

?カメラ機能を作成してみよう　＊リアカメラ編

?カメラ機能を作成しよう　＊フロントカメラ編

HTMLの<picture>要素をIE11でも使えるように見せかける簡易版JSを作った

日付別

タグ一覧

20220108のHTMLに関する記事は6件です。

GIF画像のデータ形式とHTML+JavaScript (ローカル生成)のサンプルプログラム

Scratchの作品をサイトに埋め込む方法

アクセシビリティを意識した<Table>の作り方

?カメラ機能を作成してみよう ＊リアカメラ編

?カメラ機能を作成しよう ＊フロントカメラ編

HTMLの<picture>要素をIE11でも使えるように見せかける簡易版JSを作った

日付別

タグ一覧

?カメラ機能を作成してみよう　＊リアカメラ編

?カメラ機能を作成しよう　＊フロントカメラ編