約 5,822,330 件
https://w.atwiki.jp/wiki13_css/pages/17.html
fe
https://w.atwiki.jp/shfarts/pages/647.html
サンジ・ナミ・ウソップset -FILM Z 戦闘服Ver.-(ZERO) 商品画像 情報 登場作品:劇場版ONE PIECE FILM Z 定価:9,240円 受注開始:2012年12月予定 16 00 受注締切:未定 発送開始:2013年07月発送 商品全高:約○○mm 付属品 手首:×() 武器: 頭部:×() その他: キャラクター概要 商品解説 良い点 悪い点 不具合情報 関連商品 ルフィ・チョッパー・フランキーset -FILM Z 戦闘服Ver.- ゾロ・ロビン・ブルックスset -FILM Z 戦闘服Ver.- コメント 名前 コメント
https://w.atwiki.jp/japanesehiphop/pages/576.html
Format Title Artist Label Model Number Release Press CD 7 PAN RHYTHM FLIGHT NO.11154(7inch set) MURO TOY S FACTORY TFCC-88233,PRT-105 2000/08/23 - Side Track Title Produce A 1 A HEAD OF THE GAME PT.1 MURO B 2 A HEAD OF THE GAME PT.2 MURO ※7INCH PERTAIN CD AMAZON PAN RHYTHM Flight No.11154
https://w.atwiki.jp/eriax/pages/117.html
制限 DOM-HTML 限定。名前空間を認識しない。大文字・小文字の区別はテキトー。長さは px しか認識しない。 構文エラーからの回復はしない(構文エラー回復を含めた CSS パーサは別所を参照)。 1000 行以内を目指したが現状 1050 行。パックして 20kb ぐらい。 マッチング主体なので、ノードをかき集める速度は期待できない。 使用例 セレクタテスト var sapi = CSS_Selectors_and_MediaQueries_for_HTML_Browsers._selectors_group; // セレクタテストの生成。 var selector = sapi( body lang(ja) p#HOGE nth-child(2n+1) ); // テストしたい要素。 var target = document.getElementById( HOGE ); // テストを実行。this として all 配列を渡すと scope にマッチする。 var result = selector.call({ all [document.body] }, target); 戻り値は [[p, null], [body, null]] のように単純セレクタにマッチした要素の配列(または null)。セレクタとは逆順に入っており、0 番がセレクタ全体にマッチした要素。この例で null になっている部分は疑似要素を表すレンジ。例えば p before なら、p の最初の子の直前に位置するレンジになる。 セレクタを使って要素をかき集める簡便メソッド var applySelectors = CSS_Selectors_and_MediaQueries_for_HTML_Browsers.applySelectors; // body 以下で非表示の要素をかき集める。戻り値は配列。 var result = applySelectors( *[aria-hidden= true ] , document.body); メディアクエリテスト var mql = CSS_Selectors_and_MediaQueries_for_HTML_Browsers._media_query_list; // メディアクエリテストの生成。 var mediump = mql( only screen and (min-width 800px), screen and (min-color 16) ); // window をメディアグループ visual としてクエリテスト。戻り値は真偽値。 if (mediump.call({ ondefault function (e) { return true; } }, window, visual )) alert( OK ); this 値として ondefault ハンドラを渡すと、未知の特徴を処理できる。 メディアグループ interactive としてテストする簡便メソッド var matchesWindow = CSS_Selectors_and_MediaQueries_for_HTML_Browsers.matchesWindow; if (matchesWindow( (orientation portrait) , window)) alert( OK ); ソースコード var CSS_Selectors_and_MediaQueries_for_HTML_Browsers = new function () { /*@cc_on@*/ var h = [0-9a-f] ; var nonascii = [^\\u0000-\\u007F] ; var unicode = \\\\ + h + {1,6}(? \\r\\n|[\x20\\n\\r\\t\\f])? ; var num = (? [0-9]+|[0-9]*\\.[0-9]+) ; var nl = (? \\n|\\r\\n|\\r|\\f) ; var w = [\x20\\t\\r\\n\\f]* ; var s = [\x20\\t\\r\\n\\f]+ ; var comment = \\/\\*[^\*]*\\*+(? [^\/\*][^\*]*\\*+)*\\/ ; var escape = unicode + |\\\\[^\\n\\r\\f0-9A-Fa-f] ; var nmchar = (? [_0-9a-z-]| + nonascii + | + escape + ) ; var name = nmchar + + ; var nmstart = (? [_a-z]| + nonascii + | + escape + ) ; var ident = -? + nmstart + nmchar + * ; var string1 = \ (? [^\\n\\r\\f\\\\\ ]|\\\\ + nl + | + nonascii + | + escape + )*\ ; var string2 = \ (? [^\\n\\r\\f\\\\\ ]|\\\\ + nl + | + nonascii + | + escape + )*\ ; var string = (? + string1 + | + string2 + ) ; var invalid1 = \ (? [^\\n\\r\\f\\\\\ ]|\\\\ + nl + | + nonascii + | + escape + )* ; var invalid2 = \ (? [^\\n\\r\\f\\\\\ ]|\\\\ + nl + | + nonascii + | + escape + )* ; var invalid = (? + invalid1 + | + invalid2 + ) ; var url = (? [!#$% *-~]| + nonascii + | + escape + )* ; // var A = (? a|\\\\0{0,4}[46]1(? \\r\\n|[ \\t\\r\\n\\f])?) ; var D = (? d|\\\\0{0,4}[46]4(? \\r\\n|[ \\t\\r\\n\\f])?) ; var E = (? e|\\\\0{0,4}[46]5(? \\r\\n|[ \\t\\r\\n\\f])?) ; var L = (? l|\\\\0{0,4}[46]c(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\l) ; var N = (? n|\\\\0{0,4}[46]e(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\n) ; var O = (? o|\\\\0{0,4}[46]f(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\o) ; var P = (? p|\\\\0{0,4}[57]0(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\p) ; var R = (? r|\\\\0{0,4}[57]2(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\r) ; var T = (? t|\\\\0{0,4}[57]4(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\t) ; var U = (? u|\\\\0{0,4}[57]5(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\u) ; var V = (? v|\\\\0{0,4}[57]6(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\v) ; var X = (? x|\\\\0{0,4}[57]8(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\x) ; var Y = (? y|\\\\0{0,4}[57]9(? \\r\\n|[ \\t\\r\\n\\f])?|\\\\y) ; // var S0 = w; var S1 = s; var INCLUDES = ~= ; var DASHMATCH = \\|= ; var PREFIXMATCH = \\^= ; var SUFFIXMATCH = \\$= ; var SUBSTRINGMATCH = \\*= ; var PLUS = w + \\+ ; var GREATER = w + ; var COMMA = w + , ; var TILDE = w + ~(?!=) ; var NOT = not\\( ; var STRING = string; var IDENT = ident; var HASH = # + name; var DIMENSION = num + ident; var PERCENTAGE = num + % ; var NUMBER = num; var URI = U + R + L + \\( + w + string + w + \\)| + U + R + L + \\( + w + url + w + \\) ; var FUNCTION = ident + \\( ; var s_unary_operator = PLUS + |- ; var s_hexcolor = HASH + S0; // var p_Sh = new RegExp( ^ + S1); var p_St = new RegExp(S1 + $ ); var f_trim = function (stringData) { return stringData.replace(p_Sh, ).replace(p_St, ); }; var p_escaped = /\\([0-9a-f]{1,6})(? \r\n|[\x20\n\r\t\f])?|\\([^\n\r\f0-9a-f])/gi; var f_unescape_replace = function (str, x, c) { if (x) { return String.fromCharCode(parseInt(x, 16)); // not accurate } return c; }; var f_unescape = function (stringData) { return stringData.replace(p_escaped, f_unescape_replace); }; // // css3-selectors var p_selector_type = new RegExp( ^(? ( + IDENT + (?=\\|)|\\*(?=\\|))?\\|)?( + IDENT + |\\*) , i ); var p_selector_subject = new RegExp; p_selector_subject.exec = function (stringData) { var src = stringData; var cmp; if ((cmp = p_selector_type.exec(src))) { // subject var res1 = []; var res2 = []; var code; var ns = cmp[1]; var ln = cmp[2]; if (!ns || ns === * ) { if (ln === * ) { code = return\x20n; ; } else { code = f_unescape(ln).replace(/\W/g, \\$ ); code = return\x20/^ + code + $/i.test(n.nodeName)?n null; ; } res2[res2.length] = code; cmp = cmp[0]; res1[res1.length] = cmp; } else { throw new Error( Namespace is not supported ); } return [].concat(res1.join( ), res2); } return null; }; // var p_selector_ID = new RegExp( ^#( + name + ) , i ); var p_selector_class = new RegExp( ^\\.( + IDENT + ) , i ); var p_selector_attrib = new RegExp( \\[ + S0 + (( + IDENT + (?=\\|)|\\*(?=\\|))?\\|)?( + IDENT + ) + S0 + (? ( + PREFIXMATCH + | + SUFFIXMATCH + | + SUBSTRINGMATCH + | + INCLUDES + | + DASHMATCH + |=) + S0 + (? ( + STRING + )|( + IDENT + )) + S0 + )? + \\] , i ); var p_selector_negation_begin = new RegExp( ^ + NOT, i ); var p_selector_negation_end = new RegExp( ^ + S0 + \\) ); var p_selector_pseudo_class = new RegExp( ^( ?)(? ( + FUNCTION + ) + S0 + ( + (? (? + DIMENSION + | + STRING + | + IDENT + | + NUMBER + | + PLUS + |-) + S0 + )+ + ) + \\) + |( + IDENT + )) , i ); var p_selector_predicate_common = new RegExp; p_selector_predicate_common.exec = function (stringData) { var src = stringData; var cmp; var res1 = []; var res2 = []; var code; switch (src.charAt(0)) { case # if ((cmp = p_selector_ID.exec(src))) { code = f_unescape(cmp[1]).replace(/[\ \\]/g, \\$ ); code = return\x20(n.id=== + code + )?n null; ; break; } return null; case . if ((cmp = p_selector_class.exec(src))) { code = f_unescape(cmp[1]).replace(/\W/g, \\$ ); code = return\x20/(? ^| + S1 + ) + code + (? + S0 + |$)/.test(n.className)?n null; ; break; } return null; case [ if ((cmp = p_selector_attrib.exec(src))) { var ns = cmp[2]; if (ns ns !== * ) { throw new Error( Namespace is not supported ); } var ln = f_unescape(cmp[3]).replace(/[\ \\]/g, \\$ ); var opr = cmp[4]; var val; code = var\x20a=n.getAttributeNode( + ln + ); ; if (opr) { val = ((val = cmp[5])) ? val.slice(1, -1) cmp[6]; val = f_unescape(val).replace(/\W/g, \\$ ); } switch (opr) { case = val = /^ + val + $/.test(a.value) ; break; case ^= val = /^ + val + /.test(a.value) ; break; case $= val = / + val + $/.test(a.value) ; break; case *= val = / + val + /.test(a.value) ; break; case ~= val = /(? ^| + S1 + ) + val + (? + S1 + |$)/.test(a.value) ; break; case |= val = /^ + val + (?=-|$)/.test(a.value) ; break; default val = a.specified ; break; } code += return\x20(a + val + )?n null; ; break; } return null; case if ((cmp = p_selector_pseudo_class.exec(src))) { var type = cmp[1]; var name; var args, a, b; if ((name = cmp[2])) { name = name.slice(0, -1); args = cmp[3]; } else { name = cmp[4]; args = ; } switch (type + name) { case root code = return\x20(n===n.ownerDocument.documentElement)?n null; ; break; case nth-child args = f_parse_nth(args), a = args[0], b = args[1]; code = var\x20m,i;for(m=n,i=1;m=m.previousSibling;)if(m.nodeType===1)i++; ; code += (a === 0) ? return\x20(i=== + b + )?n null; var\x20j=i- + b + ;return((j% + a + ===0) (j / + a + =0))?n null; ; break; case nth-last-child args = f_parse_nth(args), a = args[0], b = args[1]; code = var\x20m,i;for(m=n,i=1;m=m.nextSibling;)if(m.nodeType===1)i++; ; code += (a === 0) ? return\x20(i=== + b + )?n null; var\x20j=i- + b + ;return((j% + a + ===0) (j / + a + =0))?n null; ; break; case nth-of-type args = f_parse_nth(args), a = args[0], b = args[1]; code = var\x20s=n.tagName,m,i;for(m=n,i=1;m=m.previousSibling;)if(m.nodeType===1 m.tagName===s)i++; ; code += (a === 0) ? return\x20(i=== + b + )?n null; var\x20j=i- + b + ;return((j% + a + ===0) (j/ + a + =0))?n null; ; break; case nth-last-of-type args = f_parse_nth(args), a = args[0], b = args[1]; code = var\x20s=n.tagName,m,i;for(m=n,i=1;m=m.nextSibling;)if(m.nodeType===1 m.tagName===s)i++; ; code += (a === 0) ? return\x20(i=== + b + )?n null; var\x20j=i- + b + ;return((j% + a + ===0) (j/ + a + =0))?n null; ; break; case first-child code = var\x20m;for(m=n;m=m.previousSibling;)if(m.nodeType===1)return\x20null;return\x20n; ; break; case last-child code = var\x20m;for(m=n;m=m.nextSibling;)if(m.nodeType===1)return\x20null;return\x20n; ; break; case first-of-type code = var\x20s=n.tagName,m;for(m=n;m=m.previousSibling;)if(m.nodeType===1 m.tagName===s)return\x20null;return\x20n; ; break; case last-of-type code = var\x20s=n.tagName,m;for(m=n;m=m.nextSibling;)if(m.nodeType===1 m.tagName===s)return\x20null;return\x20n; ; break; case only-child code = var\x20m;for(m=n;m=m.previousSibling;)if(m.nodeType===1)return\x20null;for(m=n;m=m.nextSibling;)if(m.nodeType===1)return\x20null;return\x20n; ; break; case only-of-type code = var\x20s=n.tagName,m;for(m=n;m=m.previousSibling;)if(m.nodeType===1 m.tagName===s)return\x20null;for(m=n;m=m.nextSibling;)if(m.nodeType===1 m.tagName===s)return\x20null;return\x20n; ; break; case empty code = var\x20m;for(m=n.firstChild;m;m=m.nextSibling)switch(m.nodeType){case\x201 return\x20null;case\x203 case\x204 if(m.length 0)return\x20null;default continue;}return\x20n; ; break; case link case visited case active case hover throw new Error(name + is not supported ); case focus code = var\x20d;return((d=n.ownerDocument) (n===d.activeElement))?n null; ; break; case target code = var\x20d,s,w;return((d=n.ownerDocument) (w=d.defaultView) (s=w.location.hash) (s=s.slice(1)) (n.id===s))?n null; ; break; case lang args = f_trim(args).replace(/\W/g, \\$ ); code = for(var\x20m=n,v;m;m=m.parentNode)if(m.nodeType===1)if((v=m.lang))return\x20/^ + args + (? -|$)/i.test(v)?n null;return\x20null; ; break; case enabled code = return\x20(n.disabled===false)?n null; ; break; case disabled code = return\x20(n.disabled===true)?n null; ; break; case checked code = return\x20(n.checked===true)?n null; ; break; case scope code = var\x20c=this.all;if(!c)return\x20null;var\x20I=c.length,i;for(i=0;i I;i++)if(n===c[i])return\x20n;return\x20null; ; break; case first-line case first-line throw new Error(name + is not supported ); case first-letter case first-letter code = var\x20d,r;if((d=n.ownerDocument)){r=d.createRange();while(n.hasChildNodes())n=n.firstChild;if(n.nodeType===3)if(n.length 0){r.setStart(n,0);r.setEnd(n,1);return\x20r;}}return\x20null; ; break; case selection case selection code = var\x20d,w,s;if((d=n.ownerDocument) (w=d.defaultView))return\x20w.getSelection().getRangeAt(0);return\x20null ; break; case before case before code = var\x20d,r;if((d=n.ownerDocument)){r=d.createRange();r.setStart(n,0);return\x20r;}return\x20null; ; break; case after case after code = var\x20d,r;if((d=n.ownerDocument)){r=d.createRange();switch(n.nodeType){case\x203 case\x204 case\x207 case\x208 r.setStart(n,n.data.length);break;default r.setStart(n,n.childNodes.length);break;}return\x20r;}return\x20null; ; break; default throw new Error(name + is not supported ); } break; } return null; default return null; } res2[res2.length] = code; cmp = cmp[0]; res1[res1.length] = cmp; return [].concat(res1.join( ), res2); }; // var p_selector_negation_arg = new RegExp; p_selector_negation_arg.exec = function (stringData) { var src = stringData; var cmp; var res1 = []; var res2 = []; var code; switch (src.charAt(0)) { case # case . case [ case if ((cmp = p_selector_predicate_common.exec(src))) { code = cmp.slice(1); break; } return null; default if ((cmp = p_selector_subject.exec(src))) { code = cmp.slice(1); break; } return null; } res2[res2.length] = return\x20!(function(n){ + code.join( ) + })(n)?n null; ; cmp = cmp[0]; res1[res1.length] = cmp; return [].concat(res1.join( ), res2); }; // var p_simple_selector_sequence = new RegExp; p_simple_selector_sequence.exec = function (stringData) { var src = stringData; var cmp; var res1 = []; var res2 = []; var code; var subj = false; if ((cmp = p_selector_subject.exec(src))) { // subject subj = true; res2 = res2.concat(cmp.slice(1)); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); } A while (src.length 0) { // predicates switch (src.charAt(0)) { case # case . case [ if ((cmp = p_selector_predicate_common.exec(src))) { code = cmp.slice(1); break; } return null; case if ((cmp = p_selector_negation_begin.exec(src))) { cmp = cmp[0]; var zrc = src.slice(cmp.length); var kmp; var rez1 = [cmp]; var rez2 = []; if ((kmp = p_selector_negation_arg.exec(zrc))) { rez2 = rez2.concat(kmp.slice(1)); kmp = kmp[0]; rez1[rez1.length] = kmp; zrc = zrc.slice(kmp.length); if ((kmp = p_selector_negation_end.exec(zrc))) { kmp = kmp[0]; rez1[rez1.length] = kmp; zrc = zrc.slice(kmp.length); // src = zrc; res1.push.apply(res1, rez1); res2.push.apply(res2, rez2); continue; } } break A; } if ((cmp = p_selector_predicate_common.exec(src))) { code = cmp.slice(1); break; } break A; default break A; } res2 = res2.concat(code); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); } if (res1.length 0) { if (!subj) { cmp = p_selector_subject.exec( * ); res2 = [].concat(cmp.slice(1), res2); } return [].concat(res1.join( ), res2); } return null; }; // var p_combinator = new RegExp( ^(? ( + PLUS + ) + S0 + |( + GREATER + ) + S0 + |( + TILDE + ) + S0 + |( + S1 + )) , i ); var o_combinator_table = { function (node, patterns) { A if (node.nodeType === 1) { var count = patterns.length; var i, n; for (i = 0; i count; i++) { n = patterns[i].call(this, node); if (!n) { break A; } } return [node, (node !== n) ? n null]; } return null; }, \x20 function (node, patterns) { var count = patterns.length; var i, n; A while ((node = node.parentNode)) { if (node.nodeType === 1) { for (i = 0; i count; i++) { n = patterns[i].call(this, node); if (!n) { continue A; } } return [node, (node !== n) ? n null]; } } return null; }, function (node, patterns) { var count = patterns.length; var i, n; A if ((node = node.parentNode)) { if (node.nodeType === 1) { for (i = 0; i count; i++) { n = patterns[i].call(this, node); if (!n) { break A; } } return [node, (node !== n) ? n null]; } } return null; }, ~ function (node, patterns) { var count = patterns.length; var i, n; A while ((node = node.previousSibling)) { if (node.nodeType === 1) { for (i = 0; i count; i++) { n = patterns[i].call(this, node); if (!n) { continue A; } } return [node, (node !== n) ? n null]; } } return null; }, + function (node, patterns) { var count = patterns.length; var i, n; A while ((node = node.previousSibling)) { if (node.nodeType === 1) { for (i = 0; i count; i++) { n = patterns[i].call(this, node); if (!n) { break A; } } return [node, (node !== n) ? n null]; } } return null; } }; // var p_selector = new RegExp; p_selector.exec = function (stringData) { var src = stringData; var cmp; if ((cmp = p_simple_selector_sequence.exec(src))) { var res1 = []; var res2 = []; var sel; var cmb; sel = cmp.slice(1); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); while ((cmp = p_combinator.exec(src))) { cmb = cmp[1] ? + cmp[2] ? cmp[3] ? ~ \x20 ; res2[res2.length] = [sel, cmb]; sel = null; cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); if ((cmp = p_simple_selector_sequence.exec(src))) { sel = cmp.slice(1); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); continue; } break; } if (sel) { res2[res2.length] = [sel, ]; } else { var lst = res2[res2.length - 1]; var lsn = lst.length - 1; if (lst[lsn] === \x20 ) { lst[lsn] = ; } else { return null; } } for (var simple, patterns, i = 0, I = res2.length; i I; i++) { simple = res2[i], patterns = simple[0]; res2[i] = { patterns patterns, relation o_combinator_table[simple[1]] }; for (var j = 0, J = patterns.length; j J; j++) { patterns[j] = new Function( n , patterns[j]); } } res2.reverse(); return [].concat(res1.join( ), res2); } return null; }; // var p_selector_separator = new RegExp( ^ + COMMA + w); var p_selectors_group = new RegExp; p_selectors_group.exec = function (stringData) { var src = stringData; var cmp; if ((cmp = p_selector.exec(src))) { var res1 = []; var res2 = []; res2[res2.length] = cmp.slice(1); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); while ((cmp = p_selector_separator.exec(src))) { cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); if ((cmp = p_selector.exec(src))) { res2[res2.length] = cmp.slice(1); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); continue; } break; } return [].concat(res1.join( ), res2); } return null; }; // var s_integer = [0-9]+ ; var p_nth = new RegExp(w + (? ([-+]?(? + s_integer + )?) + N + (? + w + ([-+]) + w + ( + s_integer + ))?|([-+]?(? + s_integer + ))|( + O + D + D + )|( + E + V + E + N + )) + w, i ); var f_parse_nth = function (stringData) { var cmp = p_nth.exec(stringData); if (cmp) { var i, a, b; for (i = 0; !cmp[++i];); switch (i) { case 1 // 2n+1 a = cmp[i]; b = cmp[i + 1] + cmp[i + 2]; return [a === + ? 1 a === - ? -1 parseInt(a, 10), parseInt(b, 10) || 0]; case 4 // 1 return [0, parseInt(cmp[i], 10) || 0]; case 5 // odd return [2, 1]; case 6 // even return [2, 0]; } } return null; }; // var o_selectors_group_cache = { }; var f_create_selectors_group = function (stringData) { var selectors = p_selectors_group.exec(stringData); if (!selectors || stringData.length !== selectors[0].length) { throw new Error( malformed CSS selectors ); } var fn = o_selectors_group_cache[stringData]; if ( function === typeof fn) { return fn; } return o_selectors_group_cache[stringData] = function (node) { var selectorCount = selectors.length; var i; A for (i = 1; i selectorCount; i++) { var n = node; var result = []; var simples = selectors[i]; var simpleCount = simples.length; var j; for (j = 0; j simpleCount; j++) { var simple = simples[j]; var patterns = simple.patterns; var relation = simple.relation; if ((n = relation.call(this, n, patterns))) { result[result.length] = n; n = n[0]; continue; } continue A; } return result; } return null; }; }; this._selectors_group = f_create_selectors_group; // // css3-values var p_exprs = new RegExp( ^(? + ( + FUNCTION + ) + |(\\)) + |( + (? + s_unary_operator + )? + (? + PERCENTAGE + | + DIMENSION + | + NUMBER + ) + | + URI + | + STRING + | + IDENT + (?!\\() + | + s_hexcolor + )|( + COMMA + S0 + | + S0 + / + S0 + | + S1 + ) + ) , i ); var p_expr = new RegExp; p_expr.exec = function (stringData) { var src = stringData; var cmp; var tmp; var res1 = []; var res2 = []; var depth = 0; for (; cmp = p_exprs.exec(src); src = src.slice(tmp.length)) { if ((tmp = cmp[1])) { // f( depth++, res1[res1.length] = tmp; res2[res2.length] = f_unescape(tmp); continue; } if ((tmp = cmp[2])) { // ) if (depth 0) { depth--, res1[res1.length] = tmp; res2[res2.length] = tmp; continue; } break; } if ((tmp = cmp[3])) { res1[res1.length] = tmp; res2[res2.length] = f_unescape(tmp); continue; } if ((tmp = cmp[4])) { // operator res1[res1.length] = tmp; res2[res2.length] = f_trim(tmp) || \x20 ; continue; } } if (depth === 0) { if (res2[res2.length - 1] === \x20 ) { res2.pop(); } return [].concat(res1.join( ), res2); } return null; }; // // css3-mediaqueries var p_media_expression_prefix = new RegExp( ^\\( + S0 + ( + IDENT + ) + S0, i ); var p_media_expression_infix = new RegExp( ^ + S0); var p_media_expression_suffix = new RegExp( ^\\) + S0); var p_val_px = new RegExp( ^ + w + ( + NUMBER + ) + P + X + w + $ , i ); var p_val_ratio = new RegExp( ^ + w + ( + NUMBER + ) + w + / + w + ( + NUMBER + ) + w + $ , i ); var p_val_num = new RegExp( ^ + S0 + ( + NUMBER + ) + S0 + $ , i ); var p_val_pattern = new RegExp( ^ + S0 + ( + STRING + ) + S0 + , + S0 + ( + STRING + ) + S0 + $ ); var c_media_width = w.innerWidth ; var c_media_height = w.innerHeight ; var c_media_width_div_height = w.innerWidth/w.innerHeight ; var c_media_device_width = w.screen.availWidth ; var c_media_device_height = w.screen.availHeight ; var c_media_device_width_div_device_height = w.screen.availWidth/w.screen.availHeight ; var c_media_color = w.screen.colorDepth ; var p_media_expression = new RegExp; p_media_expression.exec = function (stringData) { var src = stringData; var cmp; if ((cmp = p_media_expression_prefix.exec(src))) { var res1 = []; var res2 = []; res2 = res2.concat(cmp.slice(1)); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); if ((cmp = p_media_expression_infix.exec(src))) { cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); if ((cmp = p_expr.exec(src))) { res2 = res2.concat(cmp.slice(1)); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); } } if ((cmp = p_media_expression_suffix.exec(src))) { cmp = cmp[0]; res1[res1.length] = cmp; var feature = res2[0].toLowerCase(); var value = res2.slice(1).join( ); var accessor; var operator; var code; /*@{ c_media_width = (function(d){d=(d.compatMode=== CSS1Compat )?d.documentElement d.body;return\x20d.clientWidth;})(w.document) ; c_media_height = (function(d){d=(d.compatMode=== CSS1Compat )?d.documentElement d.body;return\x20d.clientHeight;})(w.document) ; c_media_width_div_height = (function(d){d=(d.compatMode=== CSS1Compat )?d.documentElement d.body;return\x20d.clientWidth/d.clientHeight;})(w.document) ; }@*/ if (/(? ^|-)(? width|height)$/i.test(feature)) { switch (feature) { case width accessor = c_media_width, operator = === ; break; case height accessor = c_media_height, operator = === ; break; case max-width accessor = c_media_width, operator = = ; break; case min-width accessor = c_media_width, operator = = ; break; case max-height accessor = c_media_height, operator = = ; break; case min-height accessor = c_media_height, operator = = ; break; case device-width accessor = c_media_device_width, operator = === ; break; case device-height accessor = c_media_device_height, operator = === ; break; case max-device-width accessor = c_media_device_width, operator = = ; break; case min-device-width accessor = c_media_device_width, operator = = ; break; case max-device-height accessor = c_media_device_height, operator = = ; break; case min-device-height accessor = c_media_device_height, operator = = ; break; default accessor = false ; } code = return\x20 + accessor; if (value (value = p_val_px.exec(value))) { code += operator + value[1] + ; ; } else if (/^[ ]/.test(operator)) { code += ; ; } else { code += !==0; ; } } else if (/(? ^|-)aspect-ratio$/i.test(feature)) { switch (feature) { case aspect-ratio accessor = c_media_width_div_height, operator = == ; break; case max-aspect-ratio accessor = c_media_width_div_height, operator = = ; break; case min-aspect-ratio accessor = c_media_width_div_height, operator = = ; break; case device-aspect-ratio accessor = c_media_device_width_div_device_height, operator = == ; break; case max-device-aspect-ratio accessor = c_media_device_width_div_device_height, operator = = ; break; case min-device-aspect-ratio accessor = c_media_device_width_div_device_height, operator = = ; break; default accessor = false ; } code = return\x20 + accessor; if (value (value = p_val_ratio.exec(value))) { code += operator + value[1] + ; ; } else if (/^[ ]/.test(operator)) { code += ; ; } else { code += !==0; ; } } else if (/(? ^|-)color$/i.test(feature)) { switch (feature) { case color accessor = c_media_color, operator = === ; break; case max-color accessor = c_media_color, operator = = ; break; case min-color accessor = c_media_color, operator = = ; break; default accessor = false ; } code = return\x20 + accessor; if (value (value = p_val_num.exec(value))) { code += operator + value[1] + ; ; } else if (/^[ ]/.test(operator)) { code += ; ; } else { code += !==0; ; } } else { switch (feature) { case orientation if (value) { value = f_trim(value).toLowerCase(); switch (value) { case portrait code = return\x20 + c_media_width + = + c_media_height + ; ; break; case landscape code = return\x20 + c_media_width + + c_media_height + ; ; break; default code = return\x20false; ; break; } } else { code = return\x20false; ; } break; case -x-domain-pattern value = p_val_pattern.exec(value); if (value) { var psrc = value[1].slice(1, -1).replace(/[\/\\]/g, \\$ ); var flag = value[2].slice(1, -1).replace(/\\/g, \\$ ); code = /\W/.test(flag) ? return\x20false; return\x20/ + psrc + / + flag + .test(w.location); ; } else { code = return\x20false; ; } break; default code = var\x20h=this.ondefault;if(h){return\x20h.call(this,{target w,feature + feature + ,value + value.replace(/[\ \\]/g, \\$ ) + });}return\x20false; ; break; } } res2 = code; return [].concat(res1.join( ), res2); } } return null; }; // var o_media_groups = { continuous /\s*(? ^|,)\s*(? braille|handheld|screen|speech|tty|tv)\s*(? ,|$)\s*/i, paged /\s*(? ^|,)\s*(? handheld|embossed|print|projection|tv)\s*(? ,|$)\s*/i, visual /\s*(? ^|,)\s*(? handheld|print|projection|screen|tty|tv)\s*(? ,|$)\s*/i, audio /\s*(? ^|,)\s*(? handheld|screen|tv)\s*(? ,|$)\s*/i, speechg /\s*(? ^|,)\s*(? handheld|speech)\s*(? ,|$)\s*/i, tactile /\s*(? ^|,)\s*(? braille|embossed)\s*(? ,|$)\s*/i, grid /\s*(? ^|,)\s*(? braille|embossed|handheld|tty)\s*(? ,|$)\s*/i, bitmap /\s*(? ^|,)\s*(? handheld|print|projection|screen|tv)\s*(? ,|$)\s*/i, interactive /\s*(? ^|,)\s*(? braille|handheld|projection|screen|speech|tty|tv)\s*(? ,|$)\s*/i, static /\s*(? ^|,)\s*(? braille|embossed|handheld|print|screen|speech|tty|tv)\s*(? ,|$)\s*/i, // braille /\s*(? ^|,)\s*(? continuous|tactile|grid|interactive|static)\s*(? ,|$)\s*/i, embossed /\s*(? ^|,)\s*(? paged|tactile|grid|static)\s*(? ,|$)\s*/i, handheld /\s*(? ^|,)\s*(? continuous|paged|visual|audio|speech|grid|bitmap|interactive|static)\s*(? ,|$)\s*/i, print /\s*(? ^|,)\s*(? paged|visual|bitmap|static)\s*(? ,|$)\s*/i, projection /\s*(? ^|,)\s*(? paged|visual|bitmap|interactive)\s*(? ,|$)\s*/i, screen /\s*(? ^|,)\s*(? continuous|visual|audio|bitmap|interactive|static)\s*(? ,|$)\s*/i, speech /\s*(? ^|,)\s*(? continuous|speech|interactive|static)\s*(? ,|$)\s*/i, tty /\s*(? ^|,)\s*(? continuous|visual|grid|interactive|static)\s*(? ,|$)\s*/i, tv /\s*(? ^|,)\s*(? continuous|paged|visual|audio|bitmap|interactive|static)\s*(? ,|$)\s*/i }; // var p_media_query_prefix = new RegExp( ^ + S0 + ( + O + N + L + Y + | + N + O + T + )? + S0 + ( + IDENT + ) + S0, i ); var p_media_query_and = new RegExp( ^ + A + N + D + S1, i ); var p_media_query = new RegExp; p_media_query.exec = function (stringData) { var src = stringData; var cmp; var res1 = []; var res2 = []; var code1; var code2; A { if ((cmp = p_media_query_prefix.exec(src))) { // only | not code1 = (code1 = cmp[1]) ? f_unescape(code1).toLowerCase() only ; code2 = f_unescape(cmp[2]).toLowerCase(); break A; } if ((cmp = p_media_expression.exec(src))) { code1 = only ; code2 = all ; res2[res2.length] = new Function( w , cmp.slice(1).join( )); break A; } return null; } cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); // only or not code1 = (code1 === not ) ? return\x20!b; return\x20b; ; // media type if (code2 === all ) { code2 = return\x20true; ; } else { var pattern = o_media_groups[code2]; code2 = if(/(? ^| + S0 + ,) + S0 + (? + code2.replace(/\W/g, \\$ ) + ) + S0 + (? , + S0 + |$)/i.test(m))\x20return\x20true; ; if (pattern) { code2 += return\x20 + pattern + .test(m); ; // be careful not to contain / } else { code2 += return\x20false; ; } } res2 = [].concat(new Function( b , code1), new Function( m , code2), res2); // media queries while ((cmp = p_media_query_and.exec(src))) { cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); if ((cmp = p_media_expression.exec(src))) { res2[res2.length] = new Function( w , cmp.slice(1).join( )); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); continue; } return null; } return [].concat(res1.join( ), res2); }; // var p_media_query_list_prefix = new RegExp( ^ + S0); var p_media_query_list_infix = new RegExp( ^ + COMMA + S0, i ); var p_media_query_list = new RegExp; p_media_query_list.exec = function (stringData) { var src = stringData; var cmp; if ((cmp = p_media_query_list_prefix.exec(src))) { var res1 = []; var res2 = []; cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); if ((cmp = p_media_query.exec(src))) { res2[res2.length] = cmp.slice(1); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); while ((cmp = p_media_query_list_infix.exec(src))) { cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); if ((cmp = p_media_query.exec(src))) { res2[res2.length] = cmp.slice(1); cmp = cmp[0]; res1[res1.length] = cmp; src = src.slice(cmp.length); continue; } break; } } return [].concat(res1.join( ), res2); } return null; }; // var o_media_query_list_cache = { }; var f_create_media_query_list = function (stringData) { var queries = p_media_query_list.exec(stringData); if (!queries) { throw new Error( malformed Media Queries ); } var fn = o_media_query_list_cache[stringData]; if ( function === typeof fn) { return fn; } return o_media_query_list_cache[stringData] = function (view, mediaType) { var queryCount = queries.length; var i; for (i = 1; i queryCount; i++) { var exprs = queries[i]; var exprCount = exprs.length; var j; if (exprs[1].call(this, mediaType)) { var bool = true; for (j = 2; j exprCount; j++) { if (!exprs[j].call(this, view)) { bool = false; break; } } if (exprs[0].call(this, bool)) { return true; } } } return false; }; }; this._media_query_list = f_create_media_query_list; // // shortcut methods var f_matches_media_interactive = function (queries, view, thisArg) { return f_create_media_query_list(queries).call(thisArg, view, interactive ); }; this.matchesWindow = f_matches_media_interactive; var f_apply_selectors = function (selectors, root, thisArg) { selectors = f_create_selectors_group(selectors); if (! thisArg) { thisArg = { }; } thisArg.all = [ ].concat(thisArg.all || root); var result = [ ]; var es = root.getElementsByTagName( * ); var I = es.length; var i; var r; for (i = 0; i I; i++) { if ((r = selectors.call(thisArg, es[i]))) { r = r[0]; result[result.length] = r[1] || r[0]; } } return result; }; this.applySelectors = f_apply_selectors; }; 初出:2011-07-07/08/09/10/11/12、修正 2011-08-12
https://w.atwiki.jp/nabi/pages/17.html
[ @wikiモード ] 有馬さんへ ①1行の貝数を減らす ヒナコダマウサギ ムラクモコダマウサギ シロオビコダマウサギ コダマウサギ ②文字サイズを小さくする ヒナコダマウサギ ムラクモコダマウサギ シロオビコダマウサギ コダマウサギ セロガタケボリ imageプラグインエラー ご指定のURLはサポートしていません。png, jpg, gif などの画像URLを指定してください。 ③サムネイルの幅に合わせて改行する ヒナ コダマウサギ ムラクモ コダマウサギ シロオビ コダマウサギ コダマウサギ セロガタケボリ imageプラグインエラー ご指定のURLはサポートしていません。png, jpg, gif などの画像URLを指定してください。 ■ ようこそHermit Crabs Worldへ ■ このホームページでは伊豆大島の貝類を紹介しています。 ■ 更新履歴 ■ 2009.06.01 ×××××× 2009.06.01 ×××××× 2009.06.01 ×××××× ■ コンテンツ ■ ■ 伊豆大島の貝類 ■サンゴノヒモ科+ ウスヒザラガイ科+ ヒゲヒザラガイ科+ ■ 貝類について ■ ■ 伊豆大島のヤドカリ ■ ■ 1日1プラグイン ■ ■ 伊豆大島の貝類 ■ 分類リスト(※クリックするとジャンプします。) サンゴノヒモ科へ ウスヒザラガイ科へ ヒゲヒザラガイへ ヤドカリ科へ ホンヤドカリ科へ サンゴノヒモ科+ サンゴノヒモ科 サンゴノヒモの説明とか カセミミズ ウスヒザラガイ科+ ウスヒザラガイ科 ウスヒザラガイの説明とか ウスラヒザラガイ科 ウスラヒザラガイ ホソウス ヒザラガイ ハチノス ヒザラガイ ヒゲヒザラガイ科+ ヒゲヒザラガイ科 ヒゲヒザラガイの説明とか ババガゼ ■ 貝類について ■ 【 貝類についての説明 】 ◆ " "で始まるプラグインは文中で利用が可能です。 "#"で始まるプラグインは行頭から記述する必要があります。 "#"から始まるプラグインは以下のように記述することで 複数行に分けて記述することができます。 ◆ " "で始まるプラグインは文中で利用が可能です。 "#"で始まるプラグインは行頭から記述する必要があります。 "#"から始まるプラグインは以下のように記述することで 複数行に分けて記述することができます。 " "で始まるプラグインは文中で利用が可能です。 "#"で始まるプラグインは行頭から記述する必要があります。 "#"から始まるプラグインは以下のように記述することで 複数行に分けて記述することができます。 " "で始まるプラグインは文中で利用が可能です。 "#"で始まるプラグインは行頭から記述する必要があります。 ◆ ■ 伊豆大島のヤドカリ ■ ▼ ヤドカリ科 オニヤドカリ属 hondooni.jpg ホンドオニヤドカリ (Aniculus miyakei) amimeoni.jpg アミメオニヤドカリ (Aniculus retipes) ▼ ホンヤドカリ科 ホンヤドカリ属 ホンヤドカリリ imageプラグインエラー ご指定のURLはサポートしていません。png, jpg, gif などの画像URLを指定してください。 クロシマホンヤドカリ imageプラグインエラー ご指定のURLはサポートしていません。png, jpg, gif などの画像URLを指定してください。 アカシマホンヤドカリ imageプラグインエラー ご指定のURLはサポートしていません。png, jpg, gif などの画像URLを指定してください。 ■ 1日1プラグイン ■ 【 プラグイン更新履歴 】 サムネイルからtextとurlを取得してhtmlタグのselect要素に アイウエオ順で一覧表示し、radioボタンにて表示内容を切り替える。 検索textから入力された文字列にマッチするoptionのみ一覧に再表示。 [選択]buttonで、検索結果からselectされた各optionの valueに格納されたurl先へリダイレクトする。貝名は別窓表示。 2009.07.03 ■ListIndex:[#javascript(){{}}] JavaScriptの挿入 2009.07.01 ■貝類について:[#divstyle()] スタイル指定のDIV表示 2009.06.30 ■1日1プラグイン:[#html2()] CSSカスタマイズからオリジナルのスタイルシートmyclassを追加し html2プラグインのHTMLタグ中に定義済みのCSSクラスを適用する 2009.06.29 ■1日1プラグイン:[#html2()] HTMLタグの挿入(イミな~--;) 2009.06.29 ■E-Mail:[#pulldown_jump] ドロップダウンリストからメール送信先を選択 2009.06.28 ■画像表示:[&image()] 画像を位置・サイズを指定して表示 2009.06.28 ■メールフォーム:[#mailform()] メールを送信するフォームを表示 2009.06.28 ■コンテンツ:[#contents()] 当プラグイン以降の見出しを コンテンツとして階層表示 名前 コメント すべてのコメントを見る
https://w.atwiki.jp/lebekun/pages/297.html
曲名 Set the Controls for the Heart of the Sun 点数 68 備考 ジャングルの中央的空間にささやかなボーカルが延々と続く楽曲。少々退屈に感じるが、激しくないドラムや環境音などのヒーリング要素があるので疲弊した時に聴くのがベスト。 関連ワード 68
https://w.atwiki.jp/tianlang/pages/51.html
http //labs.adobe.com/technologies/spry/articles/tabbed_panel/ Using Spry Widgets Tabbed Panels Overview Working with the Tabbed Panels widget Tabbed Panels widget overview and structure A version of this file is available on Adobe LiveDocs. Please check it for comments and updates. A Tabbed Panels widget is a set of panels that can store content in a compact space. Site viewers hide or reveal the content stored in the Tabbed Panels by clicking the tab of the panel they want to access. The panels of the widget open accordingly as the visitor clicks different tabs. In a Tabbed Panels widget, only one content panel is open at a given time. The following example shows a Tabbed Panels widget, with the third panel open. The HTML code for the Tabbed Panels widget is made up of an outer div tag that contains all of the panels, a list for the tabs, a div tag to contain the content panels, and a div tag for each content panel. The HTML code for the Tabbed Panels widget also includes script tags in the head of the document and after the Tabbed Panel widget’s HTML code. The script tag in the head of the document defines all of the JavaScript functions related to the Tabbed Panel widget. The script tag after the Tabbed Panel widget code creates a JavaScript object that makes the Tabbed Panel interactive. Following is the HTML code for a Tabbed Panel widget head . . . !--Link the CSS style sheet that styles the tabbed panel-- link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" / !--Link the Spry TabbedPanels JavaScript library-- script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript" /script /head body !--Create the Tabbed Panel widget and assign classes to each element-- div class="TabbedPanels" id="TabbedPanels1" ul class="TabbedPanelsTabGroup" li class="TabbedPanelsTab" Tab 1 /li li class="TabbedPanelsTab" Tab 2 /li li class="TabbedPanelsTab" Tab 3 /li li class="TabbedPanelsTab" Tab 4 /li /ul div class="TabbedPanelsContentGroup" div class="TabbedPanelsContent" Tab 1 Content /div div class="TabbedPanelsContent" Tab 2 Content /div div class="TabbedPanelsContent" Tab 3 Content /div div class="TabbedPanelsContent" Tab 4 Content /div /div /div !--Initialize the Tabbed Panel widget object-- script type="text/javascript" var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); /script /body In the code, the new JavaScript operator initializes the Tabbed Panel widget object, and transforms the div content with the ID of TabbedPanels1 from static HTML code into an interactive page element. The Spry.Widget.TabbedPanels method is a constructor in the Spry framework that creates Tabbed Panel objects, and the information necessary to initialize the object is contained in the SpryTabbedPanels.js JavaScript library that you linked to in the head of the document. Each of the elements in the Tabbed Panel widget contains a CSS class. These classes control the style of the Tabbed Panel widget, and exist in the accompanying SpryTabbedPanels.css file. You can change the appearance of any given part of the Tabbed Panel widget by editing the CSS rule that corresponds to the class names assigned to it in the HTML code. For example, to change the background color of the Tabbed Panel’s tabs, edit the TabbedPanelsTab rule in the SpryTabbedPanels.css file. Keep in mind that changing the CSS code in the SpryTabbedPanels.css file will affect all tabbed panels that are linked to that file. In addition to the classes shown in the HTML code, the Tabbed Panel widget includes certain default behaviors that are attached to the widget. These behaviors are a built‑in part of the Spry framework, and are in the SpryTabbedPanels.js JavaScript library file. The Tabbed Panel library includes behaviors related to hovering, tab clicking (to open panels), panel focus, and keyboard navigation. You can change the look of the Tabbed Panel as it relates to these behaviors by editing the appropriate classes in the SpryTabbedPanels.css file. If you want to remove a given behavior, you can delete the CSS rules that correspond to that behavior. Note While you can change the look of the Tabbed Panel as it relates to a certain behavior, you cannot alter the built‑in behaviors themselves. For example, Spry still places a TabbedPanelsContentVisible class on the currently open panel, even if no properties are set for the TabbedPanelsContentVisible class in the SpryTabbedPanels.css file. Variation on tags used for Tabbed Panels widget structure In the preceding example, div tags and list items create a nested tag structure for the widget Container div Tabs ul Tab li Content container div Content div This 3-level, 5-container structure is essential for the Tabbed Panels widget to work properly; the structure, however, is more important than the actual tags you decide to use. Spry reads the structure (not div tags necessarily) and builds the widget accordingly. As long as the 3-level, 4-container structure is in place, you can use any block-level element to create the widget Container div Tabs div Tab h3 Content container div Content p The div tags in the example are flexible and can contain other block-level elements. A p tag (or any other inline tag), however, cannot contain other block-level elements, so you cannot use it as a container or panel tag for the tabbed panel. CSS code for the Tabbed Panels widget The SpryTabbedPanels.css file contains the rules that style the Tabbed Panels widget. You can edit these rules to style the tabbed panels’ look and feel. The names of the rules in the CSS file correspond directly to the names of the classes specified in the Tabbed Panels widget’s HTML code. Note You can replace style-related class names in the SpryTabbedPanels.css file and HTML code with class names of your own. Doing so does not affect the functionality of the widget, as CSS code is not required for widget functionality. The default functionality for the behaviors classes at the end of the style sheet are defined in the SpryTabbedPanels.js JavaScript library file. You can change the default functionality by adding properties and values to the behavior rules in the style sheet. The following is the CSS code for the SpryTabbedPanels.css file. The first half of the file contains styling rules for horizontal tabbed panels. The second half of the file contains styling rules for vertical tabbed panels. /* Horizontal Tabbed Panels */ .TabbedPanels { margin 0px; padding 0px; clear both; width 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/ } .TabbedPanelsTabGroup { margin 0px; padding 0px; } .TabbedPanelsTab { position relative; top 1px; float left; padding 4px 10px; margin 0px 1px 0px 0px; font bold 0.7em sans-serif; background-color #DDD; list-style none; border-left solid 1px #CCC; border-bottom solid 1px #999; border-top solid 1px #999; border-right solid 1px #999; -moz-user-select none; -khtml-user-select none; cursor pointer; } .TabbedPanelsTabHover { background-color #CCC; } .TabbedPanelsTabSelected { background-color #EEE; border-bottom 1px solid #EEE; } .TabbedPanelsTab a { color black; text-decoration none; } .TabbedPanelsContentGroup { clear both; border-left solid 1px #CCC; border-bottom solid 1px #CCC; border-top solid 1px #999; border-right solid 1px #999; background-color #EEE; } .TabbedPanelsContent { padding 4px; } .TabbedPanelsContentVisible { } /* Vertical Tabbed Panels */ .VTabbedPanels .TabbedPanelsTabGroup { float left; width 10em; height 20em; background-color #EEE; position relative; border-top solid 1px #999; border-right solid 1px #999; border-left solid 1px #CCC; border-bottom solid 1px #CCC; } .VTabbedPanels .TabbedPanelsTab { float none; margin 0px; border-top none; border-left none; border-right none; } .VTabbedPanels .TabbedPanelsTabSelected { background-color #EEE; border-bottom solid 1px #999; } .VTabbedPanels .TabbedPanelsContentGroup { clear none; float left; padding 0px; width 30em; height 20em; }The SpryTabbedPanels.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file. Insert the Tabbed Panels widget Locate the SpryTabbedPanels.js file and add it to your web site. You can find the SpryTabbedPanels.js file in the widgets/tabbedpanels directory, located in the Spry directory that you downloaded from Adobe Labs. For example, create a folder called SpryAssets in the root folder of your web site, and move the SpryTabbedPanels.js file to it. The SpryTabbedPanels.js file contains all of the information necessary for making the Tabbed Panels widget interactive. Locate the SpryTabbedPanels.css file and add it to your web site. You might choose to add it to the main directory, a SpryAssets directory, or to a CSS directory if you have one. Open the web page to add the Tabbed Panels widget to and link the SpryTabbedPanels.js file to the page by inserting the following script tag in the page’s head tag script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript" /script Make sure that the file path to the SpryTabbedPanels.js file is correct. This path varies depending on where you’ve placed the file in your web site. Link the SpryTabbedPanels.css file to your web page by inserting the following link tag in the page’s head tag link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" / Make sure that the file path to the SpryTabbedPanels.css file is correct. This path varies depending on where you’ve placed the file in your web site. To add the tabbed panels widget to your web page, insert the following div tag where you want the accordion to appear on the page div id="TabbedPanels1" class="TabbedPanels" /div To add tabs to the tabbed panel, insert a ul class="TabbedPanelsTabGroup" tag inside the div id="TabbedPanels1"... tag, and an li class="TabbedPanelsTab" tag for each tab to add, as follows div class="TabbedPanels" id="TabbedPanels1" ul class="TabbedPanelsTabGroup" li class="TabbedPanelsTab" Tab 1 /li li class="TabbedPanelsTab" Tab 2 /li li class="TabbedPanelsTab" Tab 3 /li li class="TabbedPanelsTab" Tab 4 /li /ul /div The preceding code adds four tabs to the widget. You can add unlimited tabs. To add a content area (or panel) for each of the tabs, insert a div class="TabbedPanelsContentGroup" container tag after the ul tag, and a div class="TabbedPanelsContent" tag for each content panel, as follows div class="TabbedPanels" id="TabbedPanels1" ul class="TabbedPanelsTabGroup" li class="TabbedPanelsTab" Tab 1 /li li class="TabbedPanelsTab" Tab 2 /li li class="TabbedPanelsTab" Tab 3 /li li class="TabbedPanelsTab" Tab 4 /li /ul div class="TabbedPanelsContentGroup" div class="TabbedPanelsContent" Tab 1 Content /div div class="TabbedPanelsContent" Tab 2 Content /div div class="TabbedPanelsContent" Tab 3 Content /div div class="TabbedPanelsContent" Tab 4 Content /div /div /div Insert the content between the opening and closing TabbedPanelsContent tags (for example, Tab 1 Content, as in the preceding example). The content can be any valid HTML code, including HTML form elements To initialize the Spry tabbed panels object, insert the following script block after the HTML code for the Tabbed Panels widget div id="TabbedPanels1" class="TabbedPanels" . . . /div script type="text/javascript" var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); /script The new JavaScript operator initializes the Tabbed Panels widget object, and transforms the div content with the ID of TabbedPanels1 from static HTML code into an interactive tabbed panels object. The Spry.Widget.TabbedPanels method is a constructor in the Spry framework that creates tabbed panels objects. The information necessary to initialize the object is contained in the SpryTabbedPanels.js JavaScript library that you linked to at the beginning of this procedure. Make sure that the ID of the tabbed panels’ div tag matches the ID parameter you specified in the Spry.Widgets.TabbedPanels method. Make sure that the JavaScript call comes after the HTML code for the widget. Save the page. The complete code looks as follows head . . . link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" / script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript" /script /head body div class="TabbedPanels" id="TabbedPanels1" ul class="TabbedPanelsTabGroup" li class="TabbedPanelsTab" Tab 1 /li li class="TabbedPanelsTab" Tab 2 /li li class="TabbedPanelsTab" Tab 3 /li li class="TabbedPanelsTab" Tab 4 /li /ul div class="TabbedPanelsContentGroup" div class="TabbedPanelsContent" Tab 1 Content /div div class="TabbedPanelsContent" Tab 2 Content /div div class="TabbedPanelsContent" Tab 3 Content /div div class="TabbedPanelsContent" Tab 4 Content /div /div /div script type="text/javascript" var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); /script /body /body Add a panel to a Tabbed Panels widget Add an li class="TabbedPanelsTab" tag to the ul list of tabs, and a div class="TabbedPanelsContent" tag to the panel content container div tag. Do not forget to add the closing /li and /div tags when you add the code. For example div class="TabbedPanels" id="TabbedPanels1" ul class="TabbedPanelsTabGroup" li class="TabbedPanelsTab" Tab 1 /li li class="TabbedPanelsTab" Tab 2 /li /ul div class="TabbedPanelsContentGroup" div class="TabbedPanelsContent" Tab 1 Content /div div class="TabbedPanelsContent" Tab 2 Content /div /div /div You can add unlimited panels. The ratio between the number of TabbedPanelsTab li items and the number of TabbedPanelsContent div tags must always be 1 1. Delete a panel from a Tabbed Panels widget Delete the desired li class="TabbedPanelsTab" tag and corresponding div class="TabbedPanelsContent" from the code. Do not forget to delete the closing /li and /div tags when you delete the code. Enable keyboard navigation Making widgets accessible for keyboard navigation is an important part of every widget. Keyboard navigation lets the user control the widget with arrow keys or custom keys. The foundation of keyboard navigation is the tabIndex attribute. This attribute tells the browser how to use the tabs to navigate through the document. To enable keyboard navigation on the tabbed panels, add a TabIndex value to each li tag, as follows ul class="TabbedPanelsTabGroup" li class="TabbedPanelTab" tabIndex="0" Tab /li li class="TabbedPanelTab" tabIndex="0" Tab /li /ul If the tabIndex attribute has a value of zero (0), the browser determines the order. If it has a positive integer value, that order value is used. Note Using tabIndex on a div tag is not XHTML 1.0 compliant. Change the orientation of tabbed panels By default, tabbed panels appear horizontally, but you can easily create vertical tabbed panels as well. To change from a horizontal to a vertical Tabbed Panel widget, change the class on the main container div tag from TabbedPanels to VTabbedPanels, as follows div class="VTabbedPanels" id="TabbedPanels1" ul class="TabbedPanelsTabGroup" li class="TabbedPanelsTab" Tab 1 /li li class="TabbedPanelsTab" Tab 2 /li . . . /div Set default open panel You can set a panel to be open when the page containing the Tabbed Panels widget loads in a browser. Set the defaultTab option in the constructor as follows script type="text/javascript" var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab 2 }); /script Note The Tabbed Panels widget uses a zero-based counting system, so setting the value to 2 opens the third tabbed panel. Open panels programatically Use JavaScript functions to programatically open specific panels. For example, you might have a button on your page that opens a particular tabbed panel when the user clicks the button. Remember, Spry uses a zero-based counting system, so 0 indicates the first, leftmost tabbed panel. If the tabbed panel has an ID, you can also use the ID to refer to panels. Use the following functions to open specific tabbed panels button onclick="TabbedPanels1.showPanel(0)" open first panel /button button onclick="TabbedPanels1.showPanel( tabID )" open panel /button script type="text/javascript" var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); /script Customize the Tabbed Panels widget The SpryTabbedPanels.css file provides the default styling for the Tabbed Panels widget. You can, however, easily customize the widget by changing the appropriate CSS rule. The CSS rules in the SpryTabbedPanels.css file use the same class names as the related elements in the accordion’s HTML code, so it’s easy for you to know which CSS rules correspond to the different sections of the Tabbed Panels widget. Additionally, the SpryTabbedPanels.css file contains class names for behaviors that are related to the widget (for example, hovering and clicking behaviors). The SpryTabbedPanels.css file should already be a included in your website before you start customizing. Note Internet Explorer up to and including version 6 does not support sibling and child contextual selectors (for example, .TabbedPanels + .TabbedPanels or .TabbedPanels .TabbedPanels). Style an Tabbed Panels widget (general instructions) Set properties for the entire Tabbed Panels widget container, or set properties for the components of the widget individually. Open the SpryTabbedPanels.css file. Locate the CSS rule for the part of the tabbed panel to change. For example, to change the background color of the tabbed panels’ tabs, edit the TabbedPanelsTab rule in the SpryTabbedPanels.css file. Make your changes to the CSS rule and save the file. You can replace style-related class names in the SpryTabbed Panels.css file and HTML code with class names of your own. Doing so does not affect the functionality of the widget. The SpryAccordion.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file. Style Tabbed Panels widget text Set properties for the entire Tabbed Panels widget container, or set properties for the components of the widget individually. Use the following table to locate the appropriate CSS rule, and then add your own text-styling properties and values. Text to change Relevant CSS rule Example of properties and values to add Text in the entire widget .TabbedPanels font Arial; font-size medium; Text in panel tabs only .TabbedPanelsTabGroup or .TabbedPanelsTab font Arial; font-size medium; Text in content panels only .TabbedPanelsContentGroup or .TabbedPanelsContent font Arial; font-size medium; Change Tabbed Panels widget background colors Use the following table to locate the appropriate CSS rule, and then add or change background-color properties and values. Color to change Relevant CSS rule Example of property and value to add or change Background color of panel tabs .TabbedPanelsTabGroup or .TabbedPanelsTab background-color #DDD; (This is the default value.) Background color of content panels .Tabbed PanelsContentGroup or .TabbedPanelsContent background-color #EEE; (This is the default value.) Background color of selected tab .TabbedPanelsTabSelected background-color #EEE; (This is the default value.) Background color of panel tabs when the mouse pointer moves over them .TabbedPanelsTabHover background-color #CCC; (This is the default value.) Constrain the width of tabbed panels By default, the Tabbed Panels widget expands to fill available space. To constrain the width of a Tabbed Panels widget, set a width property for the accordion container. Locate the TabbedPanels CSS rule in the SpryTabbedPanels.css file. This rule defines properties for the main container element of the Tabbed Panels widget. Add a width property and value to the rule, for example width 300px;. Change tabbed panels height By default, the height of tabbed panels expands according to content. To set a specific height for panels, add a height property to the TabbedPanelsContent rule. Locate the TabbedPanelsContent CSS rule in the SpryTabbedPanels.css file. Add a height property and value to the rule, for example width 300px;. Change tabbed panels behaviors The Tabbed Panels widget includes a few predefined behaviors. These behaviors consist of changing CSS classes when a particular event occurs. For example, when a mouse pointer hovers over a panel tab, Spry applies the TabbedPanelsTabHover class to the widget. (This behavior is similar to a hover for links.) The behaviors are blank by default; to change them, add properties and values to the rules. Open the SpryTabbedPanels.css file and locate the CSS rule for the tabbed panels behavior to change. The Tabbed Panels widget includes four built-in rules for behaviors. Behavior Description .Tabbed PanelsTabHover Activates when hovering over the panel tab .Tabbed PanelsTabFocused Activates when a tab has keyboard focus .Tabbed PanelsTabSelected Activates on currently selected tab .TabbedPanelsContentVisible Activates on content area of currently selected tab For examples, see the Tabbed Panels sample file located in the samples directory of the Spry directory that you downloaded from Adobe Labs. Add CSS rules for any of the behaviors you want to enable. Note You cannot replace behavior-related class names in the SpryTabbedPanels.css file with class names of your own because the behaviors are hard coded as part of the Spry framework. To override the default class with your class names, send the new values as arguments to the tabbed panels constructor script type="text/javascript" var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { tabHoverClass "hover", panelVisibleClass "open", tabSelectedClass "selected", tabFocusedClass "focused" }); /script Copyright © 2006. Adobe Systems Incorporated. All rights reserved.
https://w.atwiki.jp/ismoppy/pages/63.html
.comment{ overflow-y scroll; height 160px; font-size 10pt; border 1px solid #DCDCDC; } .plugin_aa{ font-size 12pt; } .plugin_asciiart{ font-size 12pt; } #atwiki jp-bg1 { background top center url(http //cdn58.atwikiimg.com/ismoppy/?cmd=upload act=open page=%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC file=moppy.jpg) no-repeat; left 10px; height 150px; width 150px; overflow visible; margin 5px; } #leftwrapper #container div.townBox dl dd { margin .1em 0 0 1.1em; background-color #b0c4de; } table.diff, td.diff-otitle, td.diff-ntitle { background-color #b0c4de; } #wikibody table { border 1px solid #778899; margin 2px; padding 2px; background-color #e6e6fa; } #wikibody table td { vertical-align middle; background-color #f9f9f9; border solid 2px white; #wikibody table tr { vertical-align middle; }
https://w.atwiki.jp/9lives/pages/17.html
CSSVerUpdate情報 サンプルページ バージョンアップ情報 CSS設定方法 サンプルページ WEAPON バージョンアップ情報 【ver1.09】 2016年01月21日 画像リンクの影響がヘッダーのメニューにも出ないようにした。 見出し2と見出し3の中にある画像には右に余白が付くようにした。Classes用。 ページ編集画面を整理した。詳しくは下記画像を参照して下さい。チェックボックス2つ、「タイムスタンプを更新しない」と「更新情報」は削除した。前者は使われると更新状況の把握が難しくなるので使用させないため。後者はONでOKなため。 タグの入力フォームも削除した。ページの階層化とWiki内検索で事足りるため。 「ページ保存」と「プレビュー」ボタンを変更した。見やすく・押しやすくするため。ついでに上の方にあった一つ目の「ページ保存」は削除した。プレビュー機能を忘れず使ってもらいたいため。 +前Version 【ver1.08】 2016年01月20日 ページ編集時のテキストエリアを枠線の外まで広げられないようにした。 ページ編集時に下記画像のようにテキストが出るようにした。文字サイズは見出し1と同じ1.17emにしてある。 【ver1.07】 2016年01月13日 目次(Index)リストのクリック範囲を広げた。 見出しを控えめにした。線が多すぎてごちゃごちゃしていたため。 画像リンクにテキストリンクの青背景が出るのを修正した。文中のテキストリンクは文字色が変化するだけにした。 【ver1.06】 2016年01月09日 表の頭に余白を追加した。入れ忘れていたので。 画像リンクにカーソルを載せたときにエフェクトが出るようにした。見やすさのため。画像に青い横線が入るのは仕様です。 【ver1.05】 2016年01月08日 文字色を#fffから#dddに変えた。コントラストが強すぎてチカチカするように感じられたため。 リンクにカーソルを置いたときに背景色が変わるようにした。クリック可能範囲を分かりやすくするため。 目次(Index)の横幅が狭すぎたため修正した。 左メニューのツリーのクリック範囲の拡大はお手上げ。ただアイコンの位置は少し修正した。 【ver1.03】 2015年12月08日 本文以外の文字サイズを小さくした。特にタイトルは縦幅も縮めた。 左メニューのリストのクリック範囲を右に広げた。更新履歴の縦幅を狭めて日付に色を付けて見やすくした。 目次(Index)を見やすくした。上の四角く囲ってあるところ。 差分表示画面を白背景にした。デフォルトの文字色は変更できないため。 平行線を見出し1番目の境界線と同じにした。目次に表示されない見出しっぽいものを作るため。 【ver1.02】 2015年10月18日 FAQ用に四番目の見出しを調整。既存の三番目より文字サイズを小さくして全体的なバランスを良くして読みやすくした。FAQサンプルページ 【ver1.01】 2015年10月14日 表のデザインを変更。 見出し三種類のデザインを変更。 リスト表示の文頭マークを■に変更。リスト自体のデザインも調整して行間を通常の文と同じにした。 ヘッダー、左メニュー、右コンテンツのデザインを変更。特に右コンテンツは幅を固定したので文字が読みやすくなった。 画像の上下に1.5pxの余白を追加した。Itemsにおいて画像メニューを作るため。 CSS設定方法 デザイン設定→ デザインを選択する→ 黒ベースver2 を選択して「変更する」 を押して下さい。 デザイン設定→ CSSカスタマイズ→ ■基本デザインのCSSを無効化する にチェック を入れて下さい。これらは一回変更すれば設定は保存されますので次回以降は省略可能です。 ■ユーザ定義CSS に、ページ下部の添付ファイルの全文をコピペして「変更する」 を押して下さい。 以上で作業は完了です。お疲れ様でした。表示崩れなどがあったら教えて下さい。 では、ありがとうございました。またよろしくお願いします。
https://w.atwiki.jp/htmlcss/pages/2.html
メニュー トップページ csscssの記述方法 cssファレンスABC順 記事 プラグイン紹介 まとめサイト作成支援ツール メニュー メニュー2 リンク @wiki @wikiご利用ガイド 他のサービス 無料ホームページ作成 無料ブログ作成 2ch型掲示板レンタル 無料掲示板レンタル お絵かきレンタル 無料ソーシャルプロフ ここを編集