留学・海外留学なら留学ワールド

0.sample使用ルール

Contents

1．全体のルール

1コンテンツは<div class=”section”>で囲む

一つのコンテンツ（見出しから次の見出しまで）は<div class=”section”></div>で囲んでください。</div>の後ろに1行分の間が空くので、ページ全体が見やすくなります。

内部リンクは相対パス、外部リンクは絶対パスで記入する

リンク先が内部リンクの時（留学ワールドのサイト内のページの場合）は相対パスを入れてください。画像を指定する際のパスも同様です。
外部リンクの場合は絶対パスを入れてください。
相対パス：/reason/（https://deow.jpより後ろのURL）
絶対パス：https://deow.jp/reason/

外部リンクは新しいウィンドウが開いて表示されるようにする

外部リンクを設定する際は、<a>内に<target=”_blank”>を設定してください。リンク先に飛ぶ際に、新しいウィンドウが開くようになります。

画像の横幅は640px以上にする

小さな画像は、スマホなどの高解像度のデバイスで表示するとぼやけてしまうので、横幅が640px以上のものを使用してください。高さについては、特に指定がない限り制限はありません。

画像は必ずaltを記入する

画像のパスを入れる<img>の中には、必ずalt=””を設定してください。こちらは、何らかの要因で画像が表示されなかった場合に表示される代替テキストです。ただし、飾りとして配置している画像など、画像そのものに意味がない場合は記入しなくても大丈夫です。

ページ編集の際はなるべく「テキスト」で行う

「ビジュアル」で編集すると、設定した改行などが消えてしまったり、意図しない見た目になってしまったりする場合があります。ページの編集はなるべく「テキスト」で行い、やむを得ず「ビジュアル」を使う際は更新する前に必ず見た目を確認してください。

2．見出しのルール

見出しの優先順位はh2 > h3 > h4 > h5 = h6となります。重要度の高い見出しにはh2を、h2見出しの内容に含まれるものはh3を指定してください。基本的にh2の下にはh3、h3の下にはh4がきます。ただし、h5とh6に関しては、少し文字を目立たせたい場合などに、順番を無視して使用して構いません（例：h2の下にh5）。
h2に関しては、見出しの先頭にアイコンをつけることができます。コンテンツに合わせて好きな見出しを選んでください（アイコン無しの見出しもあります）。
h5に関しても、先頭のアイコンを変更できます（アイコン無しの見出しはありません）。

h2 class=”bandTi-ye”

h2 class=”bandTi-ye-icon icon-crown”

h2 class=”bandTi-ye-icon icon-school01″

h2 class=”bandTi-ye-icon icon-school02″

h2 class=”bandTi-ye-icon icon-info”

h2 class=”bandTi-ye-icon icon-question”

h2 class=”bandTi-ye-icon icon-note01″

h2 class=”bandTi-ye-icon icon-note02″

h2 class=”bandTi-ye-icon icon-note03″

h2 class=”bandTi-ye-icon icon-note04″

h2 class=”bandTi-ye-icon icon-check-square”

h2 class=”bandTi-ye-icon icon-earth”

h2 class=”bandTi-ye-icon icon-jet01″

h2 class=”bandTi-ye-icon icon-jet02″

h2 class=”bandTi-ye-icon icon-flag”

h2 class=”bandTi-ye-icon icon-city”

h2 class=”bandTi-ye-icon icon-search”

h2 class=”bandTi-ye-icon icon-wallet”

h2 class=”bandTi-ye-icon icon-map-pin”

アメリカ

カナダ


h3 class=”bo-le-bot-blue”

Lorem Ipsumh3 class=”icon-sub-ti border-bottom-bk ce”

※class=”icon-sub-ti border-bottom-bk ce”のアイコンは上記h2の中のものに変更可能

h3 class=”simple-border”

h3 class=”double-border”


h4 class=”bo-le-blue”

h4 class=”boldTi bl ce”Lorem Ipsum


h5 class=”decoTi”
h5 class=”japanTi”
h5 class=”usaTi”
h5 class=”ukTi”
h5 class=”canadaTi”
h5 class=”franceTi”
h5 class=”maltaTi”
h5 class=”philippinesTi”
h5 class=”malaysiaTi”
h5 class=”taiwanTi”
h5 class=”australiaTi”
h5 class=”new-zealandTi”
h5 class=”irelandTi”
h5 class=”denmarkTi”
h5 class=”germanyTi”
h5 class=”italyTi”
h5 class=”spainTi”
h5 class=”switzerlandTi”
h5 class=”indiaTi”
h5 class=”vietnamTi”
h5 class=”chinaTi”
h5 class=”brazilTi”
h5 class=”mexicoTi
h5 class=”costa_ricaTi”
h5 class=”argentinaTi”
h5 class=”chileTi”
h5 class=”ecuadorTi”
h5 class=”cubaTi”
h5 class=”dominicanTi”
h5 class=”boliviaTi”
h5 class=”guatemalaTi”
h5 class=”peruTi”
h5 class=”columbiaTi”
h5 class=”russiaTi”
h5 class=”south_africaTi”

h6 class=”boldBkTi”

3．ボタンのルール

お問い合わせページへリンクするボタンは、黄色のボタンを使用してください。その他のページへリンクする場合は、青系のボタンを使用してください。目立たせたい内容へのリンクは黄緑色のボタンを使用してください。
ボタンの中の文字を編集する際は、最後に<i class=”fas fa-angle-right”></i>を忘れずにつけてください。

div class=”leYeBtn”
div class=”ceYeBtn”
div class=”riYeBtn”
div class=”leBlBtn”
div class=”ceBlBtn”
div class=”riBlBtn”
div class=”leSkyBtn”
div class=”ceSkyBtn”
div class=”riSkyBtn”
div class=”leGrnBtn”
div class=”ceGrnBtn”
div class=”riGrnBtn”
div class=”leLightGrnBtn”
div class=”ceLightGrnBtn”
div class=”riLightGrnBtn”

4．リストのルール

リストの種類

4-1．通常のリスト

先頭にアイコンがついているリストです。リスト形式で列挙したい項目に関しては、できる限りこちらを使用して設定してください。検索エンジンに重要項目として判断されやすくなります。
基本的には青のリストをお使いください。青のリストと区別したい場合は緑のリスト、強調したい項目の場合は黄のリストをお使いください。

  • ul class=”rhombicList1 rhoblues”
  • サンプル
  • サンプル

  • ul class=”rhombicList1 rhogrns”
  • サンプル
  • サンプル

  • ul class=”rhombicList1 rhoyellows”
  • サンプル
  • サンプル

4-2．目的用リスト

六角形の中に画像と文字が指定できる<ul class=”hexagon-list-4col”>のリストです。<p class=”desc02″>で、六角形の下にテキストを表示することもできます。
国TOPページの場合は、最大4つのおすすめ目的を表示します。以下のサンプルから必要な部分をコピーして使ってください。編集の際は以下のようにお願いいたします。
・色の順番は黄→青→黄→青にしてください（黄：p class=”desc”　青：p class=”desc blue”）
・六角形の下のテキスト部分は各国に合わせて書き換えてください（大幅に変更する必要はありません）。
・画像のaltは「国　目的」でお願いします（例：アメリカ 語学留学）

  • 世界中から集まる学生と共に、学校や実生活の中で語学を学びます。英語だけではなく、様々な文化や言語を学ぶことが出来ます。

  • 世界を舞台に活躍するパフォーマーを目指して本場に。有名ダンサーと同じ空間、同じ指導でダンススキルが格段にアップします！

  • 流行の最先端を行く街で刺激を受けながらアートを学べます。日本とは違う雰囲気の中、自分のデザインや作品作りに没頭できます。

  • 国際感覚やコミュニケーション力を養うとともに、世界中にまたがる人脈も得られます。世界で活躍する人材になる第一歩です。

  • 外国で仕事をしながら勉強をしたり旅行をしたりできる制度です。各国のチャンスは一度だけなので後悔してしまう前にまずは挑戦！

  • 外国語での科目学習はもちろん、現地の同級生や地域の人々との交流も重要な学びです。早いうちから、国際的な感覚を養えます。

  • 進学に必要なだけでなく、自身の語学力の証明となる英語能力試験。試験を熟知した講師のもとで効率よくで高得点を狙えます。

  • 学校の長期休暇を利用してサマースクールに通学。語学力を上げるだけでなく、世界中の人との交流で国際的な感覚を養います。

  • エスニック料理や本格調理だけでなく、パティシエやショコラティエなど専門分野にも磨きをかけましょう。

  • マンツーマンが有名なフィリピンで基礎英語力を伸ばし、欧米やオセアニアでワーキングホリデー生活や本格留学へステップアップ。/p>

  • 語学力や専門分野の知識だけでなく、実践的なスキルも身につけられます。現場で戦力となる人材を育成するプログラムです。

  • 早いうちから子供を海外に慣れさせたいという希望に応えた、小さなお子様も参加可能な家族向け留学プランです。

  • カフェ文化が盛んな国で、コーヒーの淹れ方と接客英語を学びます。カフェが好き、実践的な英語をやりたい、という方におすすめ！

  • 英語教師になるために有利、または必須となる資格や学位です。海外でも通用する資格を取得すれば、仕事の幅も広がります。

  • 海外企業でのインターンシップやボランティアは、学校だけでは得られない貴重な経験。仕事のスキルと言語を実践的に学べます。

4-3．その他の目的用リスト

その他の目的の一覧を作成する際の<ul class=”cara-list-other”>のリストです（あいうえお順）。

4-4．ランキング用リスト

学校などをランキング形式で表示する際に使用する<ul class=”rankList”>のリストです。

4-5．ポイント用リスト

ポイントを列挙したい場合に使用する<ul class=”point”>のリストです。テキスト部分には画像も設定できます。

  • li class=”point1″
    ※二行表示も可能です

    画像を並べたい場合は<ul class=”photoList”>を使用してください。

  • li class=”point2″

    見出し部分に線を入れたいときはp class=”ti-border”、不要な場合はp class=”ti”を使います

  • li class=”point3″

    テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。

  • li class=”point4″

    テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。

  • li class=”point5″

    テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。

  • li class=”point6″

    テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。

  • li class=”point7″

    テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。テキストサンプル。

4-6．学校用リスト

学校の詳細ページへリンクする際に使用します。表示する学校の数に応じて使い分けてください。

3列表示用リスト<ul class=”scList-3col”>

2列表示用リスト<ul class=”scList-2col”>

1列表示用リスト<ul class=”scList-1col”>

4-7.国旗アイコン付きリンクリスト

使用できるアイコン一覧

アルゼンチン国旗オーストラリア国旗ボリビア国旗ブラジル国旗カナダ国旗チリ国旗中国国旗コロンビア国旗コスタリカ国旗キューバ国旗ドミニカ国旗エクアドル国旗フランス国旗ドイツ国旗グアテマラ国旗インド国旗アイルランド国旗イタリア国旗マレーシア国旗マルタ国旗メキシコ国旗ニュージーランド国旗ペルー国旗フィリピン国旗ロシア国旗南アフリカ国旗スペイン国旗スイス国旗台湾国旗イギリス国旗アメリカ国旗ベトナム国旗 留学初心者アイコンパイロット留学アイコン二カ国留学アイコン

テキスト付リスト<ul class=”seminaer-list”>

国旗のアイコンと国名の他にテキストを入れられます。

テキスト無しリスト<ul class=”seminaer-list-small”>

国旗アイコンと国名のみのボタンです。

4-8．Q&A用リスト

Q&A形式の表示を行う時に使用する<dl class=”qaList”>のリストです。

質問事項が入ります。この文章はダミーです。質問事項が入ります。
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
質問事項が入ります。この文章はダミーです。質問事項が入ります。
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
質問事項が入ります。この文章はダミーです。質問事項が入ります。
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

4-9．リンクリスト

ページの目次や、リンク一覧を作成する際に使用します。
目次の場合、リストの見出しは「Contents」で統一です。それ以外のリストの場合は、自由に編集してください（例：イギリスのビザに関する情報はこちらもチェック！）。また、見出しをカットしても構いません。

Contents

5．テキスト内リンクのルール

テキスト内にリンクを張る場合は、以下の3つのクラスが設定できます。

内部リンクはclass=”link-internal”をURLを相対パスで設定してください。
外部リンクはclass=”link-external”をURLを絶対パス、且つtarget=”_blank”を入れて設定してください。
リンクが大量に並ぶ場合はclass=”link-list”を設定してください。URLは内部リンクの場合は相対パス、外部リンクの場合は絶対パスです。

6．体験談へのリンクのルール

体験談用リスト

体験談へのリンクを並べるためのの<ul class=”experiencesList”>リストです。一項目だけでの使用も可能です。

スペシャルインタビュー

通常の体験談以外のページへのリンクは、こちらの<dl class=”experiencesListUser”>をお使いください。

竹内　友菜 さん
お名前 竹内　友菜 さん
出身校 Christ College Breon(GCSE）
Bellerbys College(6th Form）
A level Score（A2） A*（数学）、AA（物理、生物）
進学先 UCL(University College London）

〇〇〇〇の体験談はこちら

7．画像のルール

画像配置の種類

7-1．左配置・文字回り込み無し

タイトル
dl class=”photoLList”
この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

7-2．右配置・文字回り込み無し

タイトル
dl class=”photoRList”
この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

7-3．左配置影付き・文字回り込み無し

タイトル
dl class=”photoShLList”
この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

7-4．右配置影付き・文字回り込み無し

タイトル
dl class=”photoShRList”
この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

7-5．中央配置・文字回り込み無し

タイトル

class=”aligncenter”
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

7-6．左配置・文字回り込みあり

タイトル

class=”photoL”
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

7-7．右配置・文字回り込みあり

タイトル

class=”photoR”
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。

7-8．ギャラリー表示

キャプションとともに複数の画像を並べて表示したいときに使用する<ul class=”photoList”>です。

  • ホームステイ外観
    ホームステイ外観
  • ホームステイ外観
    ホームステイ外観
  • ホームステイ外観
    ホームステイ外観
  • 中庭
    中庭
  • ホストファミリー
    ホストファミリー
  • キッチン
    キッチン

8．表のルール

基本的には青の表をお使いください。青の表とは区別したい場合は緑の表をお使いください。目立たせたい項目の場合は黄の表をお使いください。
各表とも、文字が左寄せのものと中央寄せのものの2種類があります。
表は<div class=”section”>で囲むと、他のコンテンツと間が空くので見やすくなります。

※注意‼
列が多い表は、スマホ版だと画面から飛び出してしまいます。必ず<div class=”table-wrap”>で囲んでください

table class=”table-bl” サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
table class=”table-bl ce” サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
table class=”table-grn” サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
table class=”table-grn ce” サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
table class=”table-ye” サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
table class=”table-ye ce” サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
※class=”table-wrap”使用例
table class=”table-ye ce” サンプル サンプル サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル サンプル サンプル サンプル

ボックスのルール

基本的には青のボックスをお使いください。青のボックスとは区別したい場合は緑のボックスをお使いください。目立たせたい項目の場合は黄のボックスをお使いください。
各ボックスとも、文字が左寄せのものと中央寄せのものの2種類があります。

背景色が変わるボックス

div class=”box sky”
div class=”box sky ce”

div class=”box grn”
div class=”box grn ce”

div class=”box ye”
div class=”box ye ce”

ボーダー色が変わるボックス

矢印付きのボックスとの組み合わせで、フローチャートのような表現が可能です。

div class=”arrowBox bl”
div class=”arrowBoxEnd bl”

div class=”arrowBox bl ce”
div class=”arrowBoxEnd bl ce”

div class=”arrowBox grn”
div class=”arrowBoxEnd grn”

div class=”arrowBox grn ce”
div class=”arrowBoxEnd grn ce”

div class=”arrowBox ye”
div class=”arrowBoxEnd ye”

div class=”arrowBox ye ce”
div class=”arrowBoxEnd ye ce”

10．2列表示のルール

文章を2列で表示できるのリストです。

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

11．学校ページ滞在先のテンプレ

外部寮

1人部屋/2人部屋/3人部屋

  • ホームステイ外観
  • ホームステイ外観
  • ホームステイ外観
設備 ベッド、エアコン、温水シャワー、机＆椅子、テレビ、等
学校までのアクセス 学校からシャトルバスで15-20分
寮敷地内境 共用キッチン、レストラン、カフェ、バー等　※朝食含め校内の学食で食事可
補足情報 インターネット可（但し無線でないため1mの有線ケーブルをご自身にて要持参）

12．国TOPの留学情報のテンプレ

画像付きリスト

※下記を修正
・各画像は640-428ピクセルにする
・画像alt、タイトル、説明文の修正、リンク先の変更を忘れない

  • hex2-list-4col

    こちらのテキスト量は、すべての項目でそろえると高さがそろってきれいになります。

  • サンプルサンプル
    2行も可

    サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

  • サンプルサンプル

    サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

  • サンプルサンプル

    サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

  • サンプルサンプル

    サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

  • サンプルサンプル

    サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

  • サンプルサンプル

    サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

  • サンプルサンプル

    サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

画像無しリスト

13．特別なお問い合わせボックス

留学してみたいと思ったら・・まずは相談してみよう！

無料でアドバイザーに相談する

14．国TOPマップ

15．動画リスト


  • コロナ禍での留学準備は何が必要？2021年の留学準備に必要な7つのポイントをご紹介します！


  • 【オンライン留学】日本にいながら海外の語学学校の授業が受けられる!? 日本にいながらオンライン留学へ行ってみよう！


  • 【成績は？英語力は？難易度は？】大学留学希望者が気になる事を大学留学カウンセラーが解決します！

迷ったらまずはお電話を！
あなたにベストな留学プランをご提案

【フリーダイヤル】電話相談をする

月～金10:00～20:00　土日祝10:00～19:00

留学のご相談はこちら

月～金10:00～20:00　土日祝10:00～19:00
メール受付は24時間対応

無料相談・お見積り
無料個別面談

\ 簡単1分！お問い合わせ /

無料留学のご相談はこちら！ LINEで相談