ページタイトルです。

HOME arrow

サンプルページ

arrow

コンポーネントページ

基本のH2タイトルです。

Namsung用のH2タイトルです。

Dongyoung用のH2タイトルです。

基本のH3タイトルです。

基本のH4タイトルです。

基本的なpのスタイル基本的なpのスタイル基本的なpのスタイル基本的なpのスタイル基本的なpのスタイル基本的なpのスタイル基本的なpのスタイル

基本的なpのスタイル基本的なpのスタイル
基本的なpのスタイル基本的なpのスタイル基本的なpのスタイル

パーツ要素

リスト

ulに「.common__list」

FAQリスト

ulに「.common__list」

ボタン

aタグに「.btn」「.btn--pdf」「.btn--link」
後述のレイアウトルールで2列や3列も可能

ボタンサンプル(1列)

テーブル

ノーマルテーブル

tableタグに「.table」(本テーブルは「.w-800」の付与で最大幅を800pxに)

社名 南星海運ジャパン株式会社
(NAMSUNG SHIPPING JAPAN, LTD.)
創立 平成10年10月1日
資本金 5,000万円
株主 南星海運株式会社
南星海運ジャパン株式会社
役員 代表取締役社長 平田 昌治
役員数4名
従業員 36名
営業種目 海運業
日本/韓国/中国/東南アジア 月間船舶約200航海
取引銀行 三菱UFJ銀行/みずほ銀行
銀行口座 南星海運/NAMSUNG 東暎海運 / DONGYOUNG
グループ会社 南星海運株式会社(NAMSUNG SHIPPING CO., LTD.)
東陽海運株式会社(DONGYOUNG SHIPPING CO., LTD.)
株式会社スターエクスプレス(STAR EXPRESS CO., LTD.)
東州マリタイム株式会社

代理店用テーブル

tableの入れ子で表現。ボーダーなしは「.table--noborder」
背景は「.bg-lightblue」で薄青に。


ishikari
会社名 株式会社 栗林商会 札幌支社 運輸営業部
住所 北海道札幌市中央区北2条西12丁目2-4
TEL 011-231-8171
FAX 011-222-1394

ishikari
会社名 株式会社 栗林商会 札幌支社 運輸営業部
住所 北海道札幌市中央区北2条西12丁目2-4
TEL 011-231-8171
FAX 011-222-1394

1列テーブル

bg-lightblueで背景設定、テーブルの入れ子で表現

担当部署 南星海運ジャパン株式会社 シーリードシッピング事業部
住所 東京都千代田区鍛冶町2丁目9番12号神田徳力ビル1階
TEL

セールスチーム:03-5843-6148
セールスチーム:03-5843-6148
セールスチーム:03-5843-6148

担当部署 南星海運ジャパン株式会社 シーリードシッピング事業部
住所 東京都千代田区鍛冶町2丁目9番12号神田徳力ビル1階
TEL

セールスチーム:03-5843-6148
セールスチーム:03-5843-6148
セールスチーム:03-5843-6148

担当部署 南星海運ジャパン株式会社 シーリードシッピング事業部
住所 東京都千代田区鍛冶町2丁目9番12号神田徳力ビル1階
TEL

セールスチーム:03-5843-6148
セールスチーム:03-5843-6148
セールスチーム:03-5843-6148

レイアウト

2カラム

wrap要素に「.d-grid.column-2」

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

2カラム - 左320px

wrap要素に「.d-grid.column-2-320px」

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

3カラム

wrap要素に「.d-grid.column-3」

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

4カラム

wrap要素に「.d-grid.column-4」

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

カラムの入れ子

カラムの入れ子もできます

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