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

CSS

目次一覧

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

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

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

 閲覧数:260 投稿日: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 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 37
9 Illustrator CS2 でファイル名に「更新済み」を追加しない 37
10 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 37
11 指定兄弟要素(h1~h5タグ何れか)のmarginを取得して、指定要素に適用させたい 37
12 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 37
13 「ジョジョ顔メーカー1.1」を「Windows 10」で動作させるためには? 36
14 Chrome ブラウザで画像の DataURI を取得 36
15 CSS 「id」「class」名 に関する調査履歴 1 36
16 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 36
17 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 36
18 URLが折り返し表示されない/Google Chrome 36
19 名前付き色(Named Colors) の仕様 35
20 「Chrome拡張機能」開発中に遭遇したエラー 35
2022/11/28 23:24 更新
週間人気ページランキング / 11-21 → 11-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 57
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 28
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 28
3 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
5 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 12
6 RGBの種類 / ビットカラー | RGB(色) 11
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 11
6 Design 0 11
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 10
8 16進数カラーコード / 2進数 9
8 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 9
8 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 9
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 9
9 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
10 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 7
10 「bgcolor」「background-color」「background」の違い | CSS 7
10 textareaを手動リサイズできない時は、ブラウザを落としてみる | Google Chrome(ブラウザ) 7
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
10 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
2022/11/28 1:01 更新