Styleguide

ID

Category

Namespace

All Colors

sw-Map

/src/assets/css/namespace/sitewide/_Map.scss

Google Mapsをレスポンシブ対応させます。デフォルトで16:9で表示されます。

マップにキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Map
    .sw-Map_Map.
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25933.98363493959!2d139.745433!3d35.658581000000005!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1505663238967" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    p.sw-Map_Text マップにキャプション（短い説明文）をつけます。

キャプションを中央揃えにします。

マップにキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Map
    .sw-Map_Map.
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25933.98363493959!2d139.745433!3d35.658581000000005!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1505663238967" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    p.sw-Map_Text.-center マップにキャプション（短い説明文）をつけます。

キャプションを右揃えにします。

マップにキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Map
    .sw-Map_Map.
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25933.98363493959!2d139.745433!3d35.658581000000005!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1505663238967" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    p.sw-Map_Text.-right マップにキャプション（短い説明文）をつけます。

sw-Video

/src/assets/css/namespace/sitewide/_Video.scss

Youtubeなどの動画をレスポンシブ対応させます。デフォルトで16:9で表示されます。

動画にキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Video
    .sw-Video_Video.
      <iframe width="560" height="315" src="https://www.youtube.com/embed/1OKZOV-iLj4"></iframe>
    p.sw-Video_Text 動画にキャプション（短い説明文）をつけます。

キャプションを中央揃えにします。

動画にキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Video
    .sw-Video_Video.
      <iframe width="560" height="315" src="https://www.youtube.com/embed/1OKZOV-iLj4"></iframe>
    p.sw-Video_Text.-center 動画にキャプション（短い説明文）をつけます。

キャプションを右揃えにします。

動画にキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Video
    .sw-Video_Video.
      <iframe width="560" height="315" src="https://www.youtube.com/embed/1OKZOV-iLj4"></iframe>
    p.sw-Video_Text.-right 動画にキャプション（短い説明文）をつけます。