개요

makuake의 프로젝트에서 리턴의 종류가 많으면 비교하는 것이 어렵습니다.
그런 이유로, 일람화해 보기 쉽게 했습니다.

환경

google chrome + css/js 덮어 쓰기 플러그인
덮어쓰기 플러그인은 User JavaScript and CSS 을 사용했습니다.

구현

makuake.com의 페이지에 다음 CSS 및 js를 적용합니다.

css

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;
}

js

(window.onload = function() {
    var el = document.getElementById("return");
    el.style.whiteSpace = 'nowrap';
});

결과

HD 화면


4K 화면

포엠

조기 나누기라든지 품절이라든지 파악하는 것도 한 번 수고로, 좀 더 어떻게든 까닭인지 생각하고 만들었습니다.
일단 실수로 옵션이 부족한 녀석을 사버린 적도 있습니다 orz

공식적으로 이러한 표시를 시키는 버튼이 실장되면 좋다