WYSIWYG

Detail
Basic
Heading
Text
Link
Blockquote
Code
List
Table
Definition List
Figure
Variables
Mixins
Sources

Detail

WYSIWYG や Markdown から出力された「class 名の無いプレーンな HTML タグ」に対して、一括で装飾を施すエレメント CSS。Text・List・Table と近い見た目を簡単に作れます。

Basic

.wysiwyg をラッパーとして装飾を施したいエリアに設定します。

Selector	Description
`.wysiwyg`	WYSIWYG 装飾の起点として使うセレクター。

Heading

1番目に大きな見出し

2番目に大きな見出し

3番目に大きな見出し

4番目に大きな見出し

5番目に大きな見出し

6番目に大きな見出し

<div class="wysiwyg">
  <h1>1番目に大きな見出し</h1>
  <h2>2番目に大きな見出し</h2>
  <h3>3番目に大きな見出し</h3>
  <h4>4番目に大きな見出し</h4>
  <h5>5番目に大きな見出し</h5>
  <h6>6番目に大きな見出し</h6>
</div>

Selector	Description
`h1 ~ h6`	`.wysiwyg` 内で装飾される見出しタグ。

Text

WYSIWYGには、小さい文字・強調・イタリック・~~打ち消し線~~などのデフォルトスタイルが使えます。

<div class="wysiwyg">
  <p>WYSIWYGには、<small>小さい文字</small>・<strong>強調</strong>・<em>イタリック</em>・<del>打ち消し線</del>などのデフォルトスタイルが使えます。</p>
</div>

Selector	Description
`p`	`.wysiwyg` 内で装飾される段落タグ。
`small`	`.wysiwyg` 内で装飾されるひとまわり小さめのテキストタグ。
`strong`	`.wysiwyg` 内で装飾される強調タグ。表示はボールド。
`em`	`.wysiwyg` 内で装飾される強調タグ。表示はイタリック。
`del, s`	`.wysiwyg` 内で装飾される打ち消しタグ。

Link

.wysiwyg 内の a タグは自動的に下線リンク装飾となります。.wysiwyg に .is-link-reverse を付与するとホバーで下線が表示されるよう変更できます。

デフォルトは border-bottom プロパティが使われていますが、Option の $option-add-style-wysiwyg-link-border を false にすると、下線が text-decoration: underline; に切り替わります。

Link

Reverse

WYSIWYG内のアンカータグは自動的に装飾されます。下線効果は反転可能です。

<div class="wysiwyg">
  <p>WYSIWYG内の<a href="#">アンカータグ</a>は自動的に装飾されます。下線効果は反転可能です。</p>
</div>

Selector	Description
`a`	`.wysiwyg` 内で装飾されるアンカータグ。

Modifier	Description
`.is-link-reverse`	`.wysiwyg` に付与するとアンカーがホバーで下線表示されるようになります。

Blockquote

WYSIWYG内で引用のblockquoteタグを使った場合の装飾。

<div class="wysiwyg">
  <blockquote>WYSIWYG内で引用のblockquoteタグを使った場合の装飾。</blockquote>
</div>

Selector	Description
`blockquote`	`.wysiwyg` 内で装飾される引用タグ。

Code

WYSIWYG内にcodeを表示させる。

<div class="wysiwyg">
  <p>WYSIWYG内に<code>code</code>を表示させる。</p>
</div>

.my-css { color: red; }

<div class="wysiwyg">
  <pre><code>.my-css { color: red; }</code></pre>
</div>

Selector	Description
`code`	`.wysiwyg` 内で装飾されるコードタグ。
`pre`	`.wysiwyg` 内で装飾される整形済みテキストタグ。

List

Pattern

Unordered

Ordered

Other

Nested

リストはインデントしてテキストが折り返した場合に読みやすくする
リストはインデントしてテキストが折り返した場合に読みやすくする
リストはインデントしてテキストが折り返した場合に読みやすくする
リストはインデントしてテキストが折り返した場合に読みやすくする

<div class="wysiwyg">
  <ul>
    <li class="item">リストはインデントしてテキストが折り返した場合に読みやすくする</li>
    <li class="item">リストはインデントしてテキストが折り返した場合に読みやすくする</li>
    <li class="item">リストはインデントしてテキストが折り返した場合に読みやすくする</li>
    <li class="item">リストはインデントしてテキストが折り返した場合に読みやすくする</li>
  </ul>
</div>

Selector	Description
`ul`	`.wysiwyg` 内で装飾される順番なしリストタグ。
`ol`	`.wysiwyg` 内で装飾される順番ありリストタグ。
`li`	`.wysiwyg` 内で装飾されるリストアイテムタグ。

Table

見出しセル	見出しセル	見出しセル	見出しセル
データセル	データセル	データセル	データセル
データセル	データセル	データセル	データセル

<div class="wysiwyg">
  <table>
    <thead>
      <tr>
        <th>見出しセル</th>
        <th>見出しセル</th>
        <th>見出しセル</th>
        <th>見出しセル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
      <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
    </tbody>
  </table>
</div>

Selector	Description
`table`	`.wysiwyg` 内で装飾されるテーブルタグ。
`th`	`.wysiwyg` 内で装飾される見出しセルタグ。
`td`	`.wysiwyg` 内で装飾されるデータセルタグ。

Definition List

定義リストタイトル: これは定義リスト。物事、領域、何かについての意味の正確な文章や説明です。
定義リストタイトル: これは定義リスト。物事、領域、何かについての意味の正確な文章や説明です。
定義リストタイトル: これは定義リスト。物事、領域、何かについての意味の正確な文章や説明です。
定義リストタイトル: これは定義リスト。物事、領域、何かについての意味の正確な文章や説明です。

<div class="wysiwyg">
  <dl>
    <dt>定義リストタイトル</dt>
    <dd>これは定義リスト。物事、領域、何かについての意味の正確な文章や説明です。</dd>
    <dt>定義リストタイトル</dt>
    <dd>これは定義リスト。物事、領域、何かについての意味の正確な文章や説明です。</dd>
    <dt>定義リストタイトル</dt>
    <dd>これは定義リスト。物事、領域、何かについての意味の正確な文章や説明です。</dd>
    <dt>定義リストタイトル</dt>
    <dd>これは定義リスト。物事、領域、何かについての意味の正確な文章や説明です。</dd>
  </dl>
</div>

Selector	Description
`dl`	`.wysiwyg` 内で装飾される定義リストタグ。
`dt`	`.wysiwyg` 内で装飾される定義語タグ。
`dd`	`.wysiwyg` 内で装飾される定義説明タグ。

Figure

MUSIBii site in dark theme — MUSUBiiのダークテーマ

<div class="wysiwyg">
  <figure>
    <img src="https://i.gyazo.com/a21c7b01996b7640ff84a1d6788135ea.png" alt="MUSIBii site in dark theme">
    <figcaption>MUSUBiiのダークテーマ</figcaption>
  </figure>
</div>

Selector	Description
`figure`	`.wysiwyg` 内で装飾されるキャプション付きの図表タグ。
`figcaption`	`.wysiwyg` 内で装飾される図表のキャプションタグ。

Variables

CSS Variables

false

true

Name

Default Value

Compiled Value

Name
$selector-wysiwyg
Default Value
.wysiwyg
Compiled Value
.wysiwyg
Name
$selector-wysiwyg-h1
Default Value
h1
Compiled Value
h1
Name
$selector-wysiwyg-h2
Default Value
h2
Compiled Value
h2
Name
$selector-wysiwyg-h3
Default Value
h3
Compiled Value
h3
Name
$selector-wysiwyg-h4
Default Value
h4
Compiled Value
h4
Name
$selector-wysiwyg-h5
Default Value
h5
Compiled Value
h5
Name
$selector-wysiwyg-h6
Default Value
h6
Compiled Value
h6
Name
$selector-wysiwyg-p
Default Value
p
Compiled Value
p
Name
$selector-wysiwyg-small
Default Value
small
Compiled Value
small
Name
$selector-wysiwyg-strong
Default Value
strong
Compiled Value
strong
Name
$selector-wysiwyg-em
Default Value
em
Compiled Value
em
Name
$selector-wysiwyg-del
Default Value
del, s
Compiled Value
del, s
Name
$selector-wysiwyg-a
Default Value
a
Compiled Value
a
Name
$selector-wysiwyg-blockquote
Default Value
blockquote
Compiled Value
blockquote
Name
$selector-wysiwyg-pre
Default Value
pre
Compiled Value
pre
Name
$selector-wysiwyg-code
Default Value
code
Compiled Value
code
Name
$selector-wysiwyg-ul
Default Value
ul
Compiled Value
ul
Name
$selector-wysiwyg-ol
Default Value
ol
Compiled Value
ol
Name
$selector-wysiwyg-li
Default Value
li
Compiled Value
li
Name
$selector-wysiwyg-table
Default Value
table
Compiled Value
table
Name
$selector-wysiwyg-th
Default Value
th
Compiled Value
th
Name
$selector-wysiwyg-td
Default Value
td
Compiled Value
td
Name
$selector-wysiwyg-dl
Default Value
dl
Compiled Value
dl
Name
$selector-wysiwyg-dt
Default Value
dt
Compiled Value
dt
Name
$selector-wysiwyg-dd
Default Value
dd
Compiled Value
dd
Name
$selector-wysiwyg-hr
Default Value
hr
Compiled Value
hr
Name
$selector-wysiwyg-figure
Default Value
figure
Compiled Value
figure
Name
$selector-wysiwyg-figcaption
Default Value
figcaption
Compiled Value
figcaption
Name
$modifier-wysiwyg-link-reverse
Default Value
.is-link-reverse
Compiled Value
.is-link-reverse
Name
$wysiwyg-heading-font-weight
Default Value
$font-weight-strong
Compiled Value
700
Name
$wysiwyg-h1-font-size
Default Value
$font-size-xxl
Compiled Value
200%
Name
$wysiwyg-h2-font-size
Default Value
$font-size-xl
Compiled Value
150%
Name
$wysiwyg-h3-font-size
Default Value
$font-size-lg
Compiled Value
125%
Name
$wysiwyg-h4-font-size
Default Value
$font-size-md
Compiled Value
100%
Name
$wysiwyg-h5-font-size
Default Value
$font-size-sm
Compiled Value
87.5%
Name
$wysiwyg-h6-font-size
Default Value
$font-size-xs
Compiled Value
75%
Name
$wysiwyg-text-line-height
Default Value
$line-height-xl
Compiled Value
1.9
Name
$wysiwyg-small-font-size
Default Value
$font-size-sm
Compiled Value
87.5%
Name
$wysiwyg-strong-font-weight
Default Value
$font-weight-strong
Compiled Value
700
Name
$wysiwyg-link-border-bottom-width
Default Value
$global-border-width
Compiled Value
1px
Name
$wysiwyg-link-border-bottom-style
Default Value
solid
Compiled Value
solid
Name
$wysiwyg-link-color
Default Value
$convert-primary-strong
Compiled Value
#37b0be
Name
$wysiwyg-blockquote-background-color
Default Value
$convert-background-2
Compiled Value
whitesmoke
Name
$wysiwyg-blockquote-border-left-width
Default Value
0.5em
Compiled Value
0.5em
Name
$wysiwyg-blockquote-border-left-color
Default Value
$convert-background-alpha
Compiled Value
rgba(0, 0, 0, 0.05)
Name
$wysiwyg-blockquote-border-radius
Default Value
$radius-xs
Compiled Value
2px
Name
$wysiwyg-blockquote-padding
Default Value
1.5em
Compiled Value
1.5em
Name
$wysiwyg-code-padding
Default Value
0.2em 0.5em
Compiled Value
0.2em 0.5em
Name
$wysiwyg-code-background-color
Default Value
$convert-background-alpha
Compiled Value
rgba(0, 0, 0, 0.05)
Name
$wysiwyg-code-border-radius
Default Value
$radius-xs
Compiled Value
2px
Name
$wysiwyg-code-color
Default Value
$convert-code-color
Compiled Value
#5d69a8
Name
$wysiwyg-code-font-size
Default Value
$font-size-sm
Compiled Value
87.5%
Name
$wysiwyg-code-font-family
Default Value
$font-mono
Compiled Value
Menlo, Monaco, Consolas, Liberation Mono, Courier New, Meiryo, monospace, serif
Name
$wysiwyg-pre-background-color
Default Value
$convert-background-2
Compiled Value
whitesmoke
Name
$wysiwyg-pre-border-radius
Default Value
$radius-xs
Compiled Value
2px
Name
$wysiwyg-pre-color
Default Value
$convert-code-color
Compiled Value
#5d69a8
Name
$wysiwyg-pre-font-family
Default Value
$font-mono
Compiled Value
Menlo, Monaco, Consolas, Liberation Mono, Courier New, Meiryo, monospace, serif
Name
$wysiwyg-pre-white-space
Default Value
pre
Compiled Value
pre
Name
$wysiwyg-pre-code-padding
Default Value
1.25em 1.5em
Compiled Value
1.25em 1.5em
Name
$wysiwyg-list-margin-left
Default Value
1.5em
Compiled Value
1.5em
Name
$wysiwyg-list-unordered-style-type
Default Value
circle
Compiled Value
circle
Name
$wysiwyg-list-ordered-style-type
Default Value
decimal
Compiled Value
decimal
Name
$wysiwyg-table-padding
Default Value
0.75em 1em
Compiled Value
0.75em 1em
Name
$wysiwyg-table-background-color
Default Value
$convert-background
Compiled Value
white
Name
$wysiwyg-table-border-width
Default Value
$global-border-width
Compiled Value
1px
Name
$wysiwyg-table-border-color
Default Value
$convert-border
Compiled Value
#d1d8dc
Name
$wysiwyg-table-th-font-weight
Default Value
$font-weight-normal
Compiled Value
400
Name
$wysiwyg-table-paint-background-color
Default Value
$convert-table-paint-background-color
Compiled Value
rgba(38, 121, 130, 0.7)
Name
$wysiwyg-table-paint-color
Default Value
$convert-table-paint-color
Compiled Value
white
Name
$wysiwyg-hr-border-width
Default Value
$global-border-width
Compiled Value
1px
Name
$wysiwyg-hr-border-style
Default Value
solid
Compiled Value
solid
Name
$wysiwyg-hr-border-color
Default Value
$convert-border
Compiled Value
#d1d8dc
Name
$wysiwyg-figure-text-align
Default Value
center
Compiled Value
center
Name
$wysiwyg-figcaption-margin-top
Default Value
$meter-sm
Compiled Value
12px
Name
$wysiwyg-figcaption-font-size
Default Value
$font-size-sm
Compiled Value
87.5%

Mixins

musubii-style-wysiwyg-heading()
musubii-style-wysiwyg-h1()
musubii-style-wysiwyg-h2()
musubii-style-wysiwyg-h3()
musubii-style-wysiwyg-h4()
musubii-style-wysiwyg-h5()
musubii-style-wysiwyg-h6()
musubii-style-wysiwyg-p()
musubii-style-wysiwyg-small()
musubii-style-wysiwyg-strong()
musubii-style-wysiwyg-em()
musubii-style-wysiwyg-del()
musubii-style-wysiwyg-text-link()
musubii-style-wysiwyg-text-link-reverse()
musubii-style-wysiwyg-text-blockquote()
musubii-style-wysiwyg-text-code()
musubii-style-wysiwyg-text-pre()
musubii-style-wysiwyg-text-pre-code()
musubii-style-wysiwyg-list()
musubii-style-wysiwyg-list-item()
musubii-style-wysiwyg-list-item-child()
musubii-style-wysiwyg-list-unordered-item()
musubii-style-wysiwyg-list-ordered-item()
musubii-style-wysiwyg-table()
musubii-style-wysiwyg-table-th()
musubii-style-wysiwyg-table-cell()
musubii-style-wysiwyg-dl()
musubii-style-wysiwyg-dt()
musubii-style-wysiwyg-dd()
musubii-style-wysiwyg-hr()
musubii-style-wysiwyg-figure()
musubii-style-wysiwyg-figcaption()

WYSIWYG

#Table of Contents

#Detail

#Basic

#Heading

1番目に大きな見出し

2番目に大きな見出し

3番目に大きな見出し

4番目に大きな見出し

5番目に大きな見出し

6番目に大きな見出し

#Text

#Link

#Blockquote

#Code

#List

#Table

#Definition List

#Figure

#Variables

#Mixins

#Sources

Table of Contents

Detail

Basic

Heading

Text

Link

Blockquote

Code

List

Table

Definition List

Figure

Variables

Mixins

Sources