メニュー

CSSフレームワーク Foundation 6 をベースに記述しています。詳しいグリッド等については以下を参照ください

https://get.foundation/sites/docs/xy-grid.html

本文内でも横幅100%に対応するためにdefaultは100%幅としメイン幅をもうけていません。

<section class="section sec_wrap">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell large-12">

本文をここに

<!–large-12–></div>
<!– grid-x –></div>
<!– grid-container –></div>
<!– section –></section>


h3タイトルh3タイトルh3タイトルh3タイトル

文字装飾文字装飾文字装飾文字装飾文字装飾文字装飾

文字を小さく font_s

文字を大きく font_l

文字をさらに大きく font_ll

文字を太く bold

赤字

緑字


スマホ時スクロールするテーブル


レスポンシブありTABLE

THTHTH 中身中身中身中身中身中身 中身中身中身中身中身中身 中身中身中身中身中身中身 中身中身中身中身中身中身
THTHTH 中身中身中身中身中身中身 中身中身中身中身中身中身 中身中身中身中身中身中身 中身中身中身中身中身中身
THTHTH 中身中身中身中身中身中身 中身中身中身中身中身中身 中身中身中身中身中身中身 中身中身中身中身中身中身

リスト

  1. olリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリスト
  2. olリスト
  3. olリスト
  4. olリスト
  5. olリスト
  • ulリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリスト
  • ulリスト
  • ulリスト
  • ulリスト
  • ulリスト

カラム 順番差し替え

このカラムはsmll-n(スマホ)だと2番目、medium-n(タブレット)large-n(PC)と1番目に表示されます。
このカラムはsmll-n(スマホ)だと1番目、medium-n(タブレット)large-n(PC)と2番目に表示されます。 This column will come first on small, and second on medium and larger.

特定サイズの際見せるクラス指定

class=”show-for-small-only”
class=”show-for-medium-up”
class=”show-for-medium-only”
class=”show-for-large-down”
class=”show-for-large”
class=”show-for-large-up”
class=”show-for-xlarge”
class=”show-for-xxlarge”

特定サイズの際隠すクラス指定

class=”hide-for-small-only”
class=”hide-for-medium-up”
class=”hide-for-medium-only”
class=”hide-for-large-down”
class=”hide-for-large”
class=”hide-for-large-up”
class=”hide-for-xlarge”
class=”hide-for-xxlarge”


ボタン

ボタン見本 ボタン見本 ボタン見本 ボタン見本

buttonタグボタン

inputボタン


画像フレックス配置

テキスト+画像 右画像300px

image

見出しが入ります

当院副院長
上から治療前、施術直後、治療後1週間後
治療回数:1回

テキスト+画像 左画像300px

image

見出しが入ります

当院副院長
上から治療前、施術直後、治療後1週間後
治療回数:1回

テキスト+画像 右画像250px

image

見出しが入ります

当院副院長
上から治療前、施術直後、治療後1週間後
治療回数:1回

テキスト+画像 左画像250px

image

見出しが入ります

当院副院長
上から治療前、施術直後、治療後1週間後
治療回数:1回

テキスト+画像 右画像350px

image

見出しが入ります

当院副院長
上から治療前、施術直後、治療後1週間後
治療回数:1回

テキスト+画像 左画像350px

image

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

テキスト回り込み+画像 右画像350px

image

ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用

テキスト回り込み+画像 左画像350px

image

見出しが入ります

ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用ダミーテキスト回り込み用

ページトップ