/styleguide/ styleguide | オンライン英会話ならvipabc

STYLE GUIDE

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

l_content_size(_layout)

  • l_content_size

    どこででも再利用可能なレイアウトブロックです。marginは含めません。
    中央寄せ等は各ページで行います。上下marginに数値がページのより異なる場合があるからです。

    
    .l_content_size {
      width: $base_width;
      @include mq_max_768 {
        width: auto;
        padding: 0 4.6875%; // 15px / 320px * 100%
      }
    }
    
    

width(_setting)

  • $base_width

    1160px

  • $main_width

    -

  • $side_width

    -

font-family(_setting)

  • $base_font_pc

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

  • $base_font_sp

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

  • $roboto_font

    $roboto_font: 'Roboto', sans-serif;

color(_setting)

  • $color_1

    #000

  • $color_2

    #fff

  • $color_3

    #333

  • $color_4

    #666

  • $color_5

    #999

  • $color_6

    #ccc

  • $color_7

    #d70b17

  • $color_8

    #f5f5f5

  • $color_9

    #ebebeb

  • $color_10

    #ddd

  • $color_11

    #343434

  • $color_12

    #f5f5f5

  • $color_13

    #4868b0

  • $color_14

    #666

  • $color_15

    #e50012

  • $color_16

    #000

  • $color_17

    #000

  • $color_18

    #000

  • $color_19

    #000

  • $color_20

    #000

text_set(font-size・line-height・letter-spacing)(_utility)

  • u_txt_1

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_1 {
      font-size: 1.4em;
      line-height: 1;
      @include mq_max_768 {
      }
    }
    
    
  • u_txt_2

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_2 {
      font-size: 1.6em;
      line-height: 2;
      color: $color_4;
      @include mq_max_768 {
        font-size: 1.4em;
        line-height: 1.4;
      }
    }
    
    
  • u_txt_3

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_3 {
      font-size: 1.6em;
      line-height: 2;
      color: $color_4;
      @include mq_max_768 {
        font-size: 1.4em;
        line-height: 1.7;
      }
    }
    
    
  • u_txt_4

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_4 {
      font-size: 1.6em;
      font-weight: bold;
      line-height: 2;
      color: $color_11;
      @include mq_max_768 {
        font-size: 1.4em;
        line-height: 1.7;
      }
    }
    
    
  • u_txt_5

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_5 {
      font-size: 1.2em;
      line-height: 2;
      color: $color_5;
      @include mq_max_768 {
        font-size: 1em;
        line-height: 1.7;
      }
    }
    
    
  • u_txt_6

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_6 {
      font-size: 1.4em;
      line-height: 2;
      color: $color_5;
      @include mq_max_768 {
        font-size: 1em;
        line-height: 1.7;
      }
    }
    
    
  • u_txt_7

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_7 {
      font-size: 2em;
      font-weight: bold;
      line-height: 2;
      color: $color_2;
      @include mq_max_768 {
        font-size: 1.6em;
        line-height: 1.7;
      }
    }
    
    
  • u_txt_8

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_8 {
      font-size: 2em;
      font-weight: bold;
      line-height: 2;
      color: $color_11;
      @include mq_max_768 {
        font-size: 1.6em;
        line-height: 1.7;
      }
    }
    
    
  • u_txt_9

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_9 {
      font-size: 1.6em;
      line-height: 2;
      color: $color_14;
      @include mq_max_768 {
        font-size: 1.4em;
        line-height: 1.7;
      }
    }
    
    
  • u_txt_10

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    
    .u_txt_10 {
      font-size: 1.6em;
      line-height: 2;
      color: $color_4;
      @include mq_max_768 {
        font-size: 1.4em;
        line-height: 1.7;
        color: $color_14;
      }
    }
    
    

component(_component)

ボタン

アイコン

  • c_ico_1

    emmetのコードを入れます

  • c_ico_2

    emmetのコードを入れます

  • c_ico_3

    emmetのコードを入れます

  • c_ico_4

    emmetのコードを入れます

  • c_ico_5

    ビジネス

    emmetのコードを入れます

  • c_ico_6

    <div class="c_ico_6">
        <div class="left"><p class="tags"><?php echo $terms[0]->name;; // タームスラッグ?></p></div>
        <div class="right"><p class="date"><?php echo get_the_date('Y.m.d'); ?></p></div>
    </div>

    インタビュー

    2018/01/01

    emmetのコードを入れます

タイトル

  • c_ttl_1

    シリコンバレー発の
    オンライン英会話
    サービスで
    あなただけのレッスンを

  • c_ttl_2

    あなたに最適化された
    オーダーメイド授業

  • c_ttl_3

    24時間365日、
    あなたが受けたい時間に
    レッスンが受けられます

ページャー

  • c_pager_1

    emmetのコードを入れます

  • c_pager_2

    emmetのコードを入れます

  • c_pager_3

    emmetのコードを入れます

テーブル

  • c_table_1

    emmetのコードを入れます

  • c_table_2

    emmetのコードを入れます

  • c_table_3

    emmetのコードを入れます

input

  • c_input_1

    emmetのコードを入れます

  • c_input_2

    emmetのコードを入れます

  • c_input_3

    emmetのコードを入れます

c_select_1

  • c_select_1

    emmetのコードを入れます

  • c_select_2

    emmetのコードを入れます

  • c_select_3

    emmetのコードを入れます

c_textarea_1

  • c_textarea_1

    emmetのコードを入れます

  • c_textarea_2

    emmetのコードを入れます

  • c_textarea_3

    emmetのコードを入れます

c_radio_1

  • c_radio_1

    emmetのコードを入れます

  • c_radio_2

    emmetのコードを入れます

  • c_radio_3

    emmetのコードを入れます

c_checkbox_1

  • c_checkbox_1

    emmetのコードを入れます

  • c_checkbox_2

    emmetのコードを入れます

  • c_checkbox_3

    emmetのコードを入れます

c_formset_1

  • c_formset_1

    ※ご登録頂いた番号に体験レッスンのご予約についてご連絡します

    ※「利用規約」及び「個人情報保護方針」に同意の上お進みください。
    ※未成年の場合は、保護者の方の同意を得てください。

    emmetのコードを入れます

  • c_formset_2

    emmetのコードを入れます

  • c_formset_3

    emmetのコードを入れます