CSS・SCSS

【重要】Scout-appを必須とします

納品前に必ずscout-appの最新版(2.18.16)でコンパイルが通るようにしてください。

 

scout-app official site & download

 

ツールやバージョンが違うだけで変換不可になる場合があるため、制作中のツールは問いませんが、納品時の条件を統一します。

 

 

 

SCSSディレクトリ構造

第三者が見てもわかりやすい構造にしてください。

 

設計例

[scss]
├ style.scss----------:分割されたSCSSファイルを統合
│
├ [1_setting] コンパイラーで利用するグローバル変数の設定
│ ├ _media.scss -------------:メディアクエリ
│ └ _var.scss-----:色やサイズなどの変数を設定
│
├ [2_tool] mixin、functions
│ ├ _reset.scss -------------:リセット
│ ├ _mixin.scss -------------:scssのmixin
│ ├ _functions.scss ---------:scssのfunctions
│
├ [3_project] サイト内共通のスタイル
│ ├ _html.scss --------------:素のhtml要素のスタイル
│ ├ _uikit.scss -----------:UIkitのカスタマイズ 
│ └ _class.scss -------------:サイト内共通クラス
│
└ [4_area]エリアまたはページ独自のスタイル
  ├ _header.scss ----------:header独自のスタイル
  ├ _footer.scss ----------:footer独自のスタイル
  ├ _main.scss ------------:mainエリア独自のスタイル
  ├ _aside.scss -----------:aside独自のスタイル
  └ _home.scss ------------:スラッグ「home」ページの独自スタイル
 
・
  

 

 

UIKitのCSSカスタマイズ

uikit.scssというファイルを作成して行ってください。uikit.cssより後から読込してスタイルを上書きします。

 

/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 UIkitカスタム 2_custom/_uk-custom.scss
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/

/* modal
---------------------------------------- */
.uk-modal{
  z-index: 100001;
  background-color: rgba(0,0,0,0.8);
}
.uk-modal-title{
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: solid 1px $bdc-light;
}
.uk-modal-close-full{
  background-color: transparent;
}
/* text
---------------------------------------- */
.uk-text-small{
  font-size: 14px;
}
.uk-text-large{
  font-size: 24px;
}

 

 

 

CSSの呼び出し方法

こちらのページを参考にしてください。

 

 

 

【参考】メディアクエリ

@mixin

_media.scssに以下のように記述するとUikitと合います。コピーして使ってください。

 

@mixin mixin-media($media) {
@if $media == se{//original:初代iphoneSE
@media only screen and (max-width: 321px){
@content;
}
}
@if $media == p{
@media only screen and (max-width: 639px){
@content;
}
}
@if $media == s{
@media only screen and (min-width: 640px) and (max-width: 1024px){
@content;
}
}
@if $media == m{//ここからデスクトップ
@media only screen and (min-width: 960px){
@content;
}
}
@if $media == l{
@media only screen and (min-width: 1200px){
@content;
}
}
@if $media == xl{
@media only screen and (min-width: 1600px){
@content;
}
}
@if $media == xxl{//original:full HD 以上
@media only screen and (min-width: 2000px){
@content;
}
}
@if $media == yoko{//横向き
@media (orientation: landscape){
@content;
}
}
@if $media == tate{//縦向き
@media (orientation: portrait){
@content;
}
}
}//mixin

 

@include

以下のように任意のファイルに設定

例:_main.scss

 

.box1{	
  width: 300px;
  height: 150px;
  border-radius: 10px;

  @include mixin-media(m){//デスクトップ
   width: 600px;
   height: 300px;	
  }

 @include mixin-media(xl){//大きいデスクトップ
  width: 900px;
  height: 750px;
 }
}

 

出力結果

以下のように出力されます。

例:style.css

 

.box1{
  width: 300px;
  height: 150px;
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  .box1{
    width: 600px;
    height: 300px;  
  }
}

@media screen and (max-width: 767px) {
  .box1{
    width: 1200px;
    height: 600px;  
  }
}