STYLE GUIDE

PSDで全体を見通し以下を漏れなく埋めて設定してください。
PSDだと調査しにくいようでしたらプリントアウトしてカラーペンでマーキングします。
ここを怠るとおそらく1.2〜2倍もの工数がかかってしまうことになります。個人・チーム問わず設定してください。
何事も基礎・土台が最重要です。

レイアウト : _layout.scss

l_content_size

  • l_content_size_pc_1

    ここに補足コメント

    // pcから作成する場合
  .l_content_size {
    max-width: $main_width;
    margin: 0 auto;
    @include mq_max_768 {
      width: auto;
      padding: 0 4.6875%; // 15px / 320px * 100%
    }
  }

セッティング : _setting.scss

width

  • $base_width

    ここに補足コメント

    $base_width: 1356px;

  • $main_width

    ここに補足コメント

    $main_width: 1090px;

  • $side_width

    ここに補足コメント

    $side_width: 256px;

font-family

  • $gothic_font

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    $gothic_font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, '游ゴシック', YuGothic, Verdana, sans-serif;

  • $noto_sans_font

    ※google fontです。

    あのイーハトーヴォのすきとおった風

    $noto_sans_font: 'Noto Sans', sans-serif, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, '游ゴシック', YuGothic, Verdana;

  • $staatliches_font

    ※google fontです。

    ABCabc

    $staatliches_font: 'Staatliches', cursive;

color

  • 小タイトル

    ここに補足コメント

    • $color_0

      #000

    • $color_1

      #fff

    • $color_2

      #1e1e1e

    • $color_3

      #000250

    • $color_4

      #323232

    • $color_5

      #AA8300

    • $color_6

      #000

    • $color_7

      #000

    • $color_8

      #000

    • $color_9

      #000

    • $color_10

      #000

    • $color_11

      #000

    • $color_12

      #000

    • $color_13

      #000

    • $color_14

      #000

ユーティリティ : _utility.scss

text_set（font-size・line-height・letter-spacing）

  • u_txt_1

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    .u_txt_1 {
    font-size: 1.4em;
    line-height: 1.8;
    letter-spacing: .56px;
  }

  • u_txt_2

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    .u_txt_2 {
  font-size: 1.8em;
  line-height: 1.5;
  letter-spacing: .72px;
}

  • u_txt_3

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    .u_txt_3 {
  font-size: 4.2em;
  font-family: $noto_sans_font;
  line-height: 1.5;
  letter-spacing: 1.68px;
  @include mq_max_768 {
    font-size: 2.8em;
    letter-spacing: 1.12px;
  }
}

  • u_txt_4

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    .u_txt_4 {
  font-size: 1em;
  letter-spacing: .04px;
  line-height: 1.8;
}

  • u_txt_5

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    .u_txt_5 {
  font-size: 2.5em;
  line-height: 1.5;
  letter-spacing: .08em;
  font-weight: 400;
  font-family: $noto_sans_font;
  @include mq_max_768 {
    font-size: 2em;
  }
}

  • u_txt_6

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    .u_txt_6 {
  font-size: 2.8em;
  line-height: 1.5;
  letter-spacing: 1.12px;
}

  • u_txt_7

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    .u_txt_7 {
  font-size: 1.9em;
  line-height: 1.8;
  letter-spacing: .08em;
  @include mq_max_768 {
    font-size: 1.6em;
    line-height: 1.5;
    letter-spacing: .05em;
  }
}

  • u_txt_8

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    .u_txt_8 {
  font-size: 2em;
  line-height: 1.4;
  letter-spacing: .05em;
  @include mq_max_768 {
  }
}

  • u_txt_9

    ここに補足コメント

    あのイーハトーヴォのすきとおった風

    .u_txt_9 {
  font-size: 1em;
  line-height: 1;
  letter-spacing: .4px;
  @include mq_max_768 {
  }
}

コンポーネント : _component.scss

タイトル

  • c_ttl_1

    ここに補足コメント

    セミナー / 講演会情報SEMINAR EVENT
    ///// ここにコンポーネントを記述 /////

  • c_ttl_2

    ここに補足コメント

    経営計画書MANAGEMENT PLAN
    ///// ここにコンポーネントを記述 /////

  • c_ttl_3

    MANAGEMENT PLAN SHEET

    経営計画書

  • c_ttl_4

    武蔵野のサービスにご興味が出てきた方

    CONTACT

ボタン

アイコン

  • c_ico_1

    ここに補足コメント

    カテゴリー名
    ///// ここにコンポーネントを記述 /////

  • c_ico_2

    全国開催

ページャー

  • c_pager_num

    ここに補足コメント
    ///// ここにコンポーネントを記述 /////

  • c_pager_prev_next

    ここに補足コメント
    ///// ここにコンポーネントを記述 /////

リスト系

メインビジュアル

  • l_sub_mainvisual

    MANAGEMENT PLAN SHEET

    経営計画書

    すべてはここから始まり、ここに立ち戻る――企業理念や社章、経営目標、
    行動指針など“武蔵野”が詰まったルールブック。

    経営計画書を試してみる

セクション系

アイテム系

  • c_item_1

    ここに補足コメント
    ///// ここにコンポーネントを記述 /////

  • c_item_2

    ここに補足コメント
    ///// ここにコンポーネントを記述 /////

  • c_item_3

    ここに補足コメント
    ///// ここにコンポーネントを記述 /////