SPECIAL -TVアニメ「Sランクモンスターの《ベヒーモス》だけど、猫と間違われてエルフ娘の騎士として暮らしてます」公式サイト-

タグサンプル

Update

2019.11.27	【Component】幅に合わせて指定位置で改行にSafariバグ発生時の代替方法を追加しました。
2019.02.28	【Component】角丸ボックスを追加しました。
2019.02.28	【Utility】color / background-color / border-colorを追加しました。
2019.02.28	【Utility】borderを追加しました。
2019.02.28	【Utility】margin / paddingにem単位を追加しました。
2018.12.26	【Utility】margin / paddingを1pxずつ用意しました。
2018.12.26	【Utility】font-sizeに%単位を追加しました。
2018.12.18	【Snippet】Type5用スタイルを追加しました。
2018.12.05	【Component】丸囲い数字リスト（ol）を追加しました。
2018.12.05	【Component】旧タイプの”～付きリスト”を削除しました。

見出し

使用例

見出しタイトル h2

h2、h3、h4、h5タグなどのhはheading（= 見出し）の略です。

見出しとは、新聞を始めとする様々な記事、文章において内容の要点を非常に短い言葉にまとめ、本文より大きな字で章や節の最初に置かれる言葉。

見出しタイトル h3

pタグのpはparagraphの略で、節や段落を意味します。

段落とは、文章において見やすくまとめられた文の塊。通常は複数の文によって構成される。段落の始めは、行頭から数文字の字下げをする。日本語の縦書きでは行頭が下がるので、「段落」という言葉が生まれた。パラグラフともいう。

見出しタイトル h4

記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文

見出しタイトル h5

<h2 class="articleHead">見出しタイトルh2</h2>
<h3 class="articleHead">見出しタイトルh3</h3>
<h4 class="articleHead">見出しタイトルh4</h4>
<h5 class="articleHead">見出しタイトルh5</h5>

テーブル（スマホ時縦積み）

使用例

【開催日時】	xxxx年xx月xx日(x)
【開催場所】	×××××××× ××××××××
【応募方法】	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe minima, enim odit eius, modi quae eveniet quo consequuntur neque minus deserunt non nemo est, odio voluptatem! Fugiat accusantium, quaerat voluptas!

<table class="c-listTable">
  <tr>
    <th>【開催日時】</th>
    <td>xxxx年xx月xx日(x)</td>
  </tr>
  <tr>
    <th>【開催場所】</th>
    <td>××××××××<br>××××××××</td>
  </tr>
  <tr>
    <th>【応募方法】</th>
    <td>××××××××××××××××××××××××</td>
  </tr>
</table>

幅に合わせて指定位置で改行

スマホ時に変な位置で改行されるのを防ぐためのもの
classを付ける要素は何でもいいが、直下のspanにのみ有効。
※Safariでのバグで改行位置がおかしくなる可能性があります。その場合は代替方法を試してみてください。

使用例

●●●●●●さん、 ●●●●●●さん、 ●●●●●●さん、 ●●●●●●さん、 ●●●●●●さん、 ●●●●●●さん、 ●●●●●●さん、 ●●●●●●さん

  <p class="c-inlineBlockWrap">
    <span>●●●●●●さん、</span>
    <span>●●●●●●さん、</span>
    <span>●●●●●●さん、</span>
    <span>●●●●●●さん、</span>
    <span>●●●●●●さん、</span>
    <span>●●●●●●さん、</span>
    <span>●●●●●●さん、</span>
    <span>●●●●●●さん</span>
  </p>

  <table class="c-listTable">
    <tr>
      <th>【開催日時】</th>
      <td>xxxx年xx月xx日(x)</td>
    </tr>
    <tr>
      <th>【開催場所】</th>
      <td>××××××××<br>××××××××</td>
    </tr>
      <th>【出演】</th>
      <td class="c-inlineBlockWrap">
        <span>●●●●●●さん、</span>
        <span>●●●●●●さん、</span>
        <span>●●●●●●さん、</span>
        <span>●●●●●●さん、</span>
        <span>●●●●●●さん、</span>
        <span>●●●●●●さん、</span>
        <span>●●●●●●さん、</span>
        <span>●●●●●●さん</span>
      </td>
    <tr>
      <th>【応募方法】</th>
      <td>××××××××××××××××××××××××</td>
    </tr>
  </table>

代替方法

親要素を自動改行なしにし、<wbr>または<br>で改行位置を明示的に示す。

※自動改行されないので、細かく改行位置を入れないと突き抜けます。iPhone5の幅でチェックが必要。

<wbr> : 改行"可能"位置

<br> : 改行位置

  <p class="u-ws-nw">●●●●●●さん、<wbr>●●●●●●さん、<wbr>●●●●●●さん、<wbr>●●●●●●さん、<wbr>●●●●●●さん、<wbr>●●●●●●さん、<wbr>●●●●●●さん、<wbr>●●●●●●さん
  </p>

横並びリスト

使用例

●●●●
▲▲▲▲
■■■■
××××
■■■■■■■■■■■■
××××
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
●●●●●●●●
××××

<ul class="c-horizontalList">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ul>

カスタムマーカーリスト

リストマーカーの任意設定が可能。
data-listMarkerの値(ダブルクォーテーションの中)がそのままリストマーカーになる。

※付きリスト、▼付きリスト、■付きリスト、●付きリストの代わりとなる。
タグ上でマーカーが分かりやすく変更しやすいためこちらを推奨。

※横並びリスト併用○

※リストマーカーは一文字のみ

使用例

●●●●
▲▲▲▲
■■■■
××××

<ul class="c-customMarkerList" data-listMarker="※">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ul>

●●●●
▲▲▲▲
■■■■
××××

<ul class="c-customMarkerList" data-listMarker="※">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li data-listMarker="＞">××××</li>
</ul>

●●●●
▲▲▲▲
■■■■
××××

<ul class="c-customMarkerList c-horizontalList" data-listMarker="◇">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ul>

円形付きリスト

文字ではなくブラウザのデフォルトスタイルのマーカーのため、カスタムマーカーリストでは実現できない。（・と●の中間くらいの大きさ）

※横並びリスト併用✕

使用例

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
××××××××××××××××

<ul class="c-discList">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ul>

中空円付きリスト

文字ではなくブラウザのデフォルトスタイルのマーカーのため、カスタムマーカーリストでは実現できない。（小さい○）

※横並びリスト併用✕

使用例

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
××××××××××××××××

<ul class="c-circleList">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ul>

順序付きリスト（ol）

Ordered Listの略で、順序のあるリストを表示する際に使用します。
（リスト項目の順序を変えると文書の意味が変わってしまうもの。曲順や手順、ランキングなど。）

※横並びリスト併用✕

使用例

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
××××××××××××××××

<ol>
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ol>

横並びリスト（ol）

使用例

●●●●
▲▲▲▲
■■■■
××××
■■■■■■■■■■■■
××××
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
●●●●●●●●
××××

<ol class="c-horizontalList">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ol>

丸囲い数字リスト（ol）

上のolの丸囲い文字バージョン
CSSで丸囲いをしているので崩れる可能性あり

※横並びリスト併用○

使用例

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
××××××××××××××××

<ol class="c-enclosedNumberList">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ol>

●●●●●●●●●●
▲▲▲▲▲
■■■■■■■■■■■■■■■■■
××××××××××××××××

<ol class="c-enclosedNumberList c-horizontalList">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ol>

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
××××××××××××××××

<ol class="c-enclosedNumberList c-enclosedNumberList--fill">
  <li>●●●●</li>
  <li>▲▲▲▲</li>
  <li>■■■■</li>
  <li>××××</li>
</ol>

Utility

わずかなスタイルの調整のための便利クラスなどを定義します。

命名規則は基本的に、「u-(属性)-(値)」とする。
属性、値の略し方は出来る限りEmmetの省略記法に準拠。

sp-only / pc-only

sp-only：幅899以下でのみ該当タグを表示（スマホ、タブレット縦）
pc-only：幅900以上でのみ該当タグを表示（PC、タブレット横）
div、p、imgのほかbrなど、ほとんどの要素に使用可能。

使用例

スマホのみ改行スマホのみ改行スマホのみ改行
スマホのみ改行スマホのみ改行

PCのみ改行PCのみ改行PCのみ改行PCのみ改行
PCのみ改行PCのみ改行

スマホのみ表示

PCのみ表示

<br class="sp-only">
<br class="pc-only">

<p class="sp-only"></p>

<p class="pc-only"></p>

font-size（フォントの大きさ）

どの単位がいいか分からない場合、pxか%を推奨。

font-sizeは子要素に継承されるため、親にclassをつければ子にも影響する。

※どの単位を使用しても、10px以下になる場合は10pxで表示されます。
（基本的にブラウザの最小フォントサイズがデフォルトで10pxです）

使用例

単位　px

pxは絶対値です。
単位の指定なしの場合、pxとなるようにしました。

<p class="u-fz-10"></p>      <!-- 10px -->
<p class="u-fz-11"></p>      <!-- 11px -->
<p class="u-fz-12"></p>      <!-- 12px -->
︙
<p class="u-fz-64"></p>      <!-- 64px -->

単位　%

%は親要素を基準とした相対値。
perを付けます。

<p class="u-fz-5per"></p>　    <!-- 5% -->
<p class="u-fz-10per"></p>　    <!-- 10% -->
︙
<p class="u-fz-95per"></p>　    <!-- 95% -->
<p class="u-fz-100per"></p>　    <!-- 100% -->
<p class="u-fz-105per"></p>　    <!-- 105% -->
︙
<p class="u-fz-300per"></p>　    <!-- 300% -->

単位　rem（応用）

remはルート要素(HTML要素)を基準とした相対値です。
小数点なしの表記です。（10倍表記）

<p class="u-fz-10rem"></p>　    <!-- 1rem -->
<p class="u-fz-11rem"></p>      <!-- 1.1rem -->
<p class="u-fz-12rem"></p>      <!-- 1.2rem -->
︙
<p class="u-fz-64rem"></p>      <!-- 6.4rem -->

font-weight（フォントの太さ）

フォントや環境によって用意されているウェイトが違うが、100～900の100刻みで指定する。
normal（= 400）やbold（= 700）でも可。
指定した太さが無い場合はそれ以下で一番太いサイズになる。

使用例

font-weight: normal = 通常のフォントウェイト。400に相当。

font-weight: bold = 太字のフォントウェイト。700に相当。

font-weight: bolder = 継承値よりも一段階細く設定。

font-weight: lighter = 継承値よりも一段階太く設定。

font-weight: 100

font-weight: 900

<p class="u-fw-n"></p>
<p class="u-fw-b"></p>
<p class="u-fw-br"></p>
<p class="u-fw-lr"></p>

<p class="u-fw-1"></p>
<p class="u-fw-9"></p>

margin / padding

0 - 100px は1pxずつ(1,2,3,4,5,…99,100)
105 - 500pxは5pxずつ(105,110,115,…495,500)

単位　px

使用例

margin : 0;

margin : 30px;

margin-top : 30px;

margin-bottom : 30px;

margin-right : 30px;

margin-left : 30px;

padding : 0;

padding : 30px;

padding-top : 30px;

padding-bottom : 30px;

padding-right : 30px;

padding-left : 30px;

<div class="u-m-1em">margin : 1em;</div>
<div class="u-mt-1em">margin-top : 1em;</div>
<div class="u-mb-1em">margin-bottom : 1em;</div>
<div class="u-mr-1em">margin-right : 1em;</div>
<div class="u-ml-1em">margin-left : 1em;</div>

<div class="u-p-0">padding : 0;</div>
<div class="u-p-30">padding : 30px;</div>
<div class="u-pt-30">padding-top : 30px;</div>
<div class="u-pb-30">padding-bottom : 30px;</div>
<div class="u-pr-30">padding-right : 30px;</div>
<div class="u-pl-30">padding-left : 30px;</div>

単位　em

1em = その要素の1文字分のサイズ。
1em～5emまであります。

margin : 1em;

margin-top : 1em;

margin-bottom : 1em;

margin-right : 1em;

margin-left : 1em;

padding : 1em;

padding-top : 1em;

padding-bottom : 1em;

padding-right : 1em;

padding-left : 1em;

<div class="u-m-1em">margin : 1em;</div>
<div class="u-mt-1em">margin-top : 1em;</div>
<div class="u-mb-1em">margin-bottom : 1em;</div>
<div class="u-mr-1em">margin-right : 1em;</div>
<div class="u-ml-1em">margin-left : 1em;</div>

<div class="u-p-1em">padding : 1em;</div>
<div class="u-pt-1em">padding-top : 1em;</div>
<div class="u-pb-1em">padding-bottom : 1em;</div>
<div class="u-pr-1em">padding-right : 1em;</div>
<div class="u-pl-1em">padding-left : 1em;</div>

border

全方向を指定するborderの他、border-top、border-right、border-bottom、border-leftとあります。
それぞれ線幅1px～10pxまで。
色の指定は後述のcolorまたはborder-colorと併用してください。
border-colorの指定がないと、自動的に文字色と同じ色になります。

使用例

border : 2px;

border-top : 1px;

border-bottom : 5px;

border-right : 3px;

border-left : 10px;

<div class="u-bd-2">border : 2px;</div>
<div class="u-bdt-1">border-top : 1px;</div>
<div class="u-bdb-5">border-bottom : 5px;</div>
<div class="u-bdr-3">border-right : 3px;</div>
<div class="u-bdl-10">border-left : 10px;</div>

使用例（カラー、padding併用）

border : 2px;

border-bottom : 5px;

border-left : 10px;

<div class="u-bd-2 u-p-6 u-bdc-red500">border : 2px; </div>
<div class="u-bdt-1 u-pb-6 u-c-blue900">border-top : 1px;</div>
<div class="u-bdl-10 u-pl-6 u-bdc-green700">border-left : 10px;</div>

border-radius

角丸にする指定です。
border、border-color、background-color等と併用してください。
1 - 25px は1pxずつ(1,2,3,4,5,…24,25)
25 - 50pxは5pxずつ(25,30,35,…45,50)

使用例

border-radius : 6px;

border-radius : 50px;

<div class="u-bdrs-6">border-radius : 6px;</div>
<div class="u-bdrs-50">border-radius : 50px;</div>

color / background-color/ border-color

Googleのマテリアルデザインカラーパレットを元にしています。
A付きの番号はアクセントカラー用なので彩度高めです。
MATERIAL DESIGN - The color system

	red	pink	purple	deepPurple	indigo	blue	lightBlue	cyan	teal	green	lightGreen	lime	yellow	amber	orange	deepOrange	brown	gray	blueGray
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

カラーサンプル

文字色　color

<div class="u-c-red500">テキストテキスト</div>

背景色　background-color

適当な文字色、paddingとの併用をおすすめします。

<div class="u-bg-red500 u-c-fff u-p-1em">テキストテキスト</div>

線色　border-color

borderとの併用が必須です。
また、適当なpaddingとの併用をおすすめします。

<div class="u-bdc-red500 u-bd-2 u-p-1em">テキストテキスト</div>

Snippet

角丸ボックス

Utilityクラスを使用したボックス。
これをベースにカスタマイズして使用してください。

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="u-p-1em u-bd-2 u-bdc-gray400 u-bg-gray100 u-bdrs-6 u-mt-50 u-mb-50 u-fz-12rem u-c-000">
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>

u-p-1em = padding
u-bd-2 = border
u-bdc-gray400 = border-color
u-bg-gray100 = background-color
u-bdrs-6 = border-radius
u-mt-25 = margin-top
u-mb-25 = margin-bottom
u-fz-12rem = font-size
u-c-000 = color

Type5用スタイル

styleをコピーして、コンテンツ＞記事本文に貼り付けて使用する。
記事ブロックに書くと後でスタイルを探しにくくなるのでおすすめしない。

.line_XXの数字は記事ブロック番号を入れる

※非公開ブロックをスキップして上からブロック番号を付けるため、デモサイトと公開サイトでline_XXの番号が変わることがあります。
必ず公開サイトで確認してください。

※他のページに影響を与えないため、デザイン管理などのCSSではなく、記事内のHTMLに<style>～</style>をコピペしてください。

スマホ1カラム、PC・タブレット2カラム

<style>
@media screen and (min-width: 600px){
  .line_03 .tp5 {
    display: flex;
    flex-wrap: wrap;
    margin-right: -16px;
  }

  .line_03 .tp5>li {
    width: calc(100% / 2 - 16px);
    margin: 0 16px 0 0;
  }
}
</style>

スマホ・タブレット2カラム、PC3カラム

<style>
.line_05 .tp5 {
  display: flex;
  flex-wrap: wrap;
  margin-right: -16px;
}

.line_05 .tp5>li {
  width: calc(100% / 2 - 16px);
  margin: 0 16px 0 0;
}

@media screen and (min-width: 900px){
  .line_05 .tp5>li {
    width: calc(100% / 3 - 16px);
  }
}
</style>

常に2カラム

<style>
.line_07 .tp5 {
  display: flex;
  flex-wrap: wrap;
  margin-right: -16px;
}

.line_07 .tp5>li {
  width: calc(100% / 2 - 16px);
  margin: 0 16px 0 0;
}
</style>

タグサンプル

Component

Utility

Snippet

Update

見出し

見出しタイトル h2

見出しタイトル h3

見出しタイトル h4

見出しタイトル h5

テーブル（スマホ時縦積み）

幅に合わせて指定位置で改行

横並びリスト

カスタムマーカーリスト

円形付きリスト

中空円付きリスト

順序付きリスト（ol）

横並びリスト（ol）

丸囲い数字リスト（ol）

Utility

sp-only / pc-only

font-size（フォントの大きさ）

単位 px

単位 %

単位 rem（応用）

font-weight（フォントの太さ）

margin / padding

単位 px

単位 em

border

border-radius

color / background-color/ border-color

文字色 color

背景色 background-color

線色 border-color

Snippet

角丸ボックス

Type5用スタイル

スマホ1カラム、PC・タブレット2カラム

スマホ・タブレット2カラム、PC3カラム

常に2カラム

単位　px

単位　%

単位　rem（応用）

単位　px

単位　em

文字色　color

背景色　background-color

線色　border-color