#1 居酒屋サイトを作る

企画書・提案書を見ながら、要件に沿ってサイトのトップページデザインをやってみましょう。
内容を読み解き、参考サイトを見つけ、最適なデザインを行いましょう。 Adobe XD でデザインし、レスポンシブコーディングまでやってみましょう。
コーディングはVisual Studio Codeを使い、CSSはBEM記法を使ってSCSS で組んでみましょう。
企画書PDFをダウンロード

参考となる枠組み


SCSSではCSS内で演算子、変数、関数、if文が使えます。メディアクエリも簡単に設定できるようになります。
メディアクエリ初期設定

/* $変数名 */
$breakpoints: (
  'sm': 340,
  'md': 768,
  'lg': 1024,
  'xl': 1500,
  'xxl': 2000,
) !default;
/* @mixin 関数名(引数1:初期値, 引数2:初期値)
   = cssで使える関数。@includeで呼び出す */
@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;  /* @includeしたときに書く プロパティ:値 がここに入る */
    }
  }
  @else if $mq == max {
    @media screen and ($max1) {
      @content;
    }
  }
  @else if $mq == min-max {
    @media screen and ($min2) and ($max2) {
      @content;
    }
  }
}
SCSSコーディングの記述方法

body{
  - - -
}
header{
  - - -
  @include mq('min','lg'){ /*PC用を記述*/
    - - -
  }
}
footer{
  - - -
  @include mq('max','md'){ /*SP用を記述*/
    - - -
  }
}
main{
  - - -
}

.home{
  - - -
  @include mq('max','md'){ /*SP用を記述*/
    - - -
  }
  .concept{
    - - -
    &__txt{
      - - -
      @include mq('max','md'){ /*SP用を記述*/
        - - -
      }
    }
    &__img{
      - - -
    }
  }
  .works{
    - - -
  }
  .service{
    - - -
  }
}

.sub{
  - - -
  @include mq('min-max','lg','xl') {
    - - -
  }
  &__contents{
    - - -
    &--news{
      - - -
    }
    &--ecruit{
      - - -
    }
    &--sns{
      - - -
    }
  }
}
上記は、はじめにPCレイアウトをコーディングした後、SP対応したい箇所にメディアクエリを使った場合の記述例です。

BEMで書く場合
block__element--modifier
  • ブロック   :親要素 塊、コンポーネント
  • エレメント  :子要素 ブロックの中にのみ存在できる要素
  • モディファイア:Block(Element)の装飾の変化 色違いなど
また、jsでユーザーエージェントを見分けて、SPの場合は要素を削除したり、表示させたり…といったことも活用しましょう。

var getDevice = (function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
        return 'sp';
    }else{
        return 'other';
    }
  })();
  if(getDevice === 'sp'){
    $(".削除したい要素").remove();
    $(".表示させたい要素").css('display','block');
  }else if(getDevice === 'other'){
    $(".削除したい要素").remove();
    $(".表示させたい要素").css('display','block');
}
powerd by