サンプルページ

h3見出し見出し見出し見出し見出し見出し見出し見出し

h4見出し見出し見出し見出し見出し

※「section」は、章にあたり、「.container」は、コンテンツブロッククラスです。コンテンツを1200px幅に納めます。section > .container という形で制作してください。
※パーツの上下部にスペースを付けたい場合は、パーツのタグにクラスを付与することで、5px単位で150pxまで増減出来ます。
クラス「mt」・・・・(margin-top)   .mt0(margin-top:0;) 〜 .mt150(margin-top:150px;)
クラス「mb」・・・(margin-bottom)  .mb0(margin-bottom:0) 〜 .mb150(margin-bottom:150px;)
クラス「pt」・・・(padding-top) .pt0(padding-top:0;) 〜 .pt150(padding-top:150px;)
クラス「pb」・・・(padding-bottom) .pb0(padding-bottom:0;) 〜 .pb150(padding-bottom:150px;)
例):<p class=”mb50″>テキスト</p>

マーカー付きテキスト。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

p 文章 右寄せ ここにテキストが入ります。

p 文章 センター寄せ

フォントSサイズ(12px)
フォントMサイズ(20px)
フォントLサイズ(36px)
フォント太字(bold)
フォント赤
フォント青
フォント茶
フォント紫
フォント緑

文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。

文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。

タイトル
内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります
タイトル
内容
タイトル
内容
タイトル
内容
タイトル
内容
タイトル
内容
ここはBOX付きのテキストスペースです。ここはBOX付きのテキストスペースです。
ここはBOX付きのテキストスペースです。ここはBOX付きのテキストスペースです。

画像サイズ固定(画像幅500px)

画像固定横幅500px。画像の入っているdivもCSSで横幅500pxに固定してます。画像固定横幅500px。画像の入っているdivもCSSで横幅500pxに固定してます。
テキスト

画像サイズ固定(画像幅330px)

画像固定横幅330px。画像の入っているdivもCSSで横幅330pxに固定してます。画像固定横幅500px。画像の入っているdivもCSSで横幅330pxに固定してます。
テキスト
テキスト
タイトルタイトル 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
タイトル 内容内容内容内容内容内容
タイトル 内容内容内容内容内容内容
タイトル 内容内容内容内容内容内容
タイトル 内容内容内容内容内容内容

ボタン(左寄せ)

ボタンボタンボタンボタンボタン

ボタン(中央寄せ)

ボタン

ボタン(右寄せ)

ボタン

ボタン(左寄せ)

ボタンボタンボタンボタンボタン

ボタン(中央寄せ)

ボタン

ボタン(右寄せ)

ボタン
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキスト

背景(薄いブルー)

h3 見出し

h4 見出し

レスポンシブ4列

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

横スクロールテーブル

セルタイトル セルタイトル セルタイトル セルタイトル セルタイトル
テキスト テキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
テキスト テキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
テキスト テキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
テキスト テキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
テキスト テキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト