makuake의 반환을 보다 쉽게 비교할 수 있는 cssHack
4077 단어 CSS
개요
makuake의 프로젝트에서 리턴의 종류가 많으면 비교하는 것이 어렵습니다.
그런 이유로, 일람화해 보기 쉽게 했습니다.
환경
google chrome + css/js 덮어 쓰기 플러그인
덮어쓰기 플러그인은 User JavaScript and CSS 을 사용했습니다.
구현
makuake.com의 페이지에 다음 CSS 및 js를 적용합니다.
cssdiv#return {
/* 表示位置設定 */
position: fixed;
bottom: 0;
left: 0;
z-index: 2147483647;
/* 見た目の微調整 */
border: 3px solid black;
margin: 10px;
padding: 10px;
background-color: gray;
/* 横スクロールできるようにするための設定 */
width : 95vw;
overflow-x: scroll;
/*
white-space: nowrap;
これをcssで指定しておくと、
画面に収まらないところにある画像が読み込まれないので、
javascriptのonloadで指定するようにする
*/
/* white-space: nowrap; */
}
div#return section.return-section {
/* 親要素(div#return) から引き継いでしまうので、normalで上書きする */
white-space: normal;
/* 横に並べる */
display: inline-block;
}
js(window.onload = function() {
var el = document.getElementById("return");
el.style.whiteSpace = 'nowrap';
});
결과
HD 화면
4K 화면
포엠
조기 나누기라든지 품절이라든지 파악하는 것도 한 번 수고로, 좀 더 어떻게든 까닭인지 생각하고 만들었습니다.
일단 실수로 옵션이 부족한 녀석을 사버린 적도 있습니다 orz
공식적으로 이러한 표시를 시키는 버튼이 실장되면 좋다
Reference
이 문제에 관하여(makuake의 반환을 보다 쉽게 비교할 수 있는 cssHack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kumanobori/items/ceb9da67612d3956f7ff
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
google chrome + css/js 덮어 쓰기 플러그인
덮어쓰기 플러그인은 User JavaScript and CSS 을 사용했습니다.
구현
makuake.com의 페이지에 다음 CSS 및 js를 적용합니다.
cssdiv#return {
/* 表示位置設定 */
position: fixed;
bottom: 0;
left: 0;
z-index: 2147483647;
/* 見た目の微調整 */
border: 3px solid black;
margin: 10px;
padding: 10px;
background-color: gray;
/* 横スクロールできるようにするための設定 */
width : 95vw;
overflow-x: scroll;
/*
white-space: nowrap;
これをcssで指定しておくと、
画面に収まらないところにある画像が読み込まれないので、
javascriptのonloadで指定するようにする
*/
/* white-space: nowrap; */
}
div#return section.return-section {
/* 親要素(div#return) から引き継いでしまうので、normalで上書きする */
white-space: normal;
/* 横に並べる */
display: inline-block;
}
js(window.onload = function() {
var el = document.getElementById("return");
el.style.whiteSpace = 'nowrap';
});
결과
HD 화면
4K 화면
포엠
조기 나누기라든지 품절이라든지 파악하는 것도 한 번 수고로, 좀 더 어떻게든 까닭인지 생각하고 만들었습니다.
일단 실수로 옵션이 부족한 녀석을 사버린 적도 있습니다 orz
공식적으로 이러한 표시를 시키는 버튼이 실장되면 좋다
Reference
이 문제에 관하여(makuake의 반환을 보다 쉽게 비교할 수 있는 cssHack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kumanobori/items/ceb9da67612d3956f7ff
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
div#return {
/* 表示位置設定 */
position: fixed;
bottom: 0;
left: 0;
z-index: 2147483647;
/* 見た目の微調整 */
border: 3px solid black;
margin: 10px;
padding: 10px;
background-color: gray;
/* 横スクロールできるようにするための設定 */
width : 95vw;
overflow-x: scroll;
/*
white-space: nowrap;
これをcssで指定しておくと、
画面に収まらないところにある画像が読み込まれないので、
javascriptのonloadで指定するようにする
*/
/* white-space: nowrap; */
}
div#return section.return-section {
/* 親要素(div#return) から引き継いでしまうので、normalで上書きする */
white-space: normal;
/* 横に並べる */
display: inline-block;
}
(window.onload = function() {
var el = document.getElementById("return");
el.style.whiteSpace = 'nowrap';
});
HD 화면
4K 화면
포엠
조기 나누기라든지 품절이라든지 파악하는 것도 한 번 수고로, 좀 더 어떻게든 까닭인지 생각하고 만들었습니다.
일단 실수로 옵션이 부족한 녀석을 사버린 적도 있습니다 orz
공식적으로 이러한 표시를 시키는 버튼이 실장되면 좋다
Reference
이 문제에 관하여(makuake의 반환을 보다 쉽게 비교할 수 있는 cssHack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kumanobori/items/ceb9da67612d3956f7ff
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(makuake의 반환을 보다 쉽게 비교할 수 있는 cssHack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kumanobori/items/ceb9da67612d3956f7ff텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)