3@TECH BLOG

日々の業務で得た知見やノウハウ、技術情報などを発信します。

reset.css + base.css

ブラウザ間の表示差異をなくすリセットCSSです。 独自の要素も含んでいます。

CSS
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    word-break: normal;
    -moz-tab-size: 4;
    tab-size: 4
}
*, :after, :before {
    background-repeat: no-repeat;
    box-sizing: inherit
}
:after, :before {
    text-decoration: inherit;
    vertical-align: inherit
}
* {
    padding: 0;
    margin: 0
}
hr {
    overflow: visible;
    height: 0;
    color: inherit
}
details, main {display: block}
summary {display: list-item}
small {font-size: 80%}
[hidden] {display: none}
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}
a {background-color: transparent}
a:active, a:hover {outline-width: 0}
code, kbd, pre, samp {font-family: monospace, monospace}
pre {font-size: 1em}
b, strong {font-weight: bolder}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}
sub {bottom: -.25em}
sup {top: -.5em}
table {
    border-color: inherit;
    text-indent: 0
}
input {border-radius: 0}
[disabled] {cursor: default}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {height: auto}
[type=search] {-webkit-appearance: textfield; outline-offset: -2px}
[type=search]::-webkit-search-decoration {-webkit-appearance: none}
textarea {overflow: auto; resize: vertical}
button, input, optgroup, select, textarea {font: inherit}
optgroup {font-weight: 700}
button {overflow: visible}
button, select {text-transform: none}
[role=button], [type=button], [type=reset], [type=submit], button {cursor: pointer; color: inherit}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {border-style: none; padding: 0}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {outline: 1px dotted ButtonText}
[type=reset], [type=submit], button, html [type=button] {-webkit-appearance: button}
button, input, select, textarea {background-color: transparent; border-style: none}
a:focus, button:focus, input:focus, select:focus, textarea:focus {outline-width: 0}
select {-moz-appearance: none; -webkit-appearance: none}
select::-ms-expand {display: none}
select::-ms-value {color: currentColor}
legend {
    border: 0;
    color: inherit;
    display: table;
    white-space: normal;
    max-width: 100%
}

::-webkit-file-upload-button {
 -webkit-appearance: button;
 color: inherit;
 font: inherit
}
img {border-style: none}
progress {vertical-align: baseline}
[aria-busy=true] {cursor: progress}
[aria-controls] {cursor: pointer}
[aria-disabled=true] {cursor: default}
.sunflex {display: flex; flex-wrap: wrap}
.sunflex.inline {display: inline-flex}
.sunflex.reverse {flex-direction: row-reverse; justify-content: flex-end}
.sunflex.reverse.left {justify-content: flex-end}
.sunflex.reverse.right {justify-content: flex-start}
.sunflex.between {justify-content: space-between}
.sunflex.around {justify-content: space-around}
.sunflex.center {justify-content: center}
.sunflex.left {justify-content: flex-start}
.sunflex.right {justify-content: flex-end}
.sunflex.top {align-items: flex-start}
.sunflex.top.stretch {align-items: stretch}
.sunflex.top.stretch>* {display: flex; align-items: flex-start}
.sunflex.middle {align-items: center}
.sunflex.middle.stretch {align-items: stretch}
.sunflex.middle.stretch>* {display: flex; align-items: center}
.sunflex.bottom {align-items: flex-end}
.sunflex.bottom.stretch {align-items: stretch}
.sunflex.bottom.stretch>* {display: flex;align-items: flex-end}
.sunflex.contentTop {align-content: flex-start}
.sunflex.contentMiddle {align-content: center}
.sunflex.contentBottom {align-content: flex-end}
.sunflex.contentStrech {align-content: stretch}
.sunflex.contentBetween {align-content: space-between}
.sunflex.contentAround {align-content: space-around}
.sunflex>.top:not(.sunflex) {align-self: flex-start}
.sunflex>.middle:not(.sunflex) {align-self: center}
.sunflex>.bottom:not(.sunflex) {align-self: flex-end}
.sunflex *[class^="col-"]>*, .sunflex *[class^="size-"]>*, .sunflex *[class^="mono-"]>* {height: 100%}
.row {margin-right: -1.5%; margin-left: -1.5%}
.row:not(.flex):after {
    content: "";
    display: block;
    clear: both
}
.row+.row {margin-top: 1em}
.row *[class^="col-"], .row *[class^="size-"], .row *[class^="mono-"] {
    position: relative;
    min-height: 1px;
    padding-right: 1.5%;
    padding-left: 1.5%
}
.size-xs-05 {width: 5%}
.size-xs-10 {width: 10%}
.size-xs-15 {width: 15%}
.size-xs-20 {width: 20%}
.size-xs-25 {width: 25%}
.size-xs-30 {width: 30%}
.size-xs-35 {width: 35%}
.size-xs-40 {width: 40%}
.size-xs-45 {width: 45%}
.size-xs-50 {width: 50%}
.size-xs-55 {width: 55%}
.size-xs-60 {width: 60%}
.size-xs-65 {width: 65%}
.size-xs-70 {width: 70%}
.size-xs-75 {width: 75%}
.size-xs-80 {width: 80%}
.size-xs-85 {width: 85%}
.size-xs-90 {width: 90%}
.size-xs-95 {width: 95%}
.size-xs-100 {width: 100%}

@media print, screen and (min-width: 768px) {
.size-sm-05 {width: 5%}
.size-sm-10 {width: 10%}
.size-sm-15 {width: 15%}
.size-sm-20 {width: 20%}
.size-sm-25 {width: 25%}
.size-sm-30 {width: 30%}
.size-sm-35 {width: 35%}
.size-sm-40 {width: 40%}
.size-sm-45 {width: 45%}
.size-sm-50 {width: 50%}
.size-sm-55 {width: 55%}
.size-sm-60 {width: 60%}
.size-sm-65 {width: 65%}
.size-sm-70 {width: 70%}
.size-sm-75 {width: 75%}
.size-sm-80 {width: 80%}
.size-sm-85 {width: 85%}
.size-sm-90 {width: 90%}
.size-sm-95 {width: 95%}
.size-sm-100 {width: 100%}
}

@media screen and (min-width: 992px) {
.size-md-05 {width: 5%}
.size-md-10 {width: 10%}
.size-md-15 {width: 15%}
.size-md-20 {width: 20%}
.size-md-25 {width: 25%}
.size-md-30 {width: 30%}
.size-md-35 {width: 35%}
.size-md-40 {width: 40%}
.size-md-45 {width: 45%}
.size-md-50 {width: 50%}
.size-md-55 {width: 55%}
.size-md-60 {width: 60%}
.size-md-65 {width: 65%}
.size-md-70 {width: 70%}
.size-md-75 {width: 75%}
.size-md-80 {width: 80%}
.size-md-85 {width: 85%}
.size-md-90 {width: 90%}
.size-md-95 {width: 95%}
.size-md-100 {width: 100%}
}

@media screen and (min-width: 1200px) {
.size-lg-05 {width: 5%}
.size-lg-10 {width: 10%}
.size-lg-15 {width: 15%}
.size-lg-20 {width: 20%}
.size-lg-25 {width: 25%}
.size-lg-30 {width: 30%}
.size-lg-35 {width: 35%}
.size-lg-40 {width: 40%}
.size-lg-45 {width: 45%}
.size-lg-50 {width: 50%}
.size-lg-55 {width: 55%}
.size-lg-60 {width: 60%}
.size-lg-65 {width: 65%}
.size-lg-70 {width: 70%}
.size-lg-75 {width: 75%}
.size-lg-80 {width: 80%}
.size-lg-85 {width: 85%}
.size-lg-90 {width: 90%}
.size-lg-95 {width: 95%}
.size-lg-100 {width: 100%}
}
.col-xs-12 {width: 100%}
.col-xs-11 {width: 91.66667%}
.col-xs-10 {width: 83.33333%}
.col-xs-9 {width: 75%}
.col-xs-8 {width: 66.66667%}
.col-xs-7 {width: 58.33333%}
.col-xs-6 {width: 50%}
.col-xs-5 {width: 41.66667%}
.col-xs-4 {width: 33.33333%}
.col-xs-3 {width: 25%}
.col-xs-2 {width: 16.66667%}
.col-xs-1 {width: 8.33333%}
.mono-xs-5 {width: 20%}
.mono-xs-7 {width: 14.28571%}
.mono-xs-8 {width: 12.5%}
.mono-xs-9 {width: 11.11111%}
.mono-xs-10 {width: 10%}
.mono-xs-11 {width: 9.09091%}

@media print, screen and (min-width: 768px) {
.col-sm-12 {width: 100%}
.col-sm-11 {width: 91.66667%}
.col-sm-10 {width: 83.33333%}
.col-sm-9 {width: 75%}
.col-sm-8 {width: 66.66667%}
.col-sm-7 {width: 58.33333%}
.col-sm-6 {width: 50%}
.col-sm-5 {width: 41.66667%}
.col-sm-4 {width: 33.33333%}
.col-sm-3 {width: 25%}
.col-sm-2 {width: 16.66667%}
.col-sm-1 {width: 8.33333%}
.mono-sm-5 {width: 20%}
.mono-sm-7 {width: 14.28571%}
.mono-sm-8 {width: 12.5%}
.mono-sm-9 {width: 11.11111%}
.mono-sm-10 {width: 10%}
.mono-sm-11 {width: 9.09091%}
}

@media screen and (min-width: 992px) {
.col-md-12 {width: 100%}
.col-md-11 {width: 91.66667%}
.col-md-10 {width: 83.33333%}
.col-md-9 {width: 75%}
.col-md-8 {width: 66.66667%}
.col-md-7 {width: 58.33333%}
.col-md-6 {width: 50%}
.col-md-5 {width: 41.66667%}
.col-md-4 {width: 33.33333%}
.col-md-3 {width: 25%}
.col-md-2 {width: 16.66667%}
.col-md-1 {width: 8.33333%}
.mono-md-5 {width: 20%}
.mono-md-7 {width: 14.28571%}
.mono-md-8 {width: 12.5%}
.mono-md-9 {width: 11.11111%}
.mono-md-10 {width: 10%}
.mono-md-11 {width: 9.09091%}
}

@media screen and (min-width: 1200px) {
.col-lg-12 {width: 100%}
.col-lg-11 {width: 91.66667%}
.col-lg-10 {width: 83.33333%}
.col-lg-9 {width: 75%}
.col-lg-8 {width: 66.66667%}
.col-lg-7 {width: 58.33333%}
.col-lg-6 {width: 50%}
.col-lg-5 {width: 41.66667%}
.col-lg-4 {width: 33.33333%}
.col-lg-3 {width: 25%}
.col-lg-2 {width: 16.66667%}
.col-lg-1 {width: 8.33333%}
.mono-lg-5 {width: 20%}
.mono-lg-7 {width: 14.28571%}
.mono-lg-8 {width: 12.5%}
.mono-lg-9 {width: 11.11111%}
.mono-lg-10 {width: 10%}
.mono-lg-11 {width: 9.09091%}
}
.row:not(.flex) *[class^="col-xs-"], .row:not(.flex) *[class^="size-xs-"], .row:not(.flex) *[class^="mono-xs-"] {float: left}
.row:not(.flex).reverse *[class^="col-xs-"], .row:not(.flex).reverse *[class^="size-xs-"], .row:not(.flex).reverse *[class^="mono-xs-"] {float: right}
.row.flex {display: flex; flex-wrap: wrap}
.row.flex.reverse {flex-direction: row-reverse}

@media print, screen and (min-width: 768px) {
.row:not(.flex) *[class^="col-sm-"],  .row:not(.flex) *[class^="size-sm-"],  .row:not(.flex) *[class^="mono-sm-"] {float: left}
.row:not(.flex).reverse *[class^="col-sm-"],  .row:not(.flex).reverse *[class^="size-sm-"],  .row:not(.flex).reverse *[class^="mono-sm-"] {float: right}
}

@media screen and (min-width: 992px) {
.row:not(.flex) *[class^="col-md-"],  .row:not(.flex) *[class^="size-md-"],  .row:not(.flex) *[class^="mono-md-"] {float: left}
.row:not(.flex).reverse *[class^="col-md-"],  .row:not(.flex).reverse *[class^="size-md-"],  .row:not(.flex).reverse *[class^="mono-md-"] {float: right}
}

@media screen and (min-width: 1200px) {
.row:not(.flex) *[class^="col-lg-"],  .row:not(.flex) *[class^="size-lg-"],  .row:not(.flex) *[class^="mono-lg-"] {float: left}
.row:not(.flex).reverse *[class^="col-lg-"],  .row:not(.flex).reverse *[class^="size-lg-"],  .row:not(.flex).reverse *[class^="mono-lg-"] {float: right}
}
.col-xs-offset-12 {margin-left: 100%}
.col-xs-offset-11 {margin-left: 91.66667%}
.col-xs-offset-10 {margin-left: 83.33333%}
.col-xs-offset-9 {margin-left: 75%}
.col-xs-offset-8 {margin-left: 66.66667%}
.col-xs-offset-7 {margin-left: 58.33333%}
.col-xs-offset-6 {margin-left: 50%}
.col-xs-offset-5 {margin-left: 41.66667%}
.col-xs-offset-4 {margin-left: 33.33333%}
.col-xs-offset-3 {margin-left: 25%}
.col-xs-offset-2 {margin-left: 16.66667%}
.col-xs-offset-1 {margin-left: 8.33333%}
.col-xs-offset-0 {margin-left: 0}

@media print, screen and (min-width: 768px) {
.col-sm-offset-12 {margin-left: 100%}
.col-sm-offset-11 {margin-left: 91.66667%}
.col-sm-offset-10 {margin-left: 83.33333%}
.col-sm-offset-9 {margin-left: 75%}
.col-sm-offset-8 {margin-left: 66.66667%}
.col-sm-offset-7 {margin-left: 58.33333%}
.col-sm-offset-6 {margin-left: 50%}
.col-sm-offset-5 {margin-left: 41.66667%}
.col-sm-offset-4 {margin-left: 33.33333%}
.col-sm-offset-3 {margin-left: 25%}
.col-sm-offset-2 {margin-left: 16.66667%}
.col-sm-offset-1 {margin-left: 8.33333%}
.col-sm-offset-0 {margin-left: 0}
}

@media screen and (min-width: 992px) {
.col-md-offset-12 {margin-left: 100%}
.col-md-offset-11 {margin-left: 91.66667%}
.col-md-offset-10 {margin-left: 83.33333%}
.col-md-offset-9 {margin-left: 75%}
.col-md-offset-8 {margin-left: 66.66667%}
.col-md-offset-7 {margin-left: 58.33333%}
.col-md-offset-6 {margin-left: 50%}
.col-md-offset-5 {margin-left: 41.66667%}
.col-md-offset-4 {margin-left: 33.33333%}
.col-md-offset-3 {margin-left: 25%}
.col-md-offset-2 {margin-left: 16.66667%}
.col-md-offset-1 {margin-left: 8.33333%}
.col-md-offset-0 {margin-left: 0}
}

@media screen and (min-width: 1200px) {
.col-lg-offset-12 {margin-left: 100%}
.col-lg-offset-11 {margin-left: 91.66667%}
.col-lg-offset-10 {margin-left: 83.33333%}
.col-lg-offset-9 {margin-left: 75%}
.col-lg-offset-8 {margin-left: 66.66667%}
.col-lg-offset-7 {margin-left: 58.33333%}
.col-lg-offset-6 {margin-left: 50%}
.col-lg-offset-5 {margin-left: 41.66667%}
.col-lg-offset-4 {margin-left: 33.33333%}
.col-lg-offset-3 {margin-left: 25%}
.col-lg-offset-2 {margin-left: 16.66667%}
.col-lg-offset-1 {margin-left: 8.33333%}
.col-lg-offset-0 {margin-left: 0}
}
.col-xs-pull-12 {right: 100%}
.col-xs-pull-11 {right: 91.66667%}
.col-xs-pull-10 {right: 83.33333%}
.col-xs-pull-9 {right: 75%}
.col-xs-pull-8 {right: 66.66667%}
.col-xs-pull-7 {right: 58.33333%}
.col-xs-pull-6 {right: 50%}
.col-xs-pull-5 {right: 41.66667%}
.col-xs-pull-4 {right: 33.33333%}
.col-xs-pull-3 {right: 25%}
.col-xs-pull-2 {right: 16.66667%}
.col-xs-pull-1 {right: 8.33333%}
.col-xs-pull-0 {right: auto}

@media print, screen and (min-width: 768px) {
.col-sm-pull-12 {right: 100%}
.col-sm-pull-11 {right: 91.66667%}
.col-sm-pull-10 {right: 83.33333%}
.col-sm-pull-9 {right: 75%}
.col-sm-pull-8 {right: 66.66667%}
.col-sm-pull-7 {right: 58.33333%}
.col-sm-pull-6 {right: 50%}
.col-sm-pull-5 {right: 41.66667%}
.col-sm-pull-4 {right: 33.33333%}
.col-sm-pull-3 {right: 25%}
.col-sm-pull-2 {right: 16.66667%}
.col-sm-pull-1 {right: 8.33333%}
.col-sm-pull-0 {right: auto}
}

@media screen and (min-width: 992px) {
.col-md-pull-12 {right: 100%}
.col-md-pull-11 {right: 91.66667%}
.col-md-pull-10 {right: 83.33333%}
.col-md-pull-9 {right: 75%}
.col-md-pull-8 {right: 66.66667%}
.col-md-pull-7 {right: 58.33333%}
.col-md-pull-6 {right: 50%}
.col-md-pull-5 {right: 41.66667%}
.col-md-pull-4 {right: 33.33333%}
.col-md-pull-3 {right: 25%}
.col-md-pull-2 {right: 16.66667%}
.col-md-pull-1 {right: 8.33333%}
.col-md-pull-0 {right: auto}
}

@media screen and (min-width: 1200px) {
.col-lg-pull-12 {right: 100%}
.col-lg-pull-11 {right: 91.66667%}
.col-lg-pull-10 {right: 83.33333%}
.col-lg-pull-9 {right: 75%}
.col-lg-pull-8 {right: 66.66667%}
.col-lg-pull-7 {right: 58.33333%}
.col-lg-pull-6 {right: 50%}
.col-lg-pull-5 {right: 41.66667%}
.col-lg-pull-4 {right: 33.33333%}
.col-lg-pull-3 {right: 25%}
.col-lg-pull-2 {right: 16.66667%}
.col-lg-pull-1 {right: 8.33333%}
.col-lg-pull-0 {right: auto}
}
.col-xs-push-12 {left: 100%}
.col-xs-push-11 {left: 91.66667%}
.col-xs-push-10 {left: 83.33333%}
.col-xs-push-9 {left: 75%}
.col-xs-push-8 {left: 66.66667%}
.col-xs-push-7 {left: 58.33333%}
.col-xs-push-6 {left: 50%}
.col-xs-push-5 {left: 41.66667%}
.col-xs-push-4 {left: 33.33333%}
.col-xs-push-3 {left: 25%}
.col-xs-push-2 {left: 16.66667%}
.col-xs-push-1 {left: 8.33333%}
.col-xs-push-0 {left: auto}

@media print, screen and (min-width: 768px) {
.col-sm-push-12 {left: 100%}
.col-sm-push-11 {left: 91.66667%}
.col-sm-push-10 {left: 83.33333%}
.col-sm-push-9 {left: 75%}
.col-sm-push-8 {left: 66.66667%}
.col-sm-push-7 {left: 58.33333%}
.col-sm-push-6 {left: 50%}
.col-sm-push-5 {left: 41.66667%}
.col-sm-push-4 {left: 33.33333%}
.col-sm-push-3 {left: 25%}
.col-sm-push-2 {left: 16.66667%}
.col-sm-push-1 {left: 8.33333%}
.col-sm-push-0 {left: auto}
}

@media screen and (min-width: 992px) {
.col-md-push-12 {left: 100%}
.col-md-push-11 {left: 91.66667%}
.col-md-push-10 {left: 83.33333%}
.col-md-push-9 {left: 75%}
.col-md-push-8 {left: 66.66667%}
.col-md-push-7 {left: 58.33333%}
.col-md-push-6 {left: 50%}
.col-md-push-5 {left: 41.66667%}
.col-md-push-4 {left: 33.33333%}
.col-md-push-3 {left: 25%}
.col-md-push-2 {left: 16.66667%}
.col-md-push-1 {left: 8.33333%}
.col-md-push-0 {left: auto}
}

@media screen and (min-width: 1200px) {
.col-lg-push-12 {left: 100%}
.col-lg-push-11 {left: 91.66667%}
.col-lg-push-10 {left: 83.33333%}
.col-lg-push-9 {left: 75%}
.col-lg-push-8 {left: 66.66667%}
.col-lg-push-7 {left: 58.33333%}
.col-lg-push-6 {left: 50%}
.col-lg-push-5 {left: 41.66667%}
.col-lg-push-4 {left: 33.33333%}
.col-lg-push-3 {left: 25%}
.col-lg-push-2 {left: 16.66667%}
.col-lg-push-1 {left: 8.33333%}
.col-lg-push-0 {left: auto}
}

Contact お問い合わせ

お気軽にお問い合わせください。

PageTop