A★サンプル　***削除禁止‼***

CONTENTS

class”innerSp”とsectionについて

class”innerSp”について

POINT1

innerSpでくくると、スマホサイズで左右に15pxの余白がつきます。

固定ページを作成する際は基本的に全ての記述をinnerSpでくくってください。

POINT2

experience_thum_boxesの場合はくくる必要がありません。

例外があり、experience_thum_boxes（学校リストのサンプルコード）
など、スマホサイズで横いっぱいまで背景色がついているデザインの場合は
くくる必要がありません。
記述例
innerSp
コンテンツ
/innterSP
学校リストのコンテンツ
innerSp
コンテンツ
/innerSp



sectionについて

sectionでコンテンツをくくるとコンテンツのbottomに64pxの余白がつきます。

下にスペースをあけたいとき　class=”mb10″ mb20

POINT1

どこ要素でもclass=”mb10″を追加するとスペースがあく

mb10は、margin-bottom 10pxの略にしています。

mb10　mb20　mb30　mb40　のclassがあり、それぞれ数字はスペースの広さになります。

mb10は、margin-bottom 10pxの略にしています。

POINT2

スペースをあけたいときは、なるべくbrは使わない

brは美しくないため、できる限りmb10などのclassを追加することでスペースを調整する。

見出し系

h2用、h3用など様々な見出しのclassがありますが、全ての要素で使用可能です。

例えば、h3 class=”asset_ttl green” や、h4 class=”asset_ttl green” などで記載も可能です

基本的に、ページのタイトルがh1、そのセカンドレベルの見出しがh2、

h2の下に使う見出しがh3と順番に使ってください。

このclassだから、h4になる！とかではないです。

h2 class=”asset_ttl green”　テキストが長くて改行される場合テキストが長くて改行される場合

h2 class=”asset_ttl new”　テキストが入ります

h3 class=”asset_ttl white”

h3 class=”asset_ttl white” テキストが長くて改行される場合テキストが長くて改行される場合

h4 class=”line_ttl”

h4 class=”line_ttl” テキストが長くて改行される場合テキストが長くて改行される場合

h5 class=”under_ttl”
h5 class=”under_ttl” テキストが長くて改行される場合テキストが長くて改行される場合

class=”centerLine” 左右に線がつく見出しです

リスト系

  • class=”list_dot”　　リストサンプルリストサンプルリストサンプルリストサンプル
  • リストサンプルリストサンプル
  • リストサンプルリストサンプル
  • class=”list_dot_gre　　リストサンプルリストサンプルリストサンプルリストサンプル
  • リストサンプルリストサンプル
  • リストサンプルリストサンプル
  • class=”list_dot_ye”　　リストサンプルリストサンプルリストサンプルリストサンプル
  • リストサンプルリストサンプル
  • リストサンプルリストサンプル

class=”check_list”　　チェックリスト

サンプルチェックリストサンプルチェックリスト

チェックリスト

サンプルチェックリスト

POINT1

ビジネス英会話コースもあり

サンプルポイントサンプルポイントサンプルポイントサンプルポイント

POINT2

ビジネス英会話コースもあり

サンプルポイントサンプルポイントサンプルポイントサンプルポイント

POINT3

ビジネス英会話コースもあり

サンプルポイントサンプルポイントサンプルポイントサンプルポイント

POINT1

ビジネス英会話コースもあり

サンプルポイントサンプルポイントサンプルポイントサンプルポイント

POINT2

ビジネス英会話コースもあり

サンプルポイントサンプルポイントサンプルポイントサンプルポイント

POINT3

ビジネス英会話コースもあり

サンプルポイントサンプルポイントサンプルポイントサンプルポイント

ビジネス英会話コースもあり

サンプルポイントサンプルポイントサンプルポイントサンプルポイント

ビジネス英会話コースもあり

サンプルポイントサンプルポイントサンプルポイントサンプルポイント

ビジネス英会話コースもあり

サンプルポイントサンプルポイントサンプルポイントサンプルポイント

人生が楽しくてしょうがないんですけれどどうしたらいいですか？
それは難しい問題ですね。。それは難しい問題ですね。。
人生が楽しくてしょうがないんですけれどどうしたらいいですか？
それは難しい問題ですね。。それは難しい問題ですね。。
人生が楽しくてしょうがないんですけれどどうしたらいいですか？
それは難しい問題ですね。。それは難しい問題ですね。。

Q&A

よくある質問

人生が楽しくてしょうがないんですけれどどうしたらいいですか？
それは難しい問題ですね。。それは難しい問題ですね。。
人生が楽しくてしょうがないんですけれどどうしたらいいですか？
それは難しい問題ですね。。それは難しい問題ですね。。
人生が楽しくてしょうがないんですけれどどうしたらいいですか？
それは難しい問題ですね。。それは難しい問題ですね。。

カラー文字、リンク系

カラー文字

class=”blueTi” 青い文字です。青い文字です。青い文字です。青い文字です。青い文字です。青い文字です。

b class=”blueTi” 青い文字です。青い文字です。青い文字です。青い文字です。青い文字です。青い文字です。

class=”greenTi” 緑の文字です。緑の文字です。緑の文字です。緑の文字です。緑の文字です。緑の文字です。

b class=”greenTi” 緑の文字です。緑の文字です。緑の文字です。緑の文字です。緑の文字です。緑の文字です。

リンク系

下線とアイコンがつきます

※外部リンクにはtarget=”_blank”を入れてください(リンク先を別窓で開きます)
外部サイトへのリンク class=”external”
内部サイトへのリンク class=”internal”

テーブル系

table class=”table_color gre” テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
table class=”table_color left gre” テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
table class=”table_color ye” テキスト テキスト テキスト
テキスト テキストテキストテキストテキストテキスト テキストテキストテキス
トテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト		 テキスト テキスト
テキスト テキスト テキスト テキスト
table class=”table_color left ye” テキスト テキスト テキスト
テキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
 テキスト テキスト
テキスト テキスト テキスト テキスト

table class=”table_color eme”
テキスト テキスト
テキスト テキスト
テキスト テキスト
テキスト テキスト

ボタン系

ボタン　シングル

class=”btn_one”　　ボタン　緑
class=”btn_one right”　　ボタン　緑　右
class=”btn_one left”　　ボタン　緑　左

※a href=”” に　class=”ye”を追記すると、ボタンの色が黄色になります。

a href=”” class=”ye”　ボタン　黄色
ボタン　黄色　右
ボタン　黄色　左

ボタン　ダブル

※btn_twoを追記すると、ボタンが横2列になります。

ボタン　緑ボタン　緑
ボタン　緑ボタン　緑
ボタン　緑 ボタン　緑 ボタン　緑ボタン　緑
ボタン　緑ボタン　緑

ギャラリー

ポップアップなし

キャプションが必要ない場合は、pタグの部分を削除してください

ul class=”gallery”　キャプションなし

ul class=”gallery”　キャプションあり

  • キャプションが入ります。キャプションが入ります。

  • キャプションが入ります。キャプションが入ります。

  • キャプションが入ります。キャプションが入ります。

  • キャプションが入ります。キャプションが入ります。

ポップアップあり



  • キャプションが入ります。キャプションが。



  • キャプションが入ります。キャプションが。



  • キャプションが入ります。キャプションが。



  • キャプションが入ります。キャプションが。

体験談リスト用

  • class=”experience_ttl”　世界一住みやすい都市で！

    • お名前A・Aさん
    • 滞在都市メルボルン
    • 期間4週間

  • class=”experience_ttl”　世界一住みやすい都市で！

    • お名前A・AA・AA・Aさん
    • 滞在都市メルボルンメルボルン
    • 期間4週間

学校リスト用

横3列

※classのbaGre3をつけると背景が緑になります。

※classのbaYe4をつけると背景が黄色になります。

世界一住みやすい都市でワーホリしましし！

ゴールドコースト

テストスクールtestschool

基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュニケーションが

詳細はこちら

世界一住みやすい都市でワーホリしましし！

ゴールドコースト

テストスクールtestschool

基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュニケーションが

詳細はこちら

世界一住みやすい都市でワーホリしましし！

ゴールドコースト

テストスクールtestschool

基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュニケーションが

詳細はこちら

横2列

※classのbaGre3をつけると背景が緑になります。

※classのbaYe4をつけると背景が黄色になります。

世界一住みやすい都市でワーホリしましし！

ゴールドコースト

テストスクールtestschool

基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュニケーションが

詳細はこちら

世界一住みやすい都市でワーホリしましし！

ゴールドコースト

テストスクールtestschool

基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュニケーションが

詳細はこちら

横1列

※classのbaGre3をつけると背景が緑になります。

※classのbaYe4をつけると背景が黄色になります。

世界一住みやすい都市でワーホリしましし！

  • ゴールドコースト

    テストスクールtestschool

    基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュニケーションが

    詳細はこちら

世界一住みやすい都市でワーホリしましし！

  • ゴールドコースト

    テストスクールtestschool

    基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュニケーションが

    詳細はこちら

世界一住みやすい都市でワーホリしましし！

  • ゴールドコースト

    テストスクールtestschool

    基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュニケーションが

    詳細はこちら

box系

背景色がつくbox

※classのbaGre2をつけると背景が緑になります。

※classのbaYe3をつけると背景が黄色になります。

class=”colorBox baYe3″　　基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュ

class=”colorBox baGre2″　　基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュ

枠線がつくbox

class=”borderBox”　　基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュ

2重枠線がつくbox

class=”borderBox double”　　基本的にほとんどのバリスタコースの授業は全て英語で行われます。具体的な英語力指標があるわけではありませんが、全く英語が出来ない方は、ある程度英語でコミュ

吹き出しがつくbox

おすすめの学校
おすすめの学校は先生がよくて笑顔が溢れる学校です！

おすすめの学校は先生がよくて笑顔が溢れる学校です！


写真リスト

左右に画像がくる場合 h3 class=”line_ttl

  • ul class=”photoL_list_common”
    明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
    説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目

  • ul class=”photoR_list_common”
    説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
    説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目

画像に背景色がつく場合

※liにaddBaを追加すると、緑の背景色が追加されます

  • 説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
    説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目

  • 説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
    説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目

画像とテキストが縦1列の場合

説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目

説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目

div class=”photoL” 左右に画像がくる & テキストが回り込む場合

説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目

説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目


左右に画像がくる & テキストが回り込む & 画像に背景色をつける場合

説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目

説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目
説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文１行目説明文

YouTube動画埋め込みのルール


テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります


動画を2列に並べることも可能です。



テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
無料お問い合わせ・説明会予約