コンポーネント参考 component
見出しタイトル head02head02 Sample
sectionタグとdiv.inrで余白をコントロール
通常仕様はこちらのパターンです。
head03 見出しタイトル
head04 見出しタイトル
head05 見出しタイトル
head06 見出しタイトル
head07 見出しタイトル
head08 見出しタイトル 普通の太字 Pタグでも可
ここに文章が入りますここに文章が入ります
brで改行しますbrで改行します
btm0、btm5、btm10、btm15のように5刻みで下の余白をコントロールできます。
sectionタグとdiv.inrで余白をコントロール
通常仕様はこちらのパターンです。
sectionタグとdiv.inrで余白をコントロール
背景グレーはこちらのパターンです。
テキスト＆リスト使用例 Inline text & List Pattern
通常テキストはpタグで括る。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
class="btm5" で下余白5px
class="btm10" で下余白10px
class="btm15" で下余白15px。同様に5刻みで調整可能。
class="spBtm10" 併用でスマートフォン時のみ下余白5px
class="center" でセンタリング
class="right" で右寄せ
class="red" で赤文字
class="green" で緑文字
class="bold" で太文字
spanタグでここだけ太文字やここだけ赤文字のような表現も可能です。
class="textLink"で色付きのテキストリンクです。
class="font13"小さな文字のスタイルです。
class="graySmall"こちらは注釈説明などに使う小さなグレー文字のスタイルです。
- ※リストタグは ul class="indList"でインデントができます。
- ※たとえば改行しても
このように頭が揃います。 - ・頭の記号は注釈アイコンのみならず、全角文字であれば使用できます。
- ※リストタグは ul class="indList sizeS"で小さな文字にできます。
- ・頭の記号は注釈アイコンのみならず、全角文字であれば使用できます。
- ul class="circleList"で記号付きのリストができます。
- たとえば改行しても
このように頭が揃います。
テーブル使用例 table Pattern
| テーブルデザイン01 | 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 |
|---|---|
| タイトルテキスト | この文章はダミーです。 |
| タイトルテキスト | この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、 |
| テーブルデザイン01 responsiveTblパターン | スマートフォントサイズにて縦組みにするにはこちらのパターンを使用します。 |
|---|---|
| タイトルテキスト | この文章はダミーです。 |
| タイトルテキスト | この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、 |
| テーブルデザイン01 responsiveTblパターン | スマートフォントサイズにて縦組みにするにはこちらのパターンを使用します。 |
|---|---|
| タイトルテキスト | この文章はダミーです。 |
| タイトルテキスト | この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、 |
| テーブルデザイン01 | 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 |
|---|---|
| タイトルテキスト | この文章はダミーです。 |
| タイトルテキスト | この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、 |
| テーブルデザイン02 responsiveTblパターン | スマートフォントサイズにて縦組みにするにはこちらのパターンを使用します。 |
|---|---|
| タイトルテキスト | この文章はダミーです。 |
| タイトルテキスト | この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、 |
| テーブルデザイン01 responsiveTblパターン | スマートフォントサイズにて縦組みにするにはこちらのパターンを使用します。 |
|---|---|
| タイトルテキスト | この文章はダミーです。 |
| タイトルテキスト | この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、 |
ボタン使用例 Button Pattern
通常利用 左寄せ / 中央揃え / 右寄せのコントロール
カラムコントロール
ボタンバリエーション
- リンクがない場合は矢印はでません（noLink / span）
サイズバリエーション
組み合わせ応用
中央揃え/3カラム / 通常リンク色違い / サイズXL 太字 / SP時は1カラム
レイアウト使用例 Layout Pattern
cmnFlex 通常の使い方
この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
縦位置中央揃えはaiCenter / 逆配置はreverse
この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
白いボックスで囲むパターン
この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
グレーボックスで囲むパターン
この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
小さいボックス
この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
小さいボックス（緑 / 角丸）
この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
- 見出し
- 内容 注意書き
- 見出し
- 内容のダミーテキストがはいります
- 見出し
- 内容のダミーテキストがはいります内容のダミーテキストがはいります内容のダミーテキストがはいります
画像リスト img list
-
ここに見出しがはいります
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
-
ここに見出しがはいります
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
-
ここに見出しがはいります
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
リンクあり
血液浄化事業テキストテンプレート
ダイアライザー
この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ダイアライザー
この文章はダミーです。文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ボックスリンク（2カラム横並び）
- タイトルこの文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。詳しく見る
- タイトルこの文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。詳しく見る
グループ行動方針
- グループ行動方針
-
- お客様のご要望を第一優先とします。
- 倫理観に基づく正しい行動をします。
- 常に生産性・採算意識を持ちます。
- 「自己革新」誰にも負けない努力をします。
- パートナーシップのもとシリアスな問題提起をします。
- 「SPEED and HEART」「BEST for SMALL」「ENJOY and THINKING」
アイコン横並び
-
- EXPART
- 専門性の高い
人工透析分野における知識
-
- EXPART
- 専門性の高い
人工透析分野における知識
-
- EXPART
- 専門性の高い
人工透析分野における知識
-
- HOSPITALITY
- 専門性の高い
人工透析分野における知識
