JFマリンバンク長崎しんぎょれん公式ページです。店舗情報・ATM案内・お知らせなどを公開しております。

design-sample

  • HOME »
  • design-sample

Text-Color

classに次のワードを指定することで、色を付けることができます。

text-red

text-blue

text-green

text-yellow

text-white

text-glay

text-red-light

text-blue-light

text-green-light

text-yellow-light

text-glay-light

<p class="text-red">text-red</p> <p class="text-blue">text-blue</p> <p class="text-green">text-green</p> <p class="text-yellow">text-yellow</p> <p class="text-white bg-glay">text-white</p> <p class="text-glay">text-glay</p> <p class="text-red-light">text-red-light</p> <p class="text-blue-light">text-blue-light</p> <p class="text-green-light">text-green-light</p> <p class="text-yellow-light">text-yellow-light</p> <p class="text-glay-light">text-glay-light</p>

Head

classを与えることなく、次のデザインで表示されます。

h1

h2

h3

h4

h5
h6
<h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6>

Background-Color

classに次のワードを指定することで、背景の色を変えることができます。

bg-red

bg-blue

bg-green

bg-yellow

bg-white

bg-glay

bg-red-light

bg-blue-light

bg-green-light

bg-yellow-light

bg-glay-light

bg-grad-red

bg-grad-blue

bg-grad-green

bg-grad-yellow

bg-grad-glay

<p class="bg-red">bg-red</p> <p class="bg-blue">bg-blue</p> <p class="bg-green">bg-green</p> <p class="bg-yellow">bg-yellow</p> <p class="bg-white">bg-white</p> <p class="bg-glay">bg-glay</p> <p class="bg-red-light">bg-red-light</p> <p class="bg-blue-light">bg-blue-light</p> <p class="bg-green-light">bg-green-light</p> <p class="bg-yellow-light">bg-yellow-light</p> <p class="bg-glay-light">bg-glay-light</p> <p class="bg-grad-red">bg-grad-red</p> <p class="bg-grad-blue">bg-grad-blue</p> <p class="bg-grad-green">bg-grad-green</p> <p class="bg-grad-yellow">bg-grad-yellow</p> <p class="bg-grad-glay">bg-grad-glay</p>

Table

classに次のワードを指定することで、テーブルをデザインできます。
Header1 Header2 Header3 Header4
Row1 Value Value Value
Row2 Value Value Value
Header1 Header2 Header3 Header4
Row1 Value Value Value
Row2 Value Value Value
Header1 Header2 Header3 Header4
Row1 Value Value Value
Row2 Value Value Value
Header1 Header2 Header3 Header4
Row1 Value Value Value
Row2 Value Value Value
<table class="primary"> <tbody> <tr> <th>・・・</th> <th>・・・</th> </tr> <tr> <th>・・・</th> <td>・・・</td> </tr> <tr> <th>・・・</th> <td>・・・</td> </tr> </tbody> </table> <table class="table-hover text-left"> ・・・ </table> <table class="table-border-none table-hover text-right"> ・・・ </table> <table class="table-border-bottom text-center"> ・・・ </table>

Width

classに次のワードを指定することで、コンテンツのサイズを変更することができます。

width-10

width-20

width-30

width-40

width-50

width-60

width-70

width-80

width-90

width-100

<p class="bg-red width-10">width-10</p> <p class="bg-red width-20">width-20</p> <p class="bg-red width-30">width-30</p> <p class="bg-red width-40">width-40</p> <p class="bg-red width-50">width-50</p> <p class="bg-red width-60">width-60</p> <p class="bg-red width-70">width-70</p> <p class="bg-red width-80">width-80</p> <p class="bg-red width-90">width-90</p> <p class="bg-red width-100">width-100</p>

List-items

classに次のワードを指定することで、リストのアイコンを変更できます。
fish arrow pen check
icon-1
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
icon-2
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
<ul class="list-icon list-fish-1-blue"> <li>List item.</li> </ul> <ul class="list-icon list-fish-1-glay"> <li>List item.</li> </ul> <ul class="list-icon list-fish-2-blue"> <li>List item.</li> </ul> <ul class="list-icon list-fish-2-glay"> <li>List item.</li> </ul> <ul class="list-icon list-arrow-1-blue"> <li>List item.</li> </ul> <ul class="list-icon list-arrow-1-glay"> <li>List item.</li> </ul> <ul class="list-icon list-arrow-2-blue"> <li>List item.</li> </ul> <ul class="list-icon list-arrow-2-glay"> <li>List item.</li> </ul> <ul class="list-icon list-pen-1-blue"> <li>List item.</li> </ul> <ul class="list-icon list-pen-1-glay"> <li>List item.</li> </ul> <ul class="list-icon list-pen-2-blue"> <li>List item.</li> </ul> <ul class="list-icon list-pen-2-glay"> <li>List item.</li> </ul> <ul class="list-icon list-check-1-blue"> <li>List item.</li> </ul> <ul class="list-icon list-check-1-glay"> <li>List item.</li> </ul> <ul class="list-icon list-check-2-blue"> <li>List item.</li> </ul> <ul class="list-icon list-check-2-glay"> <li>List item.</li> </ul>

Text-alignment

classに次のワードを指定することで、ラインマーカーを引くことができます。

Here the line is drawn.

Here the line is drawn.

Here the line is drawn.

Here the line is drawn.

Here the line is drawn.

<p>Here the <span class="marker-yellow">line</span> is drawn.</p> <p>Here the <span class="marker-green">line</span> is drawn.</p> <p>Here the <span class="marker-blue">line</span> is drawn.</p> <p>Here the <span class="marker-red">line</span> is drawn.</p> <p>Here the <span class="marker-glay">line</span> is drawn.</p>

Text-alignment

classに次のワードを指定することで、文字の位置を変更できます。

text-center

text-right

text-left

<p class="bg-green text-center">text-center</p> <p class="bg-yellow text-right">text-right</p> <p class="bg-red text-left">text-left</p>

Hover

classに次のワードを指定することで、マウスホバー時の動作を指定できます。

hover-translate

hover-shadow

hover-spin

<p class="bg-glay round hover-translate">hover-translate</p> <p class="bg-yellow round hover-shadow">hover-shadow</p>

Button

classに次のワードを指定することで、ボタンとして表示することができます。

button

inline-button like this.

<a href="#" class="button width-100">button</a> <p class="va-middle"><a href="#" class="button bg-grad-blue">inline-button</a> like this.</p>

Padding

classに次のワードを指定することで、余白の大きさを変えることができます。

none small middle pad-large

<a href="#" class="button pad-none">none</a> <a href="#" class="button pad-small">small</a> <a href="#" class="button pad-middle">middle</a> <a href="#" class="button pad-large">pad-large</a>

Margin

classに次のワードを指定することで、要素の幅を変えることができます。

Margin bottom

Margin top

Margin right

Margin left

<p class="bdr-all margin-bottom">Margin bottom</p> <p class="bdr-all margin-top">Margin top</p> <p class="bdr-all margin-right">Margin right</p> <p class="bdr-all margin-left">Margin left</p>

Label

classに次のワードを指定することで、ラベルを作ることができます。

labellabel

<span class="label">label</span>messages. <span class="label bg-blue">label bg-blue</span>messages.

Min Width

classに次のワードを指定することで、幅の最小値を指定することができます。

anone

amin-width-5

abcdefmin-width-5

abcdefghijklmnomin-width-5

samplemin-width-10

samplemin-width-15

samplemin-width-20

samplemin-width-25

samplemin-width-30

samplemin-width-35

samplemin-width-40

samplemin-width-45

samplemin-width-50

<span class="label">a</span>none <span class="label min-width-5">a</span>min-width-5 <span class="label min-width-5">abcdef</span>min-width-5 <span class="label min-width-5">abcdefghijklmno</span>min-width-5 <span class="label min-width-10">sample</span>min-width-10 <span class="label min-width-15">sample</span>min-width-15 <span class="label min-width-20">sample</span>min-width-20 <span class="label min-width-25">sample</span>min-width-25 <span class="label min-width-30">sample</span>min-width-30 <span class="label min-width-35">sample</span>min-width-35 <span class="label min-width-40">sample</span>min-width-40 <span class="label min-width-45">sample</span>min-width-45 <span class="label min-width-50">sample</span>min-width-50

Border

classに次のワードを指定することで、線を引くことができます。

bdr-all

bdr-all

bdr-bottom

bdr-top

<p class="bdr-all">bdr-all</p> <span class="bdr-all">bdr-all</span> <p class="bdr-bottom">bdr-bottom</p> <p class="bdr-top">bdr-top</p>

Glaphic-icon

アイコンをグラフィックとして挿入することができます。

Rainbo pointing Rainbo raising fin Rainbo aspect Rainbo frontal inclination Rainbo front

<span class="icon rainbo-1 rainbo-sm"></span>Rainbo pointing <span class="icon rainbo-2 rainbo-sm"></span>Rainbo raising fin <span class="icon rainbo-3 rainbo-sm"></span>Rainbo aspect <span class="icon rainbo-4 rainbo-sm"></span>Rainbo frontal inclination <span class="icon rainbo-5 rainbo-sm"></span>Rainbo front
サイズを変更することもできます。

minimum small middle large maximum Specify size from style

<span class="icon rainbo-1 rainbo-xs"></span>minimum <span class="icon rainbo-1 rainbo-sm"></span>small <span class="icon rainbo-1 rainbo-md"></span>middle <span class="icon rainbo-1 rainbo-lg"></span>large <span class="icon rainbo-1 rainbo-xl"></span>maximum <span class="icon rainbo-1" style="width: 200px; height:200px;"></span>Specify size from style
左右を反転することもできます。

normal horizontal Flip horizontal

<span class="icon rainbo-1 rainbo-md"></span>normal horizontal <span class="icon rainbo-1 rainbo-md rainbo-reverse"></span>Flip horizontal

Animation

アニメーション効果を与えることができます。

Rotate clockwise Rotate anti-clockwise Enlarge Reduce

<span class="icon rainbo-1 rainbo-sm hover-rotate-forward"></span>Rotate clockwise <span class="icon rainbo-2 rainbo-sm hover-rotate-reversal"></span>Rotate anti-clockwise <span class="icon rainbo-3 rainbo-sm hover-scale-large"></span>Enlarge <span class="icon rainbo-4 rainbo-sm hover-scale-small"></span>Reduce

Vertical-align

垂直方向を指定することができます。

This message is displayed in middle.

This message is displayed in top.

This message is displayed in bottom.

table-middle

Header1 Header2 Header3
Row1

Value1

Value1

Value1

Value2
Row2 Value3 Value4

table-top

Header1 Header2 Header3
Row1

Value1

Value1

Value1

Value2
Row2 Value3 Value4

table-bottom

Header1 Header2 Header3
Row1

Value1

Value1

Value1

Value2
Row2 Value3 Value4
<p class="text-large va-middle"> <span>This message is displayed in middle.</span> <span class="icon rainbo-2 rainbo-xs"></span> </p> <p class="text-large va-top"> <span>This message is displayed in top.</span> <span class="icon rainbo-2 rainbo-xs"></span> </p> <p class="text-large va-bottom"> <span>This message is displayed in bottom.</span> <span class="icon rainbo-2 rainbo-xs"></span> </p> <table class="primary va-middle"> <tbody> <tr> <th>・・・</th> <th>・・・</th> </tr> <tr> <th>・・・</th> <td> <p>・・・</p> <p>・・・</p> </td> </tr> </tbody> </table> <table class="primary va-top"> ・・・ </table> <table class="primary va-bottom"> ・・・ </table>

Others

classに次のワードを指定することで、様々な効果をつけることができます。

round

shadow

text-large

text-small

What do you think of Happy?

<p class="bg-blue round">round</p> <p class="bg-yellow shadow">shadow</p> <p class="text-large">text-large</p> <p class="text-small">text-small</p> <p> <span class="text-small">What do you</span> think of <span class="text-large">Happy?</span> </p>

Sample

組み合わせてテストしてみます。

SatSaturday

SunSunday

Link

This is a test message.

For example, if you want to annotate, you can bold it like this and color it like this.

<div class="bdr-all shadow pad-large margin-bottom"> <p> <span class="label bg-blue min-width-5">Sat</span>Saturday </p> <p class="bdr-bottom"> <span class="label bg-red min-width-5">Sun</span>Sunday </p> <a href="#" class="button hover-shadow bg-yellow text-large">Link</a> </div> <div class="bdr-all round pad-large text-center bg-glay-light"> <p>This is a test message.</p> <p> For example, if you want to annotate, <span class="text-large">you can bold it like this</span> and <span class="text-red">color it like this</span>. </p> </div>
PAGETOP
Copyright © JF長崎しんぎょれん All Rights Reserved.