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

CSS

目次一覧

 状態:試行錯誤履歴  閲覧数:1,658  投稿日: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」を使用

 閲覧数:430 投稿日: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ですぐに表示する

 閲覧数:412 投稿日: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で表示する

 閲覧数:428 投稿日: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 ページで使用されている「id名」「class名」をChromeで取得したい   85
2 rssページが正しく表示されない/Google Chrome 46
3 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 46
4 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 44
5 「Google Chrome」のリリースノート(更新履歴)は公開されている 42
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 39
7 Chrome でキャッシュを効かさない 38
8 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 38
9 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 37
10 Illustrator CS2 でファイル名に「更新済み」を追加しない 37
11 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 37
12 指定兄弟要素(h1~h5タグ何れか)のmarginを取得して、指定要素に適用させたい 37
13 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 37
14 CSS 「id」「class」名 に関する調査履歴 1 36
15 Chrome ブラウザで画像の DataURI を取得 36
16 「ジョジョ顔メーカー1.1」を「Windows 10」で動作させるためには? 36
17 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 36
18 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 36
19 URLが折り返し表示されない/Google Chrome 36
20 名前付き色(Named Colors) の仕様 35
2024/11/22 22:05 更新
週間人気ページランキング / 11-15 → 11-21
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 12
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 10
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
3 Design 0 6
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
5 RGB ⇔ Lab | 色変換(色) 4
5 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 4
5 16進数カラーコード / 2進数 4
6 カラーコード / 色コード | カラーコード(色) 3
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 3
6 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ XYZ / CIE RGB / sRGB(D65) / sRGB(C) / Adobe RGB / NTSC RGB 2
7 RGBの種類 / ビットカラー | RGB(色) 2
7 8ビットカラー / インデックスカラー / パレットカラー 2
7 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
2024/11/22 1:01 更新