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

    ここに補足コメント

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