留学から海外就職まで、クリエイターの未来をサポート

よくある質問 無料留学相談

表示サンプル 2col

h2タグ。記事内の大見出し

h2直下のPタグ。ここに本文が入ります。マージンはこのくらいで。h2直下のPタグ。ここに本文が入ります。マージンはこのくらいで。

h3タグ。中見出し。

h3直下のPタグ。ここに本文が入ります。マージンはこのくらいで。本文内にリンクを入れるとこのように表示。

h4タグ。ちょっとした見出し?

h4直下のPタグ。ここに本文が入ります。マージンはこのくらいで。本文内に strong をいれるとこのように表示。

h5タグ。あまり使わないかもしれないh5

h5直下のPタグ。ここに本文が入ります。マージンはこのくらいで。本文内のフォントスタイルをイタリックにするとこのように表示

h6タグ。ほとんど使わないかもしれないh6

h6直下のPタグ。ここに本文が入ります。マージンはこのくらいで。記事内にコードを入力すると font-size:12px; ←このように表示。

画像は以下のように表示。

リンク画像画像は以下のように表示。

  • ULタグ。リストを表示
  • このようにスタイルされています
    • ネストのリスト1
    • ネストのリスト2
  • リスト内の文章が長くなったらこのように表示されます。箇条書きなのであまりながい文章は避けたほうがいいかもしれませんが、念のため…。
  1. OLタグ。数字付きリストの表示
  2. このようにスタイルされています
    1. ネストのリスト1
    2. ネストのリスト2
  3. リスト内の文章が長くなったらこのように表示されます。箇条書きなのであまりながい文章は避けたほうがいいかもしれませんが、念のため…。

引用文のスタイル。他サイトなどから文章を引用する時はblockquoteをつかって引用文を表示させます。引用文のスタイル。他サイトなどから文章を引用する時はblockquoteをつかって引用文を表示させます。

画像にキャプションを付けるとこのように表示。

画像直下の本文。こんな感じで表示されます。画像直下の本文。こんな感じで表示されます。


レイアウト

サブタイトル

.feature-section で囲むと画面全体に表示できる。背景画像や背景色をいっぱいに表示する時に。タイトルに .feature-title をつける。.feature-section とあわせて使おう。通常、タイトルは h1 にする。サブタイトルには .feature-subtitle でいい感じになる。

ただし、そのままだと↑のようにテキストが画面いっぱいに表示されちゃうので、.container で囲むといい感じに中央揃えになる。.feature-section.container を同じ要素につけてもOK。

.feature-section.bg-solid をプラスすると、薄茶色の背景色になるよ!

Flexbox カラム

.flexbox 追加で、その中のブロック要素が横並びに。

Column 1
Column 2

余白付きカラム

要素と要素の間にスペースを入れる時は .flexbox に加えて .flexwrap を付与。 幅の指定は .span_1.span_12 を指定。

.span_6
.span_6

.span_4
.span_4
.span_4

.span_3
.span_3
.span_3
.span_3

Element Align

右に置きたい要素にimg.alignright。Float解除のため、要素を.aligncontainerで囲むこと。
左に置きたい要素にimg.alignleft。Float解除のため、要素を.aligncontainerで囲むこと。

右揃え、左揃え、中央揃え

.textleft で左揃え(デフォルト)

.textright で右揃え

.textcenter で中央揃え

幅の狭いボックス

.narrowbox-left で左揃えの幅の狭いボックスを表示。750px。1カラムのページデザインで活躍してくれることでしょう。divやpに使うことになるのでしょう。

.narrowbox-right で右揃えの幅の狭いボックスを表示。750px。1カラムのページデザインで活躍してくれることでしょう。divやpに使うことになるのでしょう。

.narrowbox-center で中央揃えの幅の狭いボックスを表示。750px。1カラムのページデザインで活躍してくれることでしょう。divやpに使うことになるのでしょう。

見出し

ゴーストタイトル

ゴーストタイトル

ゴーストタイトル

.title-ghost でゴーストボタン風タイトル。どの見出しレベルでもこのスタイル。

ボタン

Primary ボタン

.btn でみどりのボタン。最重要項目にのみ適用。

Secondary ボタン

.btn.blue で青のボタン。特に重要じゃないボタンに適用。

白いボタン

.btn.white で白いボタン。背景が暗い場合に。

.postfix を追加するとチョット小さめのボタンに。テキストフィールドと合わせて使うときなど。

フォーム

幅はそのページのスタイルに合わせて div なんかで調節しちゃってね。

テーブル

# Club Pld Pts
1 Man City 8 18
2 Arsenal 8 17
3 Man Utd 8 16
4 Crystal Palace 8 15

メッセージパネル

メッセージを別枠で表示する時に使用。div.message-panel 内に文章入れる。

バツアイコン

アイコンをつけてもOK。アイコンをつけるなら文章を長めにしないとバランスが変かも。アイコンの種類は必要に応じて追加するので、欲しいのがあれば言ってねー。
<svg><use xlink:href="#icon-close"/></svg>

アラートアイコン

アイコンをつけてもOK。アイコンをつけるなら文章を長めにしないとバランスが変かも。アイコンの種類は必要に応じて追加するので、欲しいのがあれば言ってねー。
<svg><use xlink:href="#icon-alert"/></svg>

ピンアイコン

アイコンをつけてもOK。アイコンをつけるなら文章を長めにしないとバランスが変かも。アイコンの種類は必要に応じて追加するので、欲しいのがあれば言ってねー。
<svg><use xlink:href="#icon-pin"/></svg>

画像と文章

横並びの感じで

.mediaで囲んで、画像には.media-img、コンテンツには .media-content。タイトルつけるなら.media-title

記事リスト

記事をリスト表示する時に。幅狭いレイアウトの方があうかも。大きく打ち出す時は .post-feature で囲む。タイトルには .post-list-title。小さく打ち出す時は .post-list で囲む。この例では最初の1記事が .post-feature で、あとの2つは .post-list 。リストの下にボタンをつけるなら .btn-post-list でいい感じに中央揃えになる。

BBQしたよ!いっぱい人がきてすっごく楽しかったよ!

BBQしたよ!いっぱい人がきてすっごく楽しかったよ!

BBQしたよ!いっぱい人がきてすっごく楽しかったよ!

ブログ記事一覧

イベントリスト

あまり使うこともないであろうイベントリスト。.event-upcoming で囲む。詳しい構造はソース見て。

料金表

table 要素に .price-table。プラン名(th等)に .plan-lable 、料金に .plan-price。料金内、小さく表示したい文字($、円 など)には span を。打ち消し線は .not-available で。

料金表を横並びにするためには、例のごとく .flexbox で囲ってね。

日本在住者向け
30 万円
Web制作講座の受講料
英会話講座の受講料
ホームステイ(食費含む)
空港からの送迎
日本在住者向け
30 万円
Web制作講座の受講料
英会話講座の受講料
ホームステイ(食費含む)
空港からの送迎
日本在住者向け
30 万円
Web制作講座の受講料
英会話講座の受講料
ホームステイ(食費含む)
空港からの送迎

素敵シャドウ

.fancy-shadow追加で素敵な影表示。

サイト内検索

簡単お問い合わせ

お知らせ

海外就職クリエイター達による座談会をBCITにて開催(9/30)

マーケターの皆様へ留学サポート開始!

最大で$300のスキルアップのための支援金制度の実施について

FrogからWEB制作案件のご紹介を開始、スキルアップや収入元として

バンクーバーでクリエイター留学の相談会を定期開催

無料相談

Frogではメールまたはスカイプによる無料の留学相談を行っています。
海外で活躍できるクリエイターとなるための様々な情報共有だけでなく、
勉強方法や就職までの流れ等もご相談承っておりますので、お気軽にご相談ください。

開催予定のイベント 無料留学相談


Frog House #1
4904 Rupter Street, Vancouver

Frog House #2
28 61st Avenue, Vancouver

ニュースレター

Frogの最新情報や、留学・就職に関する情報を随時配信しています。お気軽にご登録ください。