BLOG

忘却録

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

スタイルシートをつくる②_setting.scss

2019.03.10

_setting.scssでは基本的なスタイルシートの設定を行う。全ページに共通するもの。

//font
// 言語
$lang: _JA;
// font-face有無
$font_face: true;
// リセットCSS
$resetCSS: _HTML5;
// SP画角比率変化範囲調整値
$mq_sp_rate: 320 / 768;
$range_view_sp: (768 + 1) - (320 + 1);
//Coloring
// ベーステキストカラー
$base_color: #000;
$bc:#000;
$gc:#c12424;
$sc:#777;
$ac:#f0f0f0;
$wc:#fff;
$color--white:#fff;
$color--black:#333;
$color--safety:#2dabd8;
$color--caution:#f1de34;
$color--danger:#ce3838;
//table color
$t_border:#ccc;
$th_color:#000;
$th_base:#eee;
$th_md01:$sc;
$th_md02:#000;
$th_md03:#eee;
$th_md04:#00a99d;
$td_base:#fff;
//option Color
$link_color:$base_color;
$bg_black01:#333;
$bg_black02:#ddd;
$bg_black03:#eee;
$conv_color:$sc;
$face_color:#3a589e;
$sp--touchColor:#e02059;
$select--color:rgba(#00a354, 0.8);
//BreakPoint
$mq_bp_spmin: 320px;
$mq_bp_sp: 1000px;
$mq_bp_pc: 1120px;
$mq_pc: 1120px;
$BreakPoint--xs:640px;
$BreakPoint--sm:750px;
$BreakPoint--md:768px;
$BreakPoint--lg:1050px;
$BreakPoint--xl:1200px;
$move001:1.6s;
$move002:1s;
//Container
$Container--width:96%;
//inner
$inner--Width:$Container--width;
$inner--maxWidth:980px;
//Grid
$grid--Max: 12;
$grid--padded:10px;
$glid--single:(100% / $grid--Max);
//DEBUG MODE

/*font*/

$fo01:"Times New Roman",
"YuMincho",
"Hiragino Mincho ProN",
"MS PMincho",
Meiryo,
serif;
$fo02:'hannari',
YuMincho,
"Hiragino Mincho ProN",
"MS PMincho",
Meiryo,
serif;
$fo03:'chogokubosogothic',
YuGothic,
'Hiragino Kaku Gothic Pro',
'Osaka',
sans-serif;
$fo04:YuMincho,
"Hiragino Mincho ProN",
"MS PMincho",
Meiryo,
serif;
$fo05:'Bebas',
Meiryo,
YuGothic,
'Hiragino Kaku Gothic Pro',
'Osaka',
sans-serif;
$fo06:'Cinzel',
YuMincho,
"Hiragino Mincho ProN",
"MS PMincho",
Meiryo,
serif;
$fo07: "Times New Roman",
YuMincho,
"Hiragino Mincho ProN",
"MS PMincho",
Meiryo,
serif;
$fo08:"游ゴシック",
YuGothic,
'Hiragino Kaku Gothic Pro',
'Osaka',
sans-serif;
$fo09:'Ailerons', sans-serif;
$fo010:'Poppins', sans-serif;
$fo011:'Ailerons', sans-serif;
$fo012:'Dancing Script', cursive;
$fo013:'Damion',
Meiryo,
YuGothic,
'Hiragino Kaku Gothic Pro',
'Osaka',
sans-serif;
//WEB FONT
//font
//uniq
$boxwidth: 200px;
$boxheight: 200px;
//uniq-yet
@mixin opacity($opacity) {
opacity: $opacity;
$opacityIE: $opacity * 100;
filter: alpha(opacity=$opacityIE);
}
// ベースフォントファミリー
$base_font: _Latest;
$base_font_en: _Standard;
// ベースフォントサイズ
$base_font_size: 16px;
$sp_base_font_size: 26px / 2;
// ベースline-height
$base_line_height: 30 / 16;
$sp_base_line_height: 42 / 26;
// -------------------------------------------------------------------
// ベースフォント
@if $base_font==_Latest {
$base_font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
/*$base_font: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, Verdana, Meiryo, sans-serif;*/
}

@else if $base_font==_Standard {
$base_font: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@else if $base_font==_Legacy {
$base_font: "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS P Gothic", "Osaka", sans-serif;
}

@else if $base_font==_Old {
$base_font: "ＭＳ Ｐゴシック", "MS P Gothic", "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", sans-serif;
}

@else if $base_font==_SP {
$base_font: Verdana, Roboto, "Droid Sans", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN" sans-serif;
}

@else if $base_font==_Webfont {
$base_font: "Roboto Condensed", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@if $base_font_en==_Standard {
$base_font_en: "Arial", "Helvetica", "Verdana", sans-serif;
}

@else if $base_font_en==_Webfont {
$base_font_en: "Roboto Condensed", "Arial", "Helvetica", "Verdana", sans-serif;
}

// *******************************************************************
// mixin
// *******************************************************************
// media queries設定
// -------------------------------------------------------------------
// SP最小
@mixin mq_spmin {
@media screen and (max-width: $mq_bp_spmin) {
@content;
}
}

// SP
@mixin mq_sp {
@media screen and (max-width: $mq_bp_sp) {
@content;
}
}

@mixin mq_lg {
@media screen and (max-width: $BreakPoint--lg) {
@content;
}
}

// PC※IE8対応の有無によって下記【A】【B】いずれか選択
// 【A】IE8の描画を無視する場合
@mixin mq_pc {
@media screen and (min-width: #{$mq_bp_sp + 1}) {
@content;
}
}

// 【B】IE8の描画をPC固定値と同様にする場合※Mediaqueriesの外にFixedLayout用の固定値などを設定するので、モダンブラウザ用の調整が必要となる為
//@mixin mq_pc {
// @media (max-width: #{$mq_bp_pc - 1}) {
// @content;
// }
//}
// PC固定値より大きい
@mixin mq_pc_gtfxd {
@media (min-width: #{$mq_bp_pc + 1}) {
@content;
}
}

// SP画角比率変化範囲
@mixin mq_sp_rate {
@media (min-width: #{$mq_bp_spmin + 1}) and (max-width: #{$mq_bp_sp}) {
@content;
}
}

// 基本スタイル系
// -------------------------------------------------------------------
// 基本フォントサイズレスポンシブ対応
@mixin fluid() {
$font_size_max: percentage($base_font_size / 16px); // PC画角基本フォントサイズ
$font_size_min: percentage($sp_base_font_size / $base_font_size); // SP画角基本フォントサイズ
$font_size_min_ie: $sp_base_font_size; // IE用SP画角基本フォントサイズ（%だとcalcの結果がおかしくなる為）
$range_fz: myFuncSplitUnit($base_font_size - $sp_base_font_size); // フォントサイズの可変範囲
$range_view: myFuncSplitUnit(($mq_bp_sp + 1) - ($mq_bp_spmin + 1)); // フォントサイズが可変になる画角の範囲
@include mq_spmin {
font-size: $font_size_min;
}
// 画角が$mq_bp_spminを超えたら、100pxごとにフォントサイズが1px増える
@media (min-width: #{$mq_bp_spmin + 1}) and (max-width: #{$mq_bp_sp}) {
font-size: calc(#{$font_size_min} + #{$range_fz} * (100vw - #{$mq_bp_spmin + 1}) / #{$range_view});
// IE
@media all and (-ms-high-contrast: none) {
font-size: calc(#{$font_size_min_ie} + #{$range_fz} * (100vw - #{$mq_bp_spmin + 1}) / #{$range_view});
}
}
// 画角が$mq_bp_spを超えたら、フォントサイズを$base_font_sizeで固定
@include mq_pc {
font-size: $font_size_max;
}
}

// 【引数】（指定するfont-size, 基準となるfont-size）
@mixin fz($size, $base_size: $base_font_size, $retina: false) {
@if $retina==true {
font-size: (myFuncSplitUnit($size) / myFuncSplitUnit($base_size * 2)) * 1rem;
}
@else {
font-size: (myFuncSplitUnit($size) / myFuncSplitUnit($base_size)) * 1rem;
}
}

// その他
// -------------------------------------------------------------------
// 数値から単位を外す
@function myFuncSplitUnit($px) {
@return $px / (1 + $px - $px);
}

// Propertyの値をremに換算
@function myFuncRem($size, $retina: false) {
@if $retina==true {
$myFuncRem: (myFuncSplitUnit($size) / myFuncSplitUnit($sp_base_font_size * 2)) * 1rem;
@return $myFuncRem;
}
@else {
$myFuncRem: (myFuncSplitUnit($size) / myFuncSplitUnit($base_font_size)) * 1rem;
@return $myFuncRem;
}
}

// SP画角比率変化
@function myFuncSPRate($value, $value_rest) {
$myFuncSPRate: calc(#{$value * $mq_sp_rate} * 1px + #{$value_rest} * (100vw - #{$mq_bp_spmin + 1}) / #{$range_view_sp});
@return $myFuncSPRate;
}

// SP画角比率変化（左右余白マージン）
@function myFuncSPRateHS($int: 1) {
$myFuncSPRateHS: calc((#{$h_space} + #{$h_space_max_val - $h_space_val} * (100vw - #{$mq_bp_spmin + 1}) / #{$range_view_sp}) * #{$int});
@return $myFuncSPRateHS;
}

// 要素をRetina対応に
@function myFuncRetina($px) {
$myFuncRetina: ($px / 2) * 1px;
@return $myFuncRetina;
}

// 正方形の対角線の長さを計算（transformと併用）
@function myFuncDiagonal($width) {
$myFuncDiagonal: ($width * 1.4142);
@return $myFuncDiagonal;
}

// カラム幅をパーセンテージに変換
@function myFuncColWidth($item_width, $item_space, $col) {
$myFuncColWidth: round-decimal(percentage($item_width / ($item_width * $col + $item_space * ($col - 1))), 1);
@return $myFuncColWidth;
}

// ボックス内部余白をパーセンテージに変換
@function myFuncInnerSpace($item_width, $item_inner_space) {
$myFuncInnerSpace: round-decimal(percentage($item_inner_space / $item_width), 1);
@return $myFuncInnerSpace;
}

// ブロック間の余白をemに変換
@function myFuncBlockSpace($margin_v, $base_font_size, $base_line_height) {
$myFuncBlockSpace: (($margin_v / $base_font_size) * 1em) - ((($base_line_height - 1) / 2) * 1em);
@return $myFuncBlockSpace;
}

// 正三角形の値を付与（ページ内リンクの記号や吹き出し用に▼を生成）
@function myFuncTriangle($triangle_width) {
$myFuncTriangle: ($triangle_width / 2) * 1.7320508075689;
@return $myFuncTriangle;
}

// HEXカラーの配列をRGBAに変換（rgba()内でインターポレーションが使えないので）
@function myFuncRGBA($color, $alpha) {
@return hsla(hue($color), saturation($color), lightness($color), $alpha);
}

// font-face使用の場合
@if $font_face==true {
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 100;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 200;
}
}

@if $resetCSS==0 or $resetCSS==_HTML5 {
// HTML5
/*! based on html5doctor.com Reset Stylesheet v1.6.1 Author: Richard Clark - http://richclarkdesign.com */
html {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
body {
background: transparent;
color: $base_color;
@if $lang==_JA {
html[lang="ja"] & {
font-family: $base_font;
}
}
@else if $lang==_EN {
html[lang="en"] & {
font-family: $base_font_en;
}
}
@else if $lang==_MULTI {
html[lang="ja"] & {
font-family: $base_font;
}
html[lang="en"] & {
font-family: $base_font_en;
}
}
line-height: 1;
-webkit-text-size-adjust: 100%;
// フォントサイズ自動調整OFF
}
@if $font_face==true {
// IE10以上
@media all and (-ms-high-contrast: none) {
body {
font-family: Verdana, Meiryo, sans-serif;
}
}
}
/* main elements group */
audio,
canvas,
progress,
video {
@include inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
/* a */
}

@else if $resetCSS==1 or $resetCSS==_XHTML {
// XHTML
/*! Based on Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) http://cssreset.com */
body {
background: transparent;
color: $base_color;
@if $lang==_JA {
html[lang="ja"] & {
font-family: $base_font;
}
}
@else if $lang==_EN {
html[lang="en"] & {
font-family: $base_font_en;
}
}
@else if $lang==_MULTI {
html[lang="ja"] & {
font-family: $base_font;
}
html[lang="en"] & {
font-family: $base_font_en;
}
}
font-size: $base_font_size;
line-height: 1;
-webkit-text-size-adjust: 100%;
// フォントサイズ自動調整OFF
}
input,
button,
textarea,
select {
@if $lang==_JA {
html[lang="ja"] & {
font-family: $base_font;
}
}
@else if $lang==_EN {
html[lang="en"] & {
font-family: $base_font_en;
}
}
@else if $lang==_MULTI {
html[lang="ja"] & {
font-family: $base_font;
}
html[lang="en"] & {
font-family: $base_font_en;
}
}
font-size: 100%;
}
}

@else if $resetCSS==2 or $resetCSS==_ResponsiveXHTML {
body {
background: transparent;
color: $base_color;
@if $lang==_JA {
html[lang="ja"] & {
font-family: $base_font;
}
}
@else if $lang==_EN {
html[lang="en"] & {
font-family: $base_font_en;
}
}
@else if $lang==_MULTI {
html[lang="ja"] & {
font-family: $base_font;
}
html[lang="en"] & {
font-family: $base_font_en;
}
}
font-size: $base_font_size;
line-height: 1;
-webkit-text-size-adjust: 100%;
// フォントサイズ自動調整OFF
}
input,
button,
textarea,
select {
@if $lang==_JA {
html[lang="ja"] & {
font-family: $base_font;
}
}
@else if $lang==_EN {
html[lang="en"] & {
font-family: $base_font_en;
}
}
@else if $lang==_MULTI {
html[lang="ja"] & {
font-family: $base_font;
}
html[lang="en"] & {
font-family: $base_font_en;
}
}
font-size: 100%;
}
button,
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="reset"],
input[type="image"] {
appearance: none;
border: none;
background: none;
vertical-align: middle;
}
input[type="text"],
input[type="password"],
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
}
input[type="text"],
input[type="password"] {
font-weight: normal;
}
input[type="radio"] {
appearance: none;
}
}

@else if $resetCSS==11 or $resetCSS==_Eric {
/*! Eric Meyer's Reset CSS */
}

@else if $resetCSS==12 or $resetCSS==_YUI {
/*! YUI 3 - reset.css */
}

@else if $resetCSS==13 or $resetCSS==_Normalize {
/*! normalize.css */
}

@mixin keyframes($animation-name01) {
@-webkit-keyframes #{$animation-name01} {
@content;
}
@-moz-keyframes #{$animation-name01} {
@content;
}
@keyframes #{$animation-name01} {
@content;
}
}

@mixin animation($animation-name) {
-webkit-animation: $animation-name;
-moz-animation: $animation-name;
animation: $animation-name;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}

@mixin animationValue( $name, $duration , $function, $delay, $count, $state){
-webkit-animation: $name $duration+s $function $delay+s $count $state;
animation: $name $duration+s $function $delay+s $count $state;
}
前のページへ戻る