Styleguide

ID

Category

Namespace

All Colors

sw-ListBracketOrder

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

括弧で囲んだ順序リストです。

  1. リストです。リストです。リストです。リストです。
  2. リストです
.l-Wrapper
  ol.sw-ListBracketOrder
    li リストです。リストです。リストです。リストです。
    li リストです

リストを2から始める場合はstart属性をstart="2"のように指定します。CSSで表示する順序も属性値によって変更されます。

  1. リストです。リストです。リストです。リストです。
  2. リストです
.l-Wrapper
  ol.sw-ListBracketOrder(start="2")
    li リストです。リストです。リストです。リストです。
    li リストです

sw-ListNote

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

注釈用のリストです。米印やアスタリスクが表示されます。

  • 1つ目の注釈です1つ目の注釈です1つ目の注釈です1つ目の注釈です1つ目の注釈です
  • 2つ目の注釈です
  • This is the first comment. This is the first comment. This is the first comment.
  • This is the second comment.
.l-Wrapper
  ul.sw-ListNote
    li 1つ目の注釈です1つ目の注釈です1つ目の注釈です1つ目の注釈です1つ目の注釈です
    li 2つ目の注釈です

  div(lang="en")
    ul.sw-ListNote
      li This is the first comment. This is the first comment. This is the first comment.
      li This is the second comment.

sw-ListNoteOrder

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

注釈用のリストです。米印やアスタリスクが表示されます。

  1. 注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。
  2. 注釈です。
  • This is an annotation. This is an annotation. This is an annotation.
  • This is an annotation.
.l-Wrapper
  ol.sw-ListNoteOrder
    li 注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。
    li 注釈です。

  div(lang="en")
    ul.sw-ListNoteOrder
      li This is an annotation. This is an annotation. This is an annotation.
      li This is an annotation.

リストを2から始める場合はstart属性をstart="2"のように指定します。CSSで表示する順序も属性値によって変更されます。

  1. 注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。
  2. 注釈です。
  1. This is an annotation. This is an annotation. This is an annotation.
  2. This is an annotation.
.l-Wrapper
  ol.sw-ListNoteOrder(start="2")
    li 注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。
    li 注釈です。

  div(lang="en")
    ol.sw-ListNoteOrder(start="2")
      li This is an annotation. This is an annotation. This is an annotation.
      li This is an annotation.

sw-ListOrder

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

入れ子に対応した順序リストです。

  1. 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
  2. 入れ子に対応した順序リストです。
    1. 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
    2. 入れ子に対応した順序リストです。
.l-Wrapper
  ol.sw-ListOrder
    li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
    li 入れ子に対応した順序リストです。
      ol.sw-ListOrder_Child
        li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
        li 入れ子に対応した順序リストです。

リストを2から始める場合はstart属性をstart="2"のように指定します。CSSで表示する順序も属性値によって変更されます。

  1. 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
  2. 入れ子に対応した順序リストです。
    1. 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
    2. 入れ子に対応した順序リストです。
.l-Wrapper
  ol.sw-ListOrder(start="2")
    li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
    li 入れ子に対応した順序リストです。
      ol.sw-ListOrder_Child
        li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
        li 入れ子に対応した順序リストです。

sw-ListUnorder

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

順序をもたない並列なリストです。

  • リストです。
  • リストです。
    • リストです。
    • リストです。
.l-Wrapper
  ul.sw-ListUnorder
    li リストです。
    li リストです。
      ul.sw-ListUnorder_Child
        li リストです。
        li リストです。

sw-Table

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

ベーシックなテーブルです。

  • ヘッダー・ボディ・フッターといった、行の役割が分かっている場合は<thead>、<tbody>、<tfoot>タグを使って意味を明確にします。
  • <th>タグは見出しセルになりますが、その見出しセルがどの行や列に対応しているかを明確にするためにscope属性を指定します。scope="row"で同じ行の見出しであることを示し、scope="col"で同じ列の見出しであることを示します。
  • colspan属性とrowspan属性で複数のセルを結合することができますが、極力控えるようにします。 セルの結合はUAが解釈することが難しい機能で、特にスクリーンリーダーなどでうまく情報が伝えられない恐れがあります。1つの複雑なテーブルではなく、複数のシンプルなテーブルにできないか検討してください。
Table Header Table Header Table Header
Table Header Table Data Table Data
Table Header Table Data Table Data 
.l-Wrapper
  table.sw-Table
    thead
      tr
        th(scope="col") Table Header
        th(scope="col") Table Header
        th(scope="col") Table Header
    tbody
      tr
        th(scope="row") Table Header
        td Table Data
        td Table Data
      tr
        th(scope="row") Table Header
        td Table Data
        td Table Data

sw-TableWide

/src/assets/css/namespace/sitewide/_TableWide.scss
  • 横幅の広いテーブルで使用します。
  • テキストは自動的に改行されず、画面幅に収まりきらなくなると横スクロールで表示するようになります。
  • 改行は<br>で指定してください。
thead Table Header thead Table Header thead Table Header thead Table Header
tbody Table Header tbody Table Data tbody Table Data tbody Table Data
tbody Table Header tbody Table Data tbody Table Data tbody Table Data
tbody Table Header tbody Table Data tbody Table Data tbody Table Data 
.l-Wrapper
  .sw-TableWide
    table.sw-Table
      thead
        tr
          th(scope="col") thead Table Header
          th(scope="col") thead Table Header
          th(scope="col") thead Table Header
          th(scope="col") thead Table Header
      tbody
        tr
          th(scope="row") tbody Table Header
          td tbody Table Data
          td tbody Table Data
          td tbody Table Data
        tr
          th(scope="row") tbody Table Header
          td tbody Table Data
          td tbody Table Data
          td tbody Table Data
        tr
          th(scope="row") tbody Table Header
          td tbody Table Data
          td tbody Table Data
          td tbody Table Data