h2直下のPタグ。ここに本文が入ります。マージンはこのくらいで。h2直下のPタグ。ここに本文が入ります。マージンはこのくらいで。
h3直下のPタグ。ここに本文が入ります。マージンはこのくらいで。本文内にリンクを入れるとこのように表示。
h4直下のPタグ。ここに本文が入ります。マージンはこのくらいで。本文内に strong をいれるとこのように表示。
h5直下のPタグ。ここに本文が入ります。マージンはこのくらいで。本文内のフォントスタイルをイタリックにするとこのように表示
h6直下のPタグ。ここに本文が入ります。マージンはこのくらいで。記事内にコードを入力すると font-size:12px;
←このように表示。
画像は以下のように表示。
リンク画像画像は以下のように表示。
引用文のスタイル。他サイトなどから文章を引用する時はblockquoteをつかって引用文を表示させます。引用文のスタイル。他サイトなどから文章を引用する時はblockquoteをつかって引用文を表示させます。
画像直下の本文。こんな感じで表示されます。画像直下の本文。こんな感じで表示されます。
サブタイトル
.feature-section
で囲むと画面全体に表示できる。背景画像や背景色をいっぱいに表示する時に。タイトルに .feature-title
をつける。.feature-section
とあわせて使おう。通常、タイトルは h1
にする。サブタイトルには .feature-subtitle
でいい感じになる。
ただし、そのままだと↑のようにテキストが画面いっぱいに表示されちゃうので、.container
で囲むといい感じに中央揃えになる。.feature-section
と.container
を同じ要素につけてもOK。
.feature-section
に .bg-solid
をプラスすると、薄茶色の背景色になるよ!
.flexbox
追加で、その中のブロック要素が横並びに。
要素と要素の間にスペースを入れる時は .flexbox
に加えて .flexwrap
を付与。
幅の指定は .span_1
〜 .span_12
を指定。
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
でゴーストボタン風タイトル。どの見出しレベルでもこのスタイル。
.btn
でみどりのボタン。最重要項目にのみ適用。
.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 |
.media
で囲んで、画像には.media-img
、コンテンツには .media-content
。タイトルつけるなら.media-title
記事をリスト表示する時に。幅狭いレイアウトの方があうかも。大きく打ち出す時は .post-feature
で囲む。タイトルには .post-list-title
。小さく打ち出す時は .post-list
で囲む。この例では最初の1記事が .post-feature
で、あとの2つは .post-list
。リストの下にボタンをつけるなら .btn-post-list
でいい感じに中央揃えになる。
あまり使うこともないであろうイベントリスト。.event-upcoming
で囲む。詳しい構造はソース見て。
table 要素に .price-table
。プラン名(th等)に .plan-lable
、料金に .plan-price
。料金内、小さく表示したい文字($、円 など)には span
を。打ち消し線は .not-available
で。
料金表を横並びにするためには、例のごとく .flexbox
で囲ってね。
日本在住者向け |
---|
30 万円 |
Web制作講座の受講料 |
英会話講座の受講料 |
ホームステイ(食費含む) |
空港からの送迎 |
日本在住者向け |
---|
30 万円 |
Web制作講座の受講料 |
英会話講座の受講料 |
ホームステイ(食費含む) |
空港からの送迎 |
日本在住者向け |
---|
30 万円 |
Web制作講座の受講料 |
英会話講座の受講料 |
ホームステイ(食費含む) |
空港からの送迎 |
.fancy-shadow
追加で素敵な影表示。
.card でカードなスタイルに。基本的に背景色・画像がある時にどうぞ。.flexbox との相性ばっちり。レスポンシブ、レティナの都合上、画像は横幅720px以上推奨。
1〜8週間とか。社会人や学生の休暇を利用した留学。語学やFrog School Bootcamp関連。
詳しく見る
1〜8週間とか。社会人や学生の休暇を利用した留学。語学やFrog School Bootcamp関連。
詳しく見る
1〜8週間とか。社会人や学生の休暇を利用した留学。語学やFrog School Bootcamp関連。
詳しく見る