ページで使用されている「id名」「class名」をChromeで取得したい  

CSS

目次一覧

 状態:試行錯誤履歴  閲覧数:452  投稿日:2019-10-13  更新日:2019-10-14
やりたいこと / 2案 / 案A.Chrome 拡張「CSS Used」を使用

案B-X.JavaScriptで抽出を行い、console.logですぐに表示する

案B-Y.JavaScriptで抽出を行い変数へ格納後、console.logで表示する


やりたいこと / 2案 / 案A.Chrome 拡張「CSS Used」を使用

 閲覧数:89 投稿日:2019-10-13 更新日:2019-10-13 

やりたいこと


ページで使用されている「id名」「class名」をChromeで取得したい
下記の逆
使用していないCSSをチェックする、標準的な方法を知りたい

2案


案A.Chrome 拡張「CSS Used」を使用

案B.JavaScriptで抽出を行い、console.logで表示する
・X.JavaScriptで抽出を行い、console.logですぐに表示する
・Y.JavaScriptで抽出を行い変数へ格納後、console.logで表示する

案A.Chrome 拡張「CSS Used」を使用


1. 抽出したいWEBサイトを開く
2. 抽出したい要素を右クリックして「検証」
3. 右のパネルで>> 「CSS Used」を選択する

Googleページで検証してみた結果
/*! CSS Used from: Embedded */
.gb_hd{display:inline-block;padding:0 0 0 15px;vertical-align:middle;}
.gb_hd:first-child{padding-left:0;}
.gb_Lf{position:relative;}
.gb_B{display:inline-block;outline:none;vertical-align:middle;-webkit-border-radius:2px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;height:30px;width:30px;color:#000;cursor:pointer;text-decoration:none;}
#gb#gb a.gb_B{color:#000;cursor:pointer;text-decoration:none;}
.gb_Qa{border-color:transparent;border-bottom-color:#fff;border-style:dashed dashed solid;border-width:0 8.5px 8.5px;display:none;position:absolute;left:6.5px;top:37px;z-index:1;height:0;width:0;-webkit-animation:gb__a .2s;animation:gb__a .2s;}
.gb_Ra{border-color:transparent;border-style:dashed dashed solid;border-width:0 8.5px 8.5px;display:none;position:absolute;left:6.5px;z-index:1;height:0;width:0;-webkit-animation:gb__a .2s;animation:gb__a .2s;border-bottom-color:#ccc;border-bottom-color:rgba(0,0,0,.2);top:36px;}
div.gb_Ra{border-bottom-color:#ccc;}
.gb_A .gb_B{background-position:-132px -38px;opacity:.55;}
.gb_va{display:none!important;}
#gb#gb a.gb_e{color:rgba(0,0,0,0.87);text-decoration:none;}
#gb#gb a.gb_e:hover,#gb#gb a.gb_e:focus{opacity:.85;text-decoration:underline;}
.gb_f.gb_g{display:none;padding-left:15px;vertical-align:middle;}
.gb_f.gb_g:first-child{padding-left:0;}
.gb_f .gb_e{display:inline-block;line-height:24px;outline:none;vertical-align:middle;}
.gb_1{display:inline-block;line-height:28px;padding:0 12px;-webkit-border-radius:2px;border-radius:2px;}
.gb_1{background:#f8f8f8;}
.gb_1{color:#666;cursor:default;text-decoration:none;}
#gb a.gb_1.gb_1{cursor:default;text-decoration:none;}
.gb_1{border:1px solid #4285f4;font-weight:bold;outline:none;background:#4285f4;background:-webkit-linear-gradient(top,#4387fd,#4683ea);background:linear-gradient(top,#4387fd,#4683ea);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4387fd,endColorstr=#4683ea,GradientType=0);}
#gb a.gb_1.gb_1{color:#fff;}
.gb_1:hover{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(0,0,0,.15);}
.gb_1:active{-webkit-box-shadow:inset 0 2px 0 rgba(0,0,0,.15);box-shadow:inset 0 2px 0 rgba(0,0,0,.15);background:#3c78dc;background:-webkit-linear-gradient(top,#3c7ae4,#3f76d3);background:linear-gradient(top,#3c7ae4,#3f76d3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3c7ae4,endColorstr=#3f76d3,GradientType=0);}
.gb_g{display:inline-block;-webkit-flex:0 0 auto;flex:0 0 auto;-webkit-flex:0 0 main-size;flex:0 0 main-size;}
.gb_g.gb_Ag{float:right;-webkit-order:1;order:1;}
.gb_Bg{white-space:nowrap;}
.gb_Tf .gb_Bg{display:-webkit-flex;display:flex;}
.gb_Bg,.gb_g{margin-left:0!important;margin-right:0!important;}
.gb_sc{background-image:url(//ssl.gstatic.com/gb/images/i1_1967ca6a.png);-webkit-background-size:528px 68px;background-size:528px 68px;}
@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25){
.gb_sc{background-image:url(//ssl.gstatic.com/gb/images/i2_2ec824b0.png);}
}
.gb_Ka{min-width:165px;padding-left:30px;padding-right:30px;position:relative;text-align:right;z-index:986;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-user-select:none;}
.gb_Ka.gb_g{-webkit-flex:1 1 auto;flex:1 1 auto;-webkit-flex:1 1 main-size;flex:1 1 main-size;}
.gb_Zc{line-height:normal;position:relative;text-align:left;}
.gb_Zc.gb_g,.gb_ce.gb_g{-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex:0 1 main-size;flex:0 1 main-size;}
.gb_mg{display:inline-block;padding:0 0 0 15px;position:relative;vertical-align:middle;}
.gb_ce{line-height:normal;padding-right:15px;}
.gb_Ka .gb_ce{padding-right:0;}
.gb_Tf .gb_Ka{min-width:0;}
.gb_Eg.gb_Eg .gb_f{display:inline-block;}
.gb_Eg.gb_Ka .gb_ce{padding-right:15px;}
.gb_Eg.gb_Ka{z-index:987;}
/*! CSS Used from: Embedded */
.gsfi{font:16px arial,sans-serif;line-height:34px;height:34px!important;}
.jhp input[type="submit"]{background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);-webkit-border-radius:2px;-webkit-user-select:none;background-color:#f2f2f2;border:1px solid #f2f2f2;border-radius:4px;color:#5F6368;cursor:pointer;font-family:arial,sans-serif;font-size:14px;margin:11px 4px;min-width:54px;padding:0 16px;text-align:center;}
.jhp input[type="submit"]{height:36px;line-height:27px;}
.jhp input[type="submit"]:hover{background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);background-color:#f8f8f8;background-image:linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-o-linear-gradient(top,#f8f8f8,#f1f1f1);border:1px solid #c6c6c6;box-shadow:0 1px 1px rgba(0,0,0,0.1);color:#222;}
.jhp input[type="submit"]:focus{border:1px solid #4d90fe;outline:none;}
.tsf{background:none;}
#searchform{width:100%;}
.hp #searchform{position:absolute;top:311px;}
.sfbg{height:69px;left:0;position:absolute;width:100%;}
.sfbgg{height:65px;}
/*! CSS Used from: Embedded */
body{height:100%;margin:0;}
#viewport{min-height:100%;position:relative;width:100%;}
.content{padding-bottom:35px;}
#footer{bottom:0;font-size:10pt;height:35px;position:absolute;width:100%;}
body,a{font-family:arial,sans-serif;}
.ctr-p{margin:0 auto;min-width:980px;}
.big .ctr-p{min-width:1139px;}
body{background:#fff;color:#222;}
a{color:#1a0dab;text-decoration:none;}
a:hover,a:active{text-decoration:underline;}
a:visited{color:#609;}
#footer a{color:#5f6368;margin:2px 10px 0;}
#footer a:active{color:#dd4b39;}
body{font-size:small;}
ul,li{margin:0;padding:0;}
.nojsv{visibility:hidden;}
#body,#footer{display:block;}
.hp #tsf{margin:0 auto;width:833px;}
#tsf{width:833px;}
.big #tsf,.hp .big #tsf{width:1139px;}
#footer a{display:inline-block;}
/*! CSS Used from: Embedded */
.hp #tsf{margin:0 auto;width:833px;}
#tsf{width:833px;}
.big #tsf,.hp .big #tsf{width:1139px;}
/*! CSS Used from: Embedded */
.z1asCe{display:inline-block;fill:currentColor;height:24px;line-height:24px;position:relative;width:24px;}
.z1asCe svg{display:block;height:100%;width:100%;}
.spch-dlg{background:transparent;border:none;}
.spch{background:#fff;height:100%;left:0;opacity:0;overflow:hidden;position:fixed;text-align:left;top:0;visibility:hidden;width:100%;z-index:10000;transition:visibility 0s linear 0.218s,background-color 0.218s;}
.close-button{background:none;border:none;color:#777;cursor:pointer;font-size:26px;right:0;height:11px;line-height:15px;margin:15px;opacity:.6;padding:0;position:absolute;top:0;width:15px;z-index:10;}
.close-button:hover{opacity:.8;}
.close-button:active{opacity:1;}
.spchc{display:block;height:42px;position:absolute;pointer-events:none;}
.inner-container{height:100%;opacity:.1;pointer-events:none;width:100%;transition:opacity .318s ease-in;}
.text-container{pointer-events:none;}
.s2fp-h .text-container{position:absolute;}
.spcht{font-weight:normal;line-height:1.2;opacity:0;pointer-events:none;position:absolute;text-align:left;-webkit-font-smoothing:antialiased;transition:opacity .1s ease-in,margin-left .5s ease-in,top 0s linear 0.218s;}
.s2fp-h .spcht{margin-left:44px;}
.s2fp-h .spcht{left:-44px;top:-.2em;}
.s2fp-h .spcht{font-size:32px;width:460px;}
.permission-bar{margin-top:-100px;opacity:0;pointer-events:none;position:absolute;width:500px;transition:opacity 0.218s ease-in,margin-top .4s ease-in;}
.permission-bar-gradient{box-shadow:0 1px 0px #4285F4;height:80px;left:0;margin:0;opacity:0;pointer-events:none;position:fixed;right:0;top:-80px;transition:opacity 0.218s,box-shadow 0.218s;}
.google-logo{background:url(data:image/png;base64,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) no-repeat center;background-size:94px 32px;height:32px;width:94px;top:8px;opacity:0;float:right;left:255px;pointer-events:none;position:relative;transition:opacity .5s ease-in,left .5s ease-in;}
.s2fp-h .spchc{margin:auto;margin-top:312px;max-width:572px;min-width:534px;padding:0 223px;position:relative;top:0;}
.button{background-color:#fff;border:1px solid #eee;border-radius:100%;bottom:0;box-shadow:0 2px 5px rgba(0,0,0,.1);cursor:pointer;display:inline-block;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:background-color 0.218s,border 0.218s,box-shadow 0.218s;}
.s2fp-h .button{opacity:0;pointer-events:none;position:absolute;transition-delay:0;}
.r8s4j{background-color:#dbdbdb;border-radius:100%;display:inline-block;height:301px;left:-69px;opacity:1;pointer-events:none;position:absolute;top:-69px;width:301px;transform:scale(.01);transition:opacity 0.218s;}
.button-container{pointer-events:none;position:relative;transition:transform 0.218s,opacity 0.218s ease-in;}
.s2fp-h .button-container{height:165px;right:-70px;top:-70px;width:165px;float:right;}
.s2fp-h .button-container{transform:scale(.1);}
.button:active{background-color:#eee;}
.microphone{height:87px;left:43px;pointer-events:none;position:absolute;top:47px;width:42px;transform:scale(1);}
.receiver{background-color:#999;border-radius:30px;height:46px;left:25px;pointer-events:none;position:absolute;width:24px;}
.wrapper{bottom:0;height:53px;left:11px;overflow:hidden;pointer-events:none;position:absolute;width:52px;}
.stem{background-color:#999;bottom:14px;height:14px;left:22px;pointer-events:none;position:absolute;width:9px;z-index:1;}
.shell{border:7px solid #999;border-radius:28px;bottom:27px;height:57px;pointer-events:none;position:absolute;width:38px;z-index:0;left:0px;}
/*! CSS Used from: Embedded */
@media only screen and (max-width:580px){
#gb div{display:none;}
}
#gb{font-size:13px;}
#gb{position:relative;top:8px;}
div#searchform{min-width:980px;z-index:103;}
div.sfbg,div.sfbgg{min-width:980px;height:64px;}
.big form#tsf,form#tsf{width:auto;max-width:784px;overflow:hidden;}
#searchform.big>#tsf{max-width:784px;}
#gb{top:16px;}
div#viewport{position:absolute;top:0;width:100%;}
div#searchform.jhp{margin-top:0;}
#searchform.big.jhp>#tsf{max-width:none;}
.jhp>#tsf{max-width:none;}
/*! CSS Used from: Embedded */
.A8SBwf{position:relative;margin:0 auto;padding-top:6px;width:484px;}
#searchform.big .A8SBwf{width:584px;}
.RNNXgb{background:#fff;display:flex;border-radius:8px;border:1px solid #dfe1e5;box-shadow:none;border-radius:24px;z-index:3;height:44px;margin:0 auto;width:482px;}
.RNNXgb:hover{box-shadow:0 1px 6px 0 rgba(32,33,36,0.28);border-color:rgba(223,225,229,0);}
#searchform.big .RNNXgb{width:582px;}
.SDkEP{flex:1;display:flex;padding:5px 8px 0 16px;padding-left:14px;}
.FPdoLc{padding-top:18px;position:absolute;top:53px;width:487px;z-index:0;}
#searchform.big .FPdoLc{width:571px;}
.iblpc{display:flex;align-items:center;padding-right:13px;margin-top:-5px;}
/*! CSS Used from: Embedded */
.uFMOof{margin:auto;}
.nS8rZ{color:#9AA0A6;height:20px;width:20px;margin-top:3px;}
/*! CSS Used from: Embedded */
.gLFyf{background-color:transparent;border:none;margin:0;padding:0;color:rgba(0,0,0,.87);word-wrap:break-word;outline:none;display:flex;flex:100%;-webkit-tap-highlight-color:transparent;margin-top:-37px;}
.a4bIc{display:flex;flex:1;flex-wrap:wrap;}
.vdLsw{color:transparent;flex:100%;white-space:pre;}
/*! CSS Used from: Embedded */
.dRYYxd{display:flex;flex:0 0 auto;margin-top:-5px;align-items:stretch;flex-direction:row;}
/*! CSS Used from: Embedded */
.JC0tCe{flex:1 0 auto;display:flex;cursor:pointer;align-items:center;border:0;background:transparent;outline:none;padding:0 8px;width:24px;line-height:44px;}
.hb2Smf{background:url(//www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png) 0 0 no-repeat;height:24px;width:24px;background-size:24px;vertical-align:middle;}
/*! CSS Used from: Embedded */
.UUbT9{position:relative;text-align:left;margin-top:-1px;z-index:3;cursor:default;-webkit-user-select:none;}
.aajZCb{background:#fff;display:flex;flex-direction:column;list-style-type:none;margin:0;padding:0;box-shadow:0 3px 8px 0 rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.08);border:0;border-radius:0 0 24px 24px;box-shadow:0 4px 6px 0 rgba(32,33,36,0.28);padding-bottom:4px;overflow:hidden;}
.erkvQe{flex:auto;padding-bottom:0px;}
.RjPuVb{height:1px;margin:0 26px 0 0;}
.xtSCL{border-top:1px solid #e8eaed;margin:0 20px 0 14px;padding-bottom:4px;}
/*! CSS Used from: Embedded */
#sbt{display:none;}
.sbct{display:flex;align-items:center;min-width:0;padding:0;}
.suggestions-inner-container{flex:auto;display:flex;margin:0 20px;align-items:center;margin:0 20px 0 14px;}
.sbtc{display:flex;flex:auto;flex-direction:column;min-width:0;padding:6px 0;}
.sbic{display:flex;flex:0 1 auto;align-items:center;margin-right:14px;}
.sbl1{display:flex;font-size:16px;color:#212121;flex:auto;align-items:center;word-break:break-word;padding-right:8px;}
.sbl1>span{flex:auto;}
.sbab{display:flex;flex:0 1 auto;align-self:stretch;}
/*! CSS Used from: Embedded */
.VlcLAe{height:70px;}
/*! CSS Used from: Embedded */
.JUypV{font-size:8pt;margin-top:-16px;position:absolute;right:16px;}
/*! CSS Used from: Embedded */
a.duf3{color:#70757a;float:right;font-style:italic;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);}
a.aciXEb{padding:0 5px;}
/*! CSS Used from: Embedded */
#lga{height:233px;margin-top:89px;}
/*! CSS Used from: Embedded */
.EvHmz{bottom:0;left:0;position:absolute;right:0;}
.hRvfYe #fsettl:hover{text-decoration:underline;}
.hRvfYe #fsett a:hover{text-decoration:underline;}
.hRvfYe a:hover{text-decoration:underline;}
.fbar a,#fsettl{text-decoration:none;white-space:nowrap;}
.fbar{margin-left:-27px;}
.Fx4vi{padding-left:27px;margin:0!important;}
#fbarcnt{display:block;}
#fsr{float:right;white-space:nowrap;}
#fsl{white-space:nowrap;}
#fsett{background:#fff;border:1px solid #999;bottom:30px;padding:10px 0;position:absolute;box-shadow:0 2px 4px rgba(0,0,0,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.2);text-align:left;z-index:104;}
#fsett a{display:block;line-height:44px;padding:0 20px;text-decoration:none;white-space:nowrap;}
#fbar{background:#f2f2f2;line-height:40px;min-width:980px;border-top:1px solid #e4e4e4;}
.fbar a,#fsettl,#fsett a{color:#5f6368;}
.fbar a:hover,#fsett a:hover{color:#333;}
.fbar{font-size:13px;}
/*! CSS Used from: Embedded */
#fsl{margin-left:30px;}
#fsr{margin-right:30px;}
/*! CSS Used from: Embedded */
.b0KoTc{color:rgba(0,0,0,.54);padding-left:27px;}
.Q8LRLc{font-size:15px;}
.b0KoTc{margin-left:30px;text-align:left;}
.b2hzT{border-bottom:1px solid #e4e4e4;}
/*! CSS Used from: Embedded */
.gb_va{display:none!important;}
.gb_A .gb_B:hover,.gb_A .gb_B:focus{opacity:.85;}
/*! CSS Used keyframes */
@-webkit-keyframes gb__a{0%{opacity:0;}50%{opacity:1;}}
@keyframes gb__a{0%{opacity:0;}50%{opacity:1;}}
@-webkit-keyframes gb__a{0%{opacity:0;}50%{opacity:1;}}
@keyframes gb__a{0%{opacity:0;}50%{opacity:1;}}


案B-X.JavaScriptで抽出を行い、console.logですぐに表示する

 閲覧数:81 投稿日:2019-10-13 更新日:2019-10-13 

class名


document.querySelectorAll('[class]').forEach(e=>console.log(e.className));
hp vasq big
ctr-p
gb_Tf
gb_Ka gb_Bg gb_g gb_Ag gb_Eg gb_Tf
gb_ce gb_g gb_Bg gb_sg
gb_f gb_g
gb_e
gb_f gb_g
gb_e
gb_Zc gb_Bg gb_g
gb_A gb_hd gb_g
gb_Lf
gb_B gb_sc
gb_Ra
gb_Qa
gb_mg gb_g
gb_Lf
gb_de gb_1 gb_pb
gb_Ra
gb_Qa
jhp big
sfbg nojsv
sfbgg
tsf nj
A8SBwf
RNNXgb
SDkEP
iblpc
uFMOof
nS8rZ z1asCe MZy1Rb
a4bIc
vdLsw gsfi
gLFyf gsfi
dRYYxd
JC0tCe
hb2Smf
UUbT9
RjPuVb
aajZCb
xtSCL
erkvQe
sbct
suggestions-inner-container
sbic
sbtc
sbl1
sbab
sbai
VlcLAe
gNO89b
RNmpXc
JUypV
y yp
duf3 aciXEb
FPdoLc VlcLAe
gNO89b
RNmpXc
spch-dlg
spch s2fp-h
close-button
spchc
inner-container
button-container
r8s4j
button
microphone
receiver
wrapper
stem
shell
text-container
2spcht
google-logo
permission-bar
permission-bar-gradient
content
2ctr-p
EvHmz hRvfYe
fbar
b2hzT
b0KoTc
Q8LRLc
7Fx4vi
gb_va
csi


id名


document.querySelectorAll('[id]').forEach(e=>console.log(e.id));
gsr
gstyle
viewport
doc-info
cst
gb
gbw
gbwa
gb_70
searchform
tsf
tophf
sbt
duf3-46
sbfblt
spch-dlg
spch
spchx
spchc
spchl
spchb
spchi
spchf
main
body
lga
hplogo
prm-pt
swml
footer
fbarcnt
footcnt
fbar
fsr
fsettl
fsett
dk2qOd
fsl
footc
xfoot
lb


案B-Y.JavaScriptで抽出を行い変数へ格納後、console.logで表示する

 閲覧数:92 投稿日:2019-10-13 更新日:2019-10-13 

class名


const classList = Array.prototype.reduce.call(document.querySelectorAll('[class]'), (classList, element) => (Array.prototype.push.apply(classList, element.classList), classList), []);
//console.log(classList);
console.log(JSON.stringify(classList,null,'\t'));
[
"hp",
"vasq",
"big",
"ctr-p",
"gb_Tf",
"gb_Ka",
"gb_Bg",
"gb_g",
"gb_Ag",
"gb_Eg",
"gb_Tf",
"gb_ce",
"gb_g",
"gb_Bg",
"gb_sg",
"gb_f",
"gb_g",
"gb_e",
"gb_f",
"gb_g",
"gb_e",
"gb_Zc",
"gb_Bg",
"gb_g",
"gb_A",
"gb_hd",
"gb_g",
"gb_Lf",
"gb_B",
"gb_sc",
"gb_Ra",
"gb_Qa",
"gb_mg",
"gb_g",
"gb_Lf",
"gb_de",
"gb_1",
"gb_pb",
"gb_Ra",
"gb_Qa",
"jhp",
"big",
"sfbg",
"nojsv",
"sfbgg",
"tsf",
"nj",
"A8SBwf",
"RNNXgb",
"SDkEP",
"iblpc",
"uFMOof",
"nS8rZ",
"z1asCe",
"MZy1Rb",
"a4bIc",
"vdLsw",
"gsfi",
"gLFyf",
"gsfi",
"dRYYxd",
"JC0tCe",
"hb2Smf",
"UUbT9",
"RjPuVb",
"aajZCb",
"xtSCL",
"erkvQe",
"sbct",
"suggestions-inner-container",
"sbic",
"sbtc",
"sbl1",
"sbab",
"sbai",
"VlcLAe",
"gNO89b",
"RNmpXc",
"JUypV",
"y",
"yp",
"duf3",
"aciXEb",
"FPdoLc",
"VlcLAe",
"gNO89b",
"RNmpXc",
"spch-dlg",
"spch",
"s2fp-h",
"close-button",
"spchc",
"inner-container",
"button-container",
"r8s4j",
"button",
"microphone",
"receiver",
"wrapper",
"stem",
"shell",
"text-container",
"spcht",
"spcht",
"google-logo",
"permission-bar",
"permission-bar-gradient",
"content",
"ctr-p",
"ctr-p",
"EvHmz",
"hRvfYe",
"fbar",
"b2hzT",
"b0KoTc",
"Q8LRLc",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"gb_va",
"csi"
]


id名


const idList = Array.prototype.map.call(document.querySelectorAll('[id]'), element => element.id);
console.log(idList);
(41) ["gsr", "gstyle", "viewport", "doc-info", "cst", "gb", "gbw", "gbwa", "gb_70", "searchform", "tsf", "tophf", "sbt", "duf3-46", "sbfblt", "spch-dlg", "spch", "spchx", "spchc", "spchl", "spchb", "spchi", "spchf", "main", "body", "lga", "hplogo", "prm-pt", "swml", "footer", "fbarcnt", "footcnt", "fbar", "fsr", "fsettl", "fsett", "dk2qOd", "fsl", "footc", "xfoot", "lb"]



連想配列をコンソールで深い階層の中身も全部表示する


プロジェクト別CSSリファクタ履歴

CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する



類似度ページランキング
順位 ページタイトル抜粋
1 rssページが正しく表示されない/Google Chrome 46
2 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 46
3 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 44
4 「Google Chrome」のリリースノート(更新履歴)は公開されている 42
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 39
6 Chrome でキャッシュを効かさない 38
7 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 38
8 Illustrator CS2 でファイル名に「更新済み」を追加しない 37
9 「Fireworks」後継として、「Gravit Designer」を使用していくことを決定  37
10 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 37
11 指定兄弟要素(h1~h5タグ何れか)のmarginを取得して、指定要素に適用させたい 37
12 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 37
13 Chrome ブラウザで画像の DataURI を取得 36
14 CSS 「id」「class」名 に関する調査履歴 1 36
15 URLが折り返し表示されない/Google Chrome 36
16 名前付き色(Named Colors) の仕様 35
17 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 35
18 「PhotoShop CS3」 と、「Vieas」 の違い 35
19 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 35
20 キャッシュを待機しています →「chrome://net-internals/#dns」→「Clear host cache」ボタンクリック 35
2021/8/06 1:57 更新
週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新