Nachiguro

メニュー

Device

html 要素に以下の class を指定することで、スマホ版と PC 版ごとに表示・非表示を指定できます。

例えば、以下のように書くと

サンプル1

サンプル2

サンプル3 

<p>
  サンプル1
</p>
<p class="if-phone-show">
  サンプル2
</p>
<p class="if-phone-hide">
  サンプル3
</p>

スマホから見たときは「サンプル1」と「サンプル2」が表示され、PC から見たときは「サンプル1」と「サンプル3」が表示されます。

また、これらの class を inline 要素に使用したいときは、以下のように .if-inline を指定します。

スリ
スリ 

<p>
  スリ
  <br class="if-phone-show if-phone-show--is_inline">
  スリ
</p>

スマホから見たときは「スリ」と「スリ」のあいだで改行して、PC から見たときは「スリ」と「スリ」のあいだで改行しません。

Align

文字の揃えを変更したいときに使用するUtilityです。

左寄せ
真ん中寄せ
右寄せ 
<div class="ncgr-align-left">
  左寄せ
</div>
<div class="ncgr-align-center">
  真ん中寄せ
</div>
<div class="ncgr-align-right">
  右寄せ
</div>

Border

要素にborderをつけたいときに使用するUtilityです。

全方位にborder
上にborder
右にborder
下にborder
左にborder 
<div class="ncgr-border">
  全方位にborder
</div>
<div class="ncgr-border-t">
  上にborder
</div>
<div class="ncgr-border-r">
  右にborder
</div>
<div class="ncgr-border-b">
  下にborder
</div>
<div class="ncgr-border-l">
  左にborder
</div>

Cursor

cursorを変更したいときに使用するUtilityです。

ponter
not-allowed 
<div class="ncgr-cursor-pointer">
  ponter
</div>
<div class="ncgr-cursor-not-allowed">
  not-allowed
</div>

Ellipsis

文章が要素からはみ出てしまう場合、このユーティリティを使用することで はみ出ている部分を三点リーダ（...）に省略することができます。

<div class="ncgr-selectbox" style="width:240px;">
  <label class="ncgr-selectbox__label">長い選択肢</label>
  <select id="tribe" name="tribe" class="ncgr-ellipsis">
    <option selected="selected" value="01">超ウルトラスーパーアルティメット長い選択肢①</option>
    <option value="02">超ウルトラスーパーアルティメット長い選択肢②</option>
    <option value="02">超ウルトラスーパーアルティメット長い選択肢③</option>
  </select>
  <i class="fas fa-caret-down"></i>
</div>

Hidden

要素を非表示にさせるユーティリティです。 JSで要素を表示させたり消したりするときに使います。

圧倒的非表示 
<div class="ncgr-is-hidden">
  圧倒的非表示
</div>

sr-only

アクセシビリティ向上のため、クローラーやスクリーンリーダーだけが読みに行けるようにしたい要素に使います。 （表示上は何も見えません。）

君、この文字が読めるのかい？ 
<div class="ncgr-is-sr-only">
  君、この文字が読めるのかい？
</div>

Transparent

ある要素のopacityを0にする時に使用します。 要素は消えますが、高さは残ります。

透明感 
<div class="ncgr-is-transparent">
  透明感
</div>

Visible

要素を表示させるユーティリティです。 JSで要素を表示させたり消したりするときに使います。

圧倒的表示 
<div class="ncgr-is-visible">
  圧倒的表示
</div>

Margin

要素にmarginをつけたいときに使用するUtilityです。 4, 8, 12, 16, 24, 48, 64からmarginの大きさを選びます。

全方位に4px
上に4px
右に4px
下に4px
左に4px 
<div class="ncgr-mar-4">
  全方位に4px
</div>
<div class="ncgr-mar-t-4">
  上に4px
</div>
<div class="ncgr-mar-r-4">
  右に4px
</div>
<div class="ncgr-mar-b-4">
  下に4px
</div>
<div class="ncgr-mar-l-4">
  左に4px
</div>

Padding

要素にpaddingをつけたいときに使用するUtilityです。 4, 8, 16, 24, 48, 64, 128からpaddingの大きさを選びます。

全方位に4px
上に4px
右に4px
下に4px
左に4px 
<div class="ncgr-pad-4">
  全方位に4px
</div>
<div class="ncgr-pad-t-4">
  上に4px
</div>
<div class="ncgr-pad-r-4">
  右に4px
</div>
<div class="ncgr-pad-b-4">
  下に4px
</div>
<div class="ncgr-pad-l-4">
  左に4px
</div>

Typography

テキストのスタイルを変更する際に使用します。

Normal
Bold
Italic
Label
Light
Large
Medium
Small
Primary
Danger
Success
<div class="ncgr-typography-normal">Normal</div>
<div class="ncgr-typography-bold">Bold</div>
<div class="ncgr-typography-italic">Italic</div>
<div class="ncgr-typography-label">Label</div>
<div class="ncgr-typography-secondary-label">Light</div>
<div class="ncgr-typography-large">Large</div>
<div class="ncgr-typography-medium">Medium</div>
<div class="ncgr-typography-small">Small</div>
<div class="ncgr-typography-primary">Primary</div>
<div class="ncgr-typography-danger">Danger</div>
<div class="ncgr-typography-success">Success</div>

Width

要素のwidthを任意の比率で上書きするときに使用するUtilityです。 例えば、ncgr-w-100を指定するとwidthは100%になります。

横幅100% 
<div class="ncgr-w-100" style="background-color: #fbca4d;">
  横幅100%
</div>

メニュー