作成日：2021/04/16　更新日：2022/01/27

#4 Sassを使ってCSSを効率的に記述する

Sassサス(サース)はCSSを便利に書く方法です。

Sassを使うとCSSを記述する際に変数や関数が使えるようになり、シンプルで効率的に記述することが可能になります。 Sassには「Sass（.sass）」や「Scss（.scss）」「Less（.less）」といった記法がありますが、 ここではScssサスを使って説明いたします。
また、Scss記法で記述したとしても最終的にCSSファイルとして書き出したいために コンパイル（変換）という作業が必要となります。 コンパイルする方法はアプリやテキストエディタなどで簡単にできます。
また、scssファイルはcssフォルダと別に、scssフォルダを作りそのなかで管理しましょう。
階層イメージ

├── css
│   ├── reset.css
│   └── style.css
├── images
├── index.html
└── scss
    └── style.scss

例）scssでの記述の仕方

/* style.scss */
.main{
  width:90vw;
  &__text{   /* 子要素名を`&`でつなぐとその親要素の`.main`の文字が貼付けされ、.main__text となります。 */
    text-align:center;
    &--sub{
      font-size:0.8em;
    }
  }
  &__image{
    margin:0 auto;
  }
  &:hover{
    background:none;
  }
  .list{  /* &でつながないと半角スペースが入ります */
    margin:1px;
  }
}
親要素のセレクタの中に、ネスト（入れ子に）して記述していきます。
親要素のセレクタ名が変更になったときも保守しやすいですし、なにより親セレクタを探しだせば子要素の見通しが良くなるので作業が早くなります。
↓
cssフォルダにcssファイルとしてコンパイル（変換）されるとこのようになります 

/* style.css */
.main{
  width:90vw;
}
.main__text{
  text-align:center;
}
.main__text--sub{
  font-size:0.8em;
}
.main__image{
  margin:0 auto;
}
.main:hover{
  background:none;
}
.main .list{
  margin:1px;
}

Visual Studio CodeでSCSSをコンパイル（変換）する設定

Visual Studio Code（VS codeブイエス コード）を使えば簡単にSCSSのコンパイルとファイル管理が簡単に行なえます。

インストールとセッティングの手順

○ VS codeを起動して、左のアイコンの「機能拡張」をクリックし、検索窓に「Live Sass Compileライブ サス コンパイル」と入力。

出てきたらインストールボタンをクリック。
○ インストールボタンが消えて、歯車ボタンが出ますのでクリック。

「拡張機能の設定」をクリックすると設定ウィンドウが開きます。
○ 項目の設定をします。
Live Sass Compile › Settings: Formats にあるsettings.jsonを編集をクリック
formats部分を以下のように変更します。

{
  "liveSassCompile.settings.formats": [

      {
          "format": "nested",
          "extensionName": ".css", /* 拡張子cssファイルをコンパイルする */
          "savePath": "~/../css"   /* scssフォルダと同階層にある、cssフォルダに入れる場合 */
      }
  ],
}
"format": は出力されたときの書かれ方（フォーマット）を指定できます。
説明を表示する/非表示にする

.classname{
  color:#F00;
  font-size:2em;
  span{
    padding:3px;
  }
}
↓ 

/* expandedに設定したときの出力 */
.classname {
  color: #F00;
  font-size: 2em;
}

.classname span {
  padding: 3px;
}

/* nestedに設定したときの出力 */
.classname {
  color: #F00;
  font-size: 2em; }
  .classname span {
    padding: 3px; }

/* compactに設定したときの出力 */
.classname { color: #F00; font-size: 2em; }

.classname span { padding: 3px; }

/* compressedに設定したときの出力 */
.classname{color:#F00;font-size:2em}.classname span{padding:3px}
expanded: 普通の形式のcss、改行が入る
nested: 改行を詰めたcss
compact: セレクタごとの波括弧が1行になる。改行が入る
compressed: どこにも改行がない形式、で出力されます。

Live Sass Compile › Settings: Generate Map にあるsettings.jsonを編集をクリック

{
  "liveSassCompile.settings.generateMap": false
}
.mapファイルを作らないように設定します。
同じファイルに記述する場合は以下のように記述
説明を表示する/非表示にする

{
  "liveSassCompile.settings.formats": [
      {
          "format": "nested",
          "extensionName": ".css",
          "savePath": "~/../css"
      }
  ],
  "liveSassCompile.settings.generateMap": false,
  その他設定A...,
  その他設定B...,
}

7. 画面下に表示される「Watch Sass」をクリックすると、scssファイルを保存すると同時にコンパイルし、cssファイルが生成されます。

#5 SCSSの使い方

SCSSでは、変数と関数を使えるようになり非常に便利です。

変数を使う

変数に色や数値の情報を入れておき、 各プロパティの値の部分に変数名で指定することで使えるようになります。
変数に代入している値を変えるだけで、変数を使っているすべての箇所が変わるので便利です。 

/* 変数の設定 */
$colorA:#f3bebe; /* 文字列の頭に`$`をつけると変数の扱いになる */
$sizeB:12px;

.bg{
  background-color: $colorA;
}
.area{
  font-size: $sizeB;
  background-color: $colorA;
}
.navi{
  font-size: $sizeB;
}
↓ 

.bg {
  background-color: #f3bebe; }  /* $colorAに設定していた`#f3bebe`が挿入される */
.area {
  font-size: 12px;
  background-color: #f3bebe; }
.navi {
  font-size: 12px; }

関数を使う

関数は自分で作る独自関数と、あらかじめ作られているネイティブな（ビルトインされた）関数の2種類があります。
関数は値の場所に入れることで意図した値を挿入できるようにします。
Sassのネイティブ関数
@function 関数名($引数) {
　　@return 戻り値;
　}


/*独自関数を作る*/
@function Round-pixel($i) {
  @return round($i)+px;  /*ネイティブのround関数 = 小数点の四捨五入*/
}

/*使い方*/
.selector{
  width: Round-pixel(123.656);
}
↓出力結果 

.selector {
  width: 124px; }

マップを使ったメディアクエリの設定

SCSSでメディアクエリを使うときに便利になる書き方です。今度コーディングするときにこちらを使ってみましょう。
ちょっと読み解くまで時間がかかると思うのですが、完全に理解しなくても良いので、コピーして使ってみてください。

ブレイクポイントは、マップ機能を使って$breakpoints変数に入れています。
$map: (
　　key: value　　　// キーに`key`、値に`value`を設定
);

必要に応じて増やしたり、いらないものは削除して構いません。 ただ$bp1と$bp2用に最低でも2つのブレイクポイントは登録しておきましょう。 ※keyの名称に特にルールはないので何にしても構いません。 

/* マップ $map:(key: value)  各幅の値を登録しておく */
$breakpoints: (
  'sm': 340,
  'md': 768,
  'lg': 1024,
  'xl': 1230,
  'xxl': 2000,
) !default; /* $breakpointsがココより以前に設定されている場合は上書きしないという設定 */

/* @mixin mixin名(引数) -> @include mixin名(***)　という形でどこでも使えるようになる */
@mixin mq($mq, $bp1:lg, $bp2:lg) {        /* $引数名:初期値 */

  /* 引数の幅の数値 */
  $w1    : map-get($breakpoints, $bp1);  /* map-get() -> $breakpointsから値の数値を取得。例ではlgなので`1024`が`$w1`に入る */
  $w2    : map-get($breakpoints, $bp2);

  /* 出力する文字列の設定 */
  $min1  : 'min-width: #{ ($w1+1) }px';  /* #{ } -> 処理の途中で変数を使う場合 */
  $max1  : 'max-width: #{ ($w1)   }px';
  $min2  : 'min-width: #{ ($w1+1) }px';
  $max2  : 'max-width: #{ ($w2)   }px';

  /* 内容によって書き出す内容を条件分岐する */
  @if $mq == min {  /* もし第一引数が`min`だったら */
    @media screen and ($min1) {
      @content;  /* @includeしたとき、他のブロックと同様に中括弧を使用して渡されます */
    }
  }
  @else if $mq == max {  /* もし第一引数が`max`だったら */
    @media screen and ($max1) {
      @content;
    }
  }
  @else if $mq == min-max {  /* もし第一引数が`min-max`だったら */
    @media screen and ($min2) and ($max2) {
      @content;
    }
  }
}
よく使うスタイルを@mixinで定義して、色んな場所で使い回せる便利な機能で、ユーザー定義関数、独自関数のことです。 @includeで使うことができます。
ちなみにmixin名のmqはmedia queryメディア クエリーの略です。

//関数設定
@mixin mixin名($引数1, $引数2:初期値){
  /* 設定 */
}
//使うとき
セレクタ名{
  ＠include mixin名（引数1, 引数2の値）;
}

以下のように使います。 

#contents_wrap{
  margin: 0 auto;
  padding:5px;
  @include mq('max', 'md'){ /* @include mixin名(***){} 最大769pxまで */
    width:800px;
    padding:8px;
    position:relative;
    border: 1px solid #F00;
  }
  @include mq('min-max', 'md', 'xl'){ /* 最小770px以上、最大1,230pxまで */
    width:95vw;
    border: 1px solid #00F;
  }
  @include mq('min', 'xl'){ /* 最小1,231px以上 */
    width:1200px;
    padding:10px;
    position:relative;
    border: 1px solid #FF0;
  }
}
↓出力結果 

#contents_wrap {
  margin: 0 auto;
  padding: 5px; }
  @media screen and (max-width: 768px) {  /* @include mq()で出力される */
    #contents_wrap {                      /* @contentでコンテンツブロックが出力される */
      width: 800px;
      padding: 8px;
      position: relative;
      border: 1px solid #F00;
    }
  }
  @media screen and (min-width: 769px) and (max-width: 1230px) {
    #contents_wrap {
      width: 95vw;
      border: 1px solid #00F; } }
  @media screen and (min-width: 1231px) {
    #contents_wrap {
      width: 1200px;
      padding: 10px;
      position: relative;
      border: 1px solid #FF0; } }

以前作ったレスポンシブサイトをscss化してみよう。

ここでは早速ブレイクポイントや色を変数で指定してみます。 ただ、この変数を記述したファイルは別のファイルで管理したいため _variables.scss （variableバリアブル = 変数）という名前で保存し、 style.scssでそのファイルをインポートさせて使います。この2つのファイルはscssフォルダに入れておきます。
ファイル構成は以下のとおりです。 

├── css
│   ├── reset.css
│   └── style.css
├── images
├── index.html
└── scss
    ├── _variables.scss
    └── style.scss

課題1

基礎1 #7 レスポンシブコーディングでサイト制作① で作成したレスポンシブデザインのcssをscss化してみましょう。
答え
_variables.scss 

/* _variables.scss */
$breakpoints: (
  'sm': 340,
  'md': 768,
  'lg': 1215,
) !default;
@mixin mq($mq, $bp1:lg, $bp2:lg){
  $w1    : map-get($breakpoints, $bp1);
  $w2    : map-get($breakpoints, $bp2);
  $min1  : 'min-width: #{($w1+1)}px';
  $max1  : 'max-width: #{($w1)}px';
  $min2  : 'min-width: #{($w1+1)}px';
  $max2  : 'max-width: #{($w2)}px';

  @if $mq == min {
    @media screen and ($min1) {
      @content;
    }
  }
  @else if $mq == max {
    @media screen and ($max1) {
      @content;
    }
  }
  @else if $mq == min-max {
    @media screen and ($min2) and ($max2) {
      @content;
    }
  }
}

$mainColor:#7BC2BA;

style.scss 

/* style.scss */
@charset "utf-8";
@import '_variables.scss';

body {
  font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
  color: $mainColor;
}
a {
  text-decoration: none;
}
.btn a,
input[type="submit"]{
  display:inline-block;
  margin:0 auto;
  padding:10px 0;
  width:130px;
  cursor:pointer;
  font-size:1.3em;
  color:#58847F;
  text-align:center;
  border: 10px solid #58847F;
  background-color:transparent;
}

/* ===========================
 header
=========================== */
header {
  border-top:20px solid $mainColor;
  /* widthをpx指定している部分がレスポンシブ化のポイントになります */
  .header__contents{
    width:1200px;
    margin:43px auto 88px;
    display:flex;
    justify-content:center;
    @include mq('max','md'){
      display:block;
      margin-top:240px;
      position:relative;
    }
    @include mq('max','lg'){
      width:100%;
    }
    &--text{
      align-self:flex-end;
      margin:0 30px;
      width:25%;
      border-top:1px solid $mainColor;
      border-bottom:1px solid $mainColor;
      @include mq('max','md'){
        margin:0 auto;
        width:90%;
      }
    }
    .text-right{
      text-align:right;
      @include mq('max','md'){
        text-align:left;
        border-bottom:none;
      }
    }
    &--logo{
      text-align:center;
      @include mq('max','md'){
        position: absolute;
        top:-228px;
        left: 0;
        right: 0;
        margin: auto;
      }
      &-mark{
        margin-bottom:20px;
      }
    }

  }
  .header__image{
    position:relative;
    height:600px;
    background:$mainColor url('../images/bg_header.jpg')no-repeat right center / cover;
    @include mq('max','md'){
      position:relative;
      height:40vh;
      background:$mainColor url('../images/bg_header.jpg')no-repeat right center / cover;
    }
    img{
      position:absolute;
      top:-60px;
      right:5vw;
    }
  }
}

/* ===========================
 nav
=========================== */
nav {
  background-color:$mainColor;
  ul{
    width:1200px;
    margin:0 auto;
    display:flex;
    justify-content: space-around;
    @include mq('max','md'){
      flex-wrap:wrap;
    }
    @include mq('max','lg'){
      width:100%;
    }
    li{
      width:120px;
      height:60px;
      @include mq('max','md'){
        margin:6px 0;
      }
      a{
        display:flex;
        justify-content: center;
        align-items: center;
        height:100%;
        color:#fff;
        @include mq('max','md'){
          border:1px solid #fff;
        }
      }
    }
  }
}


/* ===========================
 footer
=========================== */
footer {
  text-align:center;
  .footer {
    color:#fff;
    padding:60px 0 70px;
    background-color:$mainColor;
    h2{
      font-size:50px;
      margin:30px auto 80px;
      @include mq('max','md'){
        font-size:2em;
      }
    }
    &__image{
      width:100%;
      height:600px;
      background:$mainColor url('../images/bg_footer.jpg')no-repeat center center / cover;
      @include mq('max','md'){
        height:40vh;
      }
    }
    &__column{
      width:1200px;
      display:flex;
      margin:40px auto 100px;
      @include mq('max','md'){
        display:block;
      }
      @include mq('max','lg'){
        width:100%;
      }
      &--form{
        flex:1;
        width:60%;
        @include mq('max','md'){
          flex:1;
          width:100%;
        }
        form{
          width:60%;
          margin:10px auto 0;
          display:flex;
          flex-direction:column;
          text-align:left;
          @include mq('max','md'){
            width:80%;
          }
          p{
            font-size:0.9em;
            margin-bottom:15px;
          }
          input[type="text"]{
            margin: 0 0 20px 0;
            padding:5px 10px;
            font-size:1.2em;
            border-radius:5px;
            border:none;
          }
          textarea{
            margin: 0 0 20px 0;
            padding:10px;
            height:8em;
            font-size:1.3em;
            border-radius:5px;
            border:none;
          }
        }
      }
      &--map {
        flex:1;
        text-align:left;
        width:500px;
        height:450px;
        @include mq('max','lg'){
          margin:0 auto;
          width:97%;
        }
        iframe{
          width:500px;
          height:450px;
          @include mq('max','md'){
            width:90%;
            margin:50px auto 0;
            text-align:center;
          }
          @include mq('max','lg'){
            width:40vw;
            height:450px;
          }
        }
      }
    }
    &__copy{
      font-size:0.8em;
      padding:20px 0;
      color:#aaa;
    }
  }
}


/* ===========================
 コンテンツ
=========================== */
main {
  .menu {
    width:1200px;
    margin:0 auto;
    @include mq('max','md'){
      margin:30px auto 0;
    }
    @include mq('max','lg'){
      width:100%;
    }
    &__content{
      display:flex;
      text-align:center;
      @include mq('max','md'){
        display:block;
        position:relative;
      }
      &--text{
        flex:1;
        @include mq('max','md'){
          position: absolute;
          top:30px;
          left: 0;
          right: 0;
          margin: auto;
          z-index:99;
        }
        img{
          margin-top:80px;
          text-align:center;
        }
        h1{
          margin:20px 0 50px;
          font-size:1.3em;
        }
        p{
          width:65%;
          margin:0 auto 20px;
        }
      }
      &--image{
        flex:1;
        height:600px;
        @include mq('max','md'){
          position: relative;
          margin-bottom:2px;
          &::before{
            height:600px;
            background-color: rgba(0,0,0,0.6);
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            content: ' ';
          }
        }
      }
      .img-cording{
        background:url('../images/menu_cording.jpg')no-repeat center center / cover;
      }
      .img-design{
        background:url('../images/menu_design.jpg')no-repeat center center / cover;
      }
    }
  }

  .vision {
    position: relative;
    @include mq('max','md'){
      margin-top:50px;
    }
    &__image{
      border-top: 60px solid $mainColor;
      height:600px;
      background:$mainColor url('../images/bg_contents.jpg')no-repeat center center / cover;
      display:flex;
      justify-content: center;
      align-items: center;
      flex-direction:column;
      @include mq('max','md'){
        font:bold 1.6em/1.9em sans-serif;
      }
      /*背景画像に黒いカバーをかける方法*/
      &::before{
        height:600px;
        background-color: rgba(0,0,0,0.6);
        position: absolute;
        top: 60px;
        right: 0;
        bottom: 0;
        left: 0;
        content: ' ';
      }
      h1{
        font:bold 31px/2.3em sans-serif;
        text-align:center;
        color:#fff;
        z-index:99;
      }
      p{
        margin-top:75px;
        z-index:99;
      }
    }

    &__columun{
      width:1200px;
      margin:80px auto 150px;
      display:flex;
      justify-content: space-between;
      @include mq('max','md'){
        width:90%;
        margin:10px auto;
        display:block;
      }
      @include mq('max','lg'){
        width:97%;
      }
      &--item{
        width:30%;
        text-align:left;
        @include mq('max','md'){
          width:90%;
          margin-top:40px;
          text-align:left;
        }
        &-img{
          margin:0 0 50px;
          text-align:center;
          @include mq('max','md'){
            margin:0 0 10px;
        text-align:center;
          }
          img{
            height:200px;
          }
        }
      }
    }
  }
}

課題2

基礎1 #8 レスポンシブコーディングでサイト制作② で作成したレスポンシブデザインのcssをscss化してみましょう。
答え
_variables.scss 

/* _variables.scss */
$breakpoints: (
  'sm': 340,
  'md': 480,  /* ←変更する */
  'lg': 980,  /* ←変更する */
) !default;
@mixin mq($mq, $bp1:lg, $bp2:lg){
  $w1    : map-get($breakpoints, $bp1);
  $w2    : map-get($breakpoints, $bp2);
  $min1  : 'min-width: #{($w1+1)}px';
  $max1  : 'max-width: #{($w1)}px';
  $min2  : 'min-width: #{($w1+1)}px';
  $max2  : 'max-width: #{($w2)}px';

  @if $mq == min {
    @media screen and ($min1) {
      @content;
    }
  }
  @else if $mq == max {
    @media screen and ($max1) {
      @content;
    }
  }
  @else if $mq == min-max {
    @media screen and ($min2) and ($max2) {
      @content;
    }
  }
}

$mainColor:#7BC2BA;

style.scss 

@charset "utf-8";
@import '_variables.scss';
/************************
* 初期設定
************************/
body{
  font-family: "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  letter-spacing : 0.04em;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  box-sizing: border-box;
}
a{
  display: block;
  text-decoration: none;
}
img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}


/*******************
* header footer
*******************/
.header{
  position: fixed;
  top:0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 1;
  padding: 10px 20px;
  background: rgba(0, 0, 0, .6);
  @include mq('max','md'){
    padding: 20px 0 20px;
    justify-content: center;
  }
  &__navi {
    display: flex;
    li:not(:last-child) {
      margin-right: 14px;
    }
    a {
      color: #fff;
      font-size: 12px;
    }
  }
  &__sns {
    display: flex;
    @include mq('max','md'){
      display: none;
    }
    li {
      width: 45px;
      height: 45px;
    }
  }
}

.logo{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;
  background: url(../img/mv.jpg) center/cover no-repeat;
  @include mq('max','md'){
    height: 467px;
  }
  h1 {
    width: 150px;
  }
}

.footer {
  background-color: #242424;
  &__inner {
    width: 80%;
    margin: auto;
    padding: 50px 0;
    &-navi {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      @include mq('max','md'){
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      li {
        margin: 0 10px;
        @include mq('max','md'){
          &:not(:last-child) {
            margin-bottom: 10px;
          }
        }
        a {
          color: #ffffff;
          font-size: 12px;
          @include mq('max','md'){
            padding: 10px 0;
          }
        }
      }
    }
    &-sns {
      border-top: 1px solid #7c7c7c;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 30px;
      ul {
        display: flex;
        li {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
  .copyright {
    color: #ffffff;
    font-size: 12px;
  }
}


/*******************
* philosophy
*******************/
.philosophy {
  display: flex;
  height: 680px;
  background-color: #242424;
  @include mq('max','md'){
    flex-direction: column;
  }
  &__left,
  &__right{
    width: 50%;
    @include mq('max','md'){
      width: 100%;
    }
  }
  &__right {
    background: url(../img/philosophy_bg.jpg) center/cover no-repeat;
    @include mq('max','md'){
      height: 230px;
    }
  }

  &__left {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    @include mq('max','md'){
      padding: 0 20px;
      width: 100%;
      height: 450px;
    }
    &-top,
    &-bottom {
      line-height: 1.6;
    }
    &-title {
      color: #fff;
      font-size: 24px;
      @include mq('max','md'){
        text-align: center;
        font-size: 16px;
      }
    }
    &-top {
      margin-top: 40px;
      color: #fff;
      @include mq('max','md'){
        font-size: 12px;
        line-height: 1.8;
      }
    }
    &-bottom {
      margin-top: 20px;
      color: #fff;
      @include mq('max','md'){
        font-size: 12px;
        line-height: 1.8;
      }
    }
  }
  &__button {
    margin-top: 50px;
    border: 1px solid #fff;
    width: 180px;
    @include mq('max','md'){
      width: 100%;
    }
    a {
      text-align: center;
      padding: 16px 0;
      font-size: 14px;
      color: #fff;
      &:hover {
        color: #242424;
        background: #fff;
      }
    }
  }
}


/*******************
* NEWS
*******************/
.news {
  background: #F0F0F0;
  padding: 100px 0;
  @include mq('max','md'){
    padding: 50px 0;
  }
  &__title {
    width: 90%;
    margin: 0 auto;
    font-size: 24px;
    @include mq('max','md'){
      font-size: 16px;
      display: flex;
      flex-direction: column;
      text-align: center;
    }
    span {
      font-size: 16px;
      margin-left: 16px;
      @include mq('max','md'){
        font-size: 12px;
        margin-top: 10px;
      }
    }
  }
  &__list {
    width: 90%;
    margin: 0 auto;
    display: flex;
    margin-top: 40px;
    @include mq('max','md'){
      flex-wrap: wrap;
    }
    li {
      width: calc(100% / 4 - 15px);
      @include mq('max','md'){
        width: calc(100% / 2 - 2%);
        &:nth-child(odd) {
          margin-right: 4%;
        }
        &:nth-child(n+3) {
          margin-top: 24px;
        }
      }
      &:not(:last-child) {
        margin-right: 30px;
        @include mq('max','md'){
          margin-right: 0;
        }
      }
    }
    &-txt {
      margin-top: 10px;
      font-size: 14px;
      dd {
        margin-top: 10px;
      }
    }
  }
  &__button {
    border: 1px solid #242424;
    width: 180px;
    margin: 60px auto 0;
    @include mq('max','md'){
      width: 90%;
    }
    a {
      text-align: center;
      padding: 16px 0;
      font-size: 14px;
      color: #242424;
      &:hover {
        color: #fff;
        background: #242424;
      }
    }
  }
}


/*******************
* INSTAGRAM
*******************/
.instagram {
  background: #fff;
  padding: 100px 0;
  @include mq('max','md'){
    width: 100%;
    padding: 50px 0;
  }
  &__title {
    width: 90%;
    margin: 0 auto;
    font-size: 24px;
    @include mq('max','md'){
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 16px;
    }
    span {
      font-size: 16px;
      margin-left: 16px;
      @include mq('max','md'){
        margin-top: 10px;
        font-size: 12px;
      }
    }
  }
  &__list {
    width: 90%;
    margin: 0 auto;
    display: flex;
    margin-top: 40px;
    @include mq('max','md'){
      flex-wrap: wrap;
      &:nth-child(odd) {
        margin-right: 4%;
      }
      &:nth-child(n+3) {
        margin-top: 24px;
      }
    }
    li {
      width: calc(100% / 4 - 15px);
      @include mq('max','md'){
        width: calc(100% / 2 - 2%);
      }
      &:not(:last-child) {
        margin-right: 30px;
        @include mq('max','md'){
          margin-right: 0;
        }
      }
    }
  }
  &__button {
    border: 1px solid #242424;
    width: 180px;
    margin: 60px auto 0;
    @include mq('max','md'){
      width: 90%;
    }
    a {
      text-align: center;
      padding: 16px 0;
      font-size: 14px;
      color: #242424;
      &::hover {
        color: #fff;
        background: #242424;
      }
    }
  }
}


/*******************
* ACCESS
*******************/
.access {
  background: #f0f0f0;
  padding: 100px 0;
  @include mq('max','md'){
    padding: 50px 0;
  }
  &__title {
    text-align: center;
    font-size: 24px;
  }
  &__map {
    margin-top: 50px;
    iframe {
      width: 100%;
    }
  }
  &__detail {
    width: 50%;
    margin: 0 auto;
    margin: 40px auto 0;
    @include mq('max','md'){
      width: 80%;
    }
    dl {
      display: flex;
      @include mq('max','md'){
        flex-direction: column;
      }
      &:not(:first-child) {
        margin-top: 30px;
        @include mq('max','md'){
          margin-top: 40px;
        }
      }
      dt {
        flex: 1;
        font-size: 14px;
        @include mq('max','md'){
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 8px;
        }
      }
      dd {
        flex: 2;
        font-size: 14px;
        div:not(:first-child) {
          margin-top: 10px;
        }
      }
    }
  }
}
確認用のデータをダウンロードしたい場合はこちらからダンロード
入門入門

入門1（コーダー初級）

  1. Webサイトを作る準備
  2. Webサイトはhtmlとcssで作る
  3. htmlとcssの決まりごと
  4. htmlは枠というブロックのパズル
  5. htmlでの枠の使い方と特性
  6. cssでデザインしてみる
  7. cssでデザインする時のプロパティ
  8. 簡単なWebサイトを作ってみよう
  9. 枠をなぞってhtmlを作る
  10. 枠に名前をつけて個別にデザインする
  11. 枠を中央に配置する方法
  12. 2つの枠を横並びにする方法
  13. 枠だけのホームページが完成
  14. 枠の中に画像や色を入れる
  15. 枠の中にテキストを入れる
  16. 簡単なwebサイトの完成
  17. 完成したレイアウトを拡張する

入門2（コーダー中級）

  1. 枠のことを「要素」と呼ぶ
  2. 要素のレイアウトに便利なflexボックス
  3. 要素の種類を変えるdisplayプロパティ
  4. 要素の位置を調整できるpositionプロパティ
  5. 要素を回り込みさせるfloatプロパティ
  6. いろんなcssのセレクタ指定方法

入門3（コーダー上級）

  1. 実践を踏まえたコーディング
基礎基礎

基礎1（マークアップ 初級）

  1. インターネットの仕組み
  2. FTP接続
  3. SEOについて
  4. レスポンシブコーディングとは
  5. ビューポート、cssメディアクエリについて
  6. 作ったhtmlをレスポンシブ化してみよう
  7. レスポンシブコーディングでサイト制作①
  8. レスポンシブコーディングでサイト制作②

基礎2（マークアップ 中級）

  1. エクセル関数について
  2. エクセル関数（売上票を作る）
  3. エクセル関数（成績表を作る）
  4. jQueryってなに？
  5. jQueryライブラリの読み込み
  6. 簡単な機能をjQueryで実装しよう
  7. 変数を使う
  8. 関数を使う
  9. コンソールでデータの確認
  10. モーダルウィンドウを作る

基礎3（マークアップ 上級）

  1. jQueryプラグインを実装してみる
  2. CSSでアニメーション(transform,transition)
  3. デザインでよく使うtransitionスニペット
  4. Sassを使ってCSSを効率的に記述する
  5. SCSSの使い方
応用応用

応用1（フロントエンドエンジニア 初級）

  1. ローカルにWeb開発環境を作る(LAMP)
  2. PHPについて
  3. PHPの変数
  4. PHPで条件によって処理を変える（条件分岐）
  5. PHPで繰り返し処理を行う（ループ処理）
  6. PHPの配列変数（変数に複数データ）
  7. PHPで配列のループ処理
  8. PHPを便利にするいろんな記号
  9. データベース（DB）を作る

応用2（フロントエンドエンジニア 中級1）

  1. PHPとjsで簡単なアプリを作ってみよう
  2. PHPのエラーをブラウザに表示させる
  3. データベース(DB)に接続する
  4. DBデータをhtmlで表示させる
  5. formタグから入力したデータをDBに登録
  6. jQueryで要素をドラッグ移動させる
  7. データをAjaxでPHPに送信しDBに登録
  8. PHPで簡単にできるデバッグ方法
  9. 作ったプログラムを拡張してみる
  10. リレーショナルデータベース
  11. PHPのクラスを理解するための準備
  12. PHPアプリケーションをクラス化してみよう

応用3（フロントエンドエンジニア 中級2）

  1. CMSについて
  2. WordPressのインストールと初期設定
  3. 独自テーマを作る
  4. 共通部分をテンプレート化
  5. TOPページを作る
  6. 下層ページを作る
  7. 固定ページにNEWS投稿を読み込む
  8. 便利なプラグインを使う
  9. カスタムフィールド機能を使う
  10. その他の便利なWordPressの機能
  11. カスタム投稿機能を使う
  12. カスタムタクソノミー機能を使う
実践フロントエンド実践フロントエンド

実践1（フロントエンジニア 中級3）

  1. コマンドラインを使おう
  2. パッケージマネージャーHomebrewを使う
  3. タスクランナーgulp.jsで処理の自動化
  4. Gitでファイルのバージョン管理
  5. Gitを扱うためのBacklogとsourcetree
  6. Gitで使われる用語の説明
  7. Gitでファイルを共有する
  8. リモートリポジトリの作成&プッシュ
  9. リポジトリをクローンする
  10. 新しいブランチを作成する
  11. 変更履歴をプルする
  12. 競合(コンフリクト)を解消する

実践2（フロントエンドエンジニア 中級4）

  1. Vue.jsをインストールして動作確認
  2. 静的なページをVue.jsを使って構築する
  3. Veu.jsをCDNで読み込み画面表示させる
  4. PHPの代わりにVue.jsでHTML表示
  5. VueコンポーネントでHTML表示させる

実践3（フロントエンドエンジニア 上級1）

  1. VueとWebAPIでアプリを作る
  2. APIファイルを自作する
  3. Vueでドラッグ&ドロップ
  4. Vue.js + WordPressでヘッドレスCMSを作る
実践バックエンド実践バックエンド

実践3（バックエンド Laravel）

  1. PHPフレームワークのLaravel(ララベル)をつかおう
  2. Laravelをローカル環境に導入する準備
  3. Laravelの環境構築の方法
  4. Laravelでアプリケーション作成の準備
  5. Laravelでブラウザに表示されるかを確認する
  6. Laravelの仕組み〜MVCの理解〜
  7. Laravelでデータベースのデータを表示する方法
  8. Laravelアプリでデータを新規登録する方法
  9. LaravelでAjaxのデータを登録する方法
  10. Laravelでアプリを作ってみよう
デザインデザイン

入門（デザイン概論）

  1. デザインを科学する
  2. 観察（与件の整理）
  3. 実験（別案の作成）
  4. 数字（裏付けとなる数字）
  5. デザイン（配置の優先順位）
  6. デザイン（余白をつくる）
  7. デザイン（目を引く方法と目線の流れ）
  8. デザイン（書体を考える）
  9. デザイン（立体感を出す）

基礎（デザイン実践）

  1. バナーをデザインする

応用（クリエイティブ）

  1. 居酒屋サイトを作る
  2. クリニックサイトを作る
  3. キャンペーンLPを作る
キッズキッズ
コピーしました
RSS https://cbc-study.com/rss.xml　
質問などあればSlackで！ 誰でも無料でできます
cbc-study.slack.com
powerd by logo