BLOG

忘却録

WEBに関するコーディング、プログラミングなど私的な忘却録として投稿していきます。また、参考サイトも併せて紹介していきます。

スタイルシートをつくる①index.scss/contents.scss/_module.scss

2019.02.07

スタイルシートになります。基本的にはこの3つのスタイルシートを使い分けてコーディングを進めていきます。

index.scss（トップページのみに適用）

@charset "UTF-8";
@import "compass";
@import "setting";
$experimental-support-for-mozilla: true !default;
$experimental-support-for-webkit: true !default;
$experimental-support-for-opera: true !default;
$experimental-support-for-microsoft: true !default;

/**************************** setting end */

contents.scss（中面ページのみに適用）

@charset "UTF-8";
@import "compass";
@import "setting";
$experimental-support-for-mozilla: true !default;
$experimental-support-for-webkit: true !default;
$experimental-support-for-opera: true !default;
$experimental-support-for-microsoft: true !default;

/**************************** setting end */

_module.scss（全ページに適用。共通・汎用性のあるクラスを記述）

//mojule
/*default_comp*/

.center {
text-align: center !important;
}

.left {
text-align: left !important;
}

.right {
text-align: right !important;
}

.top0 {
margin-top: 0 !important;
}

.top5 {
margin-top: myFuncRem(5) !important;
}

.top10 {
margin-top: myFuncRem(10) !important;
}

.top15 {
margin-top: myFuncRem(15) !important;
}

.top20 {
margin-top: myFuncRem(20) !important;
}

.top25 {
margin-top: myFuncRem(25) !important;
}

.top30 {
margin-top: myFuncRem(30) !important;
}

.top35 {
margin-top: myFuncRem(35) !important;
}

.top40 {
margin-top: myFuncRem(40) !important;
}

.btm0 {
margin-bottom: 0 !important;
}

.btm5 {
margin-bottom: myFuncRem(5) !important;
}

.btm10 {
margin-bottom: myFuncRem(10) !important;
}

.btm15 {
margin-bottom: myFuncRem(15) !important;
}

.btm20 {
margin-bottom: myFuncRem(20) !important;
}

.btm25 {
margin-bottom: myFuncRem(25) !important;
}

.btm30 {
margin-bottom: myFuncRem(30) !important;
}

.btm35 {
margin-bottom: myFuncRem(35) !important;
}

.btm40 {
margin-bottom: myFuncRem(40) !important;
}

.btm45 {
margin-bottom: myFuncRem(45) !important;
}

.btm50 {
margin-bottom: myFuncRem(50) !important;
}

.btm55 {
margin-bottom: myFuncRem(55) !important;
}

.btm60 {
margin-bottom: myFuncRem(60) !important;
}

.btm65 {
margin-bottom: myFuncRem(65) !important;
}

.btm70 {
margin-bottom: myFuncRem(70) !important;
}

.btm75 {
margin-bottom: myFuncRem(75) !important;
}

.btm80 {
margin-bottom: myFuncRem(80) !important;
}

.btm85 {
margin-bottom: myFuncRem(85) !important;
}

.btm90 {
margin-bottom: myFuncRem(90) !important;
}

.btm95 {
margin-bottom: myFuncRem(95) !important;
}

.pT0 {
padding-top: 0 !important;
}

.pT5 {
padding-top: myFuncRem(5) !important;
}

.pT10 {
padding-top: myFuncRem(10) !important;
}

.pT15 {
padding-top: myFuncRem(15) !important;
}

.pT20 {
padding-top: myFuncRem(20) !important;
}

.pT25 {
padding-top: myFuncRem(25) !important;
}

.pT30 {
padding-top: myFuncRem(30) !important;
}

.pT35 {
padding-top: myFuncRem(35) !important;
}

.pT40 {
padding-top: myFuncRem(40) !important;
}

.pT45 {
padding-top: myFuncRem(45) !important;
}

.pT80 {
padding-top: myFuncRem(80) !important;
}

.pT90 {
padding-top: myFuncRem(90) !important;
}

.pT100 {
padding-top: myFuncRem(100) !important;
}

.pB0 {
padding-bottom: 0 !important;
}

.pB5 {
padding-bottom: myFuncRem(5) !important;
}

.pB10 {
padding-bottom: myFuncRem(10) !important;
}

.pB15 {
padding-bottom: myFuncRem(15) !important;
}

.pB20 {
padding-bottom: myFuncRem(20) !important;
}

.pL10 {
padding-left: myFuncRem(10) !important;
}

.lm5 {
margin-left: myFuncRem(5) !important;
}

.lm10 {
margin-left: myFuncRem(10) !important;
}

.lm15 {
margin-left: myFuncRem(15) !important;
}

.lm20 {
margin-left: myFuncRem(20) !important;
}

.lm50 {
margin-left: myFuncRem(50) !important;
}

.lm60 {
margin-left: myFuncRem(60) !important;
}

.lm70 {
margin-left: myFuncRem(70) !important;
}

.rm5 {
margin-right: myFuncRem(5) !important;
}

.rm10 {
margin-right: myFuncRem(10) !important;
}

.rm15 {
margin-right: myFuncRem(15) !important;
}

.rm20 {
margin-right: myFuncRem(20) !important;
}

.vAT {
vertical-align: top !important;
}

.vAM {
vertical-align: middle !important;
}

.vAB {
vertical-align: bottom !important;
}

.size10 {
font-size: 57% !important;
line-height: 1.3 !important;
}

.size11 {
font-size: 65% !important;
line-height: 1.3 !important;
}

.size12 {
font-size: 70% !important;
line-height: 1.3 !important;
}

.size13 {
font-size: 77% !important;
line-height: 1.3 !important;
}

.size14 {
font-size: 85% !important;
}

.size15 {
font-size: 93% !important;
}

.size16 {
font-size: 100% !important;
}

.size17 {
font-size: 116% !important;
}

.size18 {
font-size: 123.1% !important;
}

.size19 {
font-size: 131% !important;
}

.size20 {
font-size: 138.5% !important;
}

.size21 {
font-size: 146.5% !important;
}

.size22 {
font-size: 153.9% !important;
}

.size23 {
font-size: 161.6% !important;
}

.size24 {
font-size: 167% !important;
}

.w10 {
width: 10% !important;
}

.w20 {
width: 20% !important;
}

.w30 {
width: 30% !important;
}

.w40 {
width: 40% !important;
}

.w50 {
width: 50% !important;
}

.w60 {
width: 60% !important;
}

.w70 {
width: 70% !important;
}

.w80 {
width: 80% !important;
}

.w100 {
width: 100% !important;
}

.red {
color: $color--danger !important;
}

.pink {
color: #e3365f !important;
}

.bold {
font-weight: bold;
}

.normal {
font-weight: normal;
}

.icon {
margin-right: myFuncRem(3);
vertical-align: middle;
margin-top: myFuncRem(-1);
}

.f_l {
float: left !important;
}

.f_r {
float: right !important;
}

.mr {
margin-right: myFuncRem(30) !important;
}

.ml {
margin-left: myFuncRem(30) !important;
}

.clearfix:after {
content: ".";
height: 0;
clear: both;
display: block;
font-size: 0.1em;
line-height: 0;
visibility: hidden;
}

.clearfix {
display: inline-block;
min-height: 1%;
clear: both;
}

/* Hides from IE-mac \*/

* html .clearfix {
height: 1%;
}

a {
text-decoration: none;
color: $link_color;
}

a.link01 {
background: url(../image/sub_yajirushi02.gif) no-repeat left myFuncRem(5);
text-decoration: underline;
padding-left: myFuncRem(12);
}

a.link01:hover {
text-decoration: none;
}

@media screen and (max-width: $BreakPoint--md) {
.f_l {
float: none !important;
margin-bottom: myFuncRem(10);
}
.f_r {
float: none !important;
margin-bottom: myFuncRem(10);
}
.mr {
margin-right: 0 !important;
}
.ml {
margin-left: 0 !important;
}
table {
.w10 {
width: 100% !important;
}
.w20 {
width: 100% !important;
}
.w30 {
width: 100% !important;
}
.w40 {
width: 100% !important;
}
.w50 {
width: 100% !important;
}
.w60 {
width: 100% !important;
}
.w70 {
width: 100% !important;
}
.w80 {
width: 100% !important;
}
}
}

ol.num01 {
margin-bottom: myFuncRem(7);
li {
list-style: inside decimal;
text-indent: -1em;
padding-left: 1em;
line-height: 150%;
margin-bottom: myFuncRem(3);
&.last {
margin-bottom: 0;
}
p {
text-indent: 0;
}
}
}

/*num01*/

ul.num01 {
margin-bottom: myFuncRem(7);
li {
list-style: inside disc;
text-indent: -1em;
padding-left: 1em;
line-height: 150%;
margin-bottom: myFuncRem(3);
&.last {
margin-bottom: 0;
}
}
}

ul.num02 {
margin-bottom: myFuncRem(7);
li {
list-style: inside square;
text-indent: -1em;
padding-left: 1em;
line-height: 150%;
margin-bottom: myFuncRem(3);
&.last {
margin-bottom: 0;
}
}
}

ul.num03 {
margin-bottom: myFuncRem(7);
}

ul.num04 {
margin-bottom: 0;
li {
margin-bottom: myFuncRem(3);
&.last {
margin-bottom: 0;
}
}
}

ul.num05 {
margin-bottom: 0px;
li {
margin-bottom: myFuncRem(6);
text-indent: -1em;
padding-left: 1em;
&.last {
margin-bottom: 0;
}
}
}

a.pdf {
&:hover {
text-decoration: underline;
}
&::after {
content: url(/common/image/icon01.png);
padding-left: myFuncRem(5);
}
}

a.exl {
&:hover {
text-decoration: underline;
}
&::after {
content: url(/common/image/icon02.png);
padding-left: myFuncRem(5);
}
}

a.word {
&:hover {
text-decoration: underline;
}
&::after {
content: url(/common/image/icon03.png);
padding-left: myFuncRem(5);
}
}

a.bra {
&::after {
content: url(/common/image/icon04.png);
padding-left: myFuncRem(5);
}
&:hover {
text-decoration: underline;
}
}

.ta01 {
width: 100%;
margin-bottom: myFuncRem(30);
table {
border-left: solid myFuncRem(1) $t_border;
border-top: solid myFuncRem(1) $t_border;
width: 100%;
th,
td {
border-bottom: solid myFuncRem(1) $t_border;
border-right: solid myFuncRem(1) $t_border;
padding: myFuncRem(15);
}
th {
text-align: center;
font-weight: bold;
background: $th_base;
color: $th_color;
}
}
}

.ta02 {
margin-bottom: myFuncRem(30);
table {
border-left: solid myFuncRem(2) $t_border;
border-top: solid myFuncRem(2) $t_border;
width: 100%;
th,
td {
border-bottom: solid myFuncRem(2) $t_border;
border-right: solid myFuncRem(2) $t_border;
padding: myFuncRem(20) myFuncRem(10);
}
td {
//background: $td_base;
color: $wc;
&.nai001 {
background: $wc;
color: $bc;
}
&.nai002 {
background: #0b2a59;
color: $wc;
}
}
th {
text-align: center;
font-weight: bold;
background: $th_base;

&.md04 {
background: $th_md04;
color: $wc;
padding: myFuncRem(9) myFuncRem(10);
}
&.md03 {
background: none;
color: $wc;
}
&.md02 {
background: $th_md02;
color: $wc;
padding: myFuncRem(9) myFuncRem(10);
}
&.md01 {
background: $th_md01;
color: $th_color;
}
}
}
}

.dis001 {
display: none !important;
}

.dis002 {
display: inline !important;
}

.hide {
display: none;
}

@media screen and (max-width: $BreakPoint--md) {
.dis001 {
display: inline !important;
}
.dis002 {
display: none !important;
}
.ta01 table th,
.ta01 table td {
display: block;
width: 100%;
}
.ta01 table th {
padding: myFuncRem(10) myFuncRem(15);
}
.ta02 {
/* overflow-x: scroll;*/
}
.ta02 table {
display: table;
position: relative;
}

.ta02 table thead {
/* display: block;
float: left;*/
}
.ta02 table tbody {
/* display: block;
position: relative;
width: auto;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;*/
&.acc {
white-space: inherit !important;
}
}
.ta01.lon01 {
overflow-x: scroll;
table th,
table td {
display: table-cell;
width: 100%;
}
table {
display: table;
position: relative;
}
thead {
display: block;
float: left;
}
tbody {
display: block;
position: relative;
width: auto;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
&.acc {
white-space: inherit !important;
}
}
}
}

hr.map_link01 {
position: absolute;
top: myFuncRem(-100);
border: none;
font-size: 0;
}

@media screen and (max-width: $BreakPoint--md) {
hr.map_link01 {
position: absolute;
top: myFuncRem(-60);
border: none;
font-size: 0;
}

#sixth_area hr.map_link01 {
position: absolute;
top: myFuncRem(-120);
border: none;
font-size: 0;
}
}

//-------------------------------------comp
//-----------------------contact
input.f001 {
vertical-align: top;
}

input.textFocus {
color: $bg_black01;
}

input.long,
input.wSS,
input.wS,
input.wM,
input.wL,
input.wLL {
background-color: #f2f2f2;
border: myFuncRem(1) solid #ddd; // border:none;
//border-radius: myFuncRem(100);
font-size: myFuncRem(16);
line-height: 140%;
padding: myFuncRem(20) myFuncRem(26);
}

input {
vertical-align: middle;
}

.long {
width: 100%;
}

.wSS {
width: myFuncRem(85);
}

.wS {
width: myFuncRem(170);
}

.wM {
width: myFuncRem(270);
}

.wL {
width: myFuncRem(470);
@include mq_sp {
width: 100%;
}
}

.wLL {
width: myFuncRem(560);
@include mq_sp {
width: 100%;
}
}

.imeOn {
ime-mode: active;
}

.imeOff {
ime-mode: disabled;
@include mq_sp {
me-mode: auto;
}
}

textarea {
background-color: #f2f2f2;
border: myFuncRem(1) solid #ddd;
/*height: myFuncRem(100);*/
padding: myFuncRem(10);
width: 100%;
}

option {
font-size: myFuncRem(14) !important;
}

label {
cursor: pointer;
}

label:hover {
color: #999;
}

input[type="checkbox"],
input[type="radio"] {
margin-right: myFuncRem(3);
}

.formErr {
color: #e54e52;
font-weight: bold;
}

input.inputErr,
textarea.inputErr {
background-color: #fadfde;
}

input:focus,
textarea:focus,
select:focus {
background-color: $wc;
border: myFuncRem(1) solid #ddd;
}

/******************************************** setting end */

 

前のページへ戻る