03-6228-5117
画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px。サンプルページ
下記の各パーツは、テキストモードにして、ソースをコピペして使ってください。
ビジュアルモードだと、余計なコードが入ったり、肝心なコードが抜けたりするので。
※「section」は、章にあたります。
コンテンツは、1400px幅に納めます。
section > コンテンツという形で制作してください。
クラスに「mb30」「mb50」「mb60」「pt40」「pb40」とありますが、
これらは、
mb = margin-bottom
mt = margin-top
pb = padding-bottom
pt = padding-top
の意味です。
mb30 = margin-bottom:30px という意味です。
mb0,mb10… ~ mb150
mt0,mt10… ~ mt150
pt0,pt10… ~ pt150
pb0,pb10… ~ pb150 のように、それぞれのプロパティにつき、10px毎0～150pxの範囲で、数値クラスが用意されているので、
スペース、マージンが欲しくなった場合は、クラスに追加してしてください。
■２カラムコンテンツ
2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。
2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。2カラムコンテンツ。
■3カラムコンテンツ
3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。
3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。
3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。3カラムコンテンツ。
■4カラムコンテンツ
4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。
4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。
4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。
4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。4カラムコンテンツ。
■4枚カードコンテンツ
横並びに4列のカードコンテンツです。レスポンシブで、自動的に折り返していきます。
写真の大きさは、仮の大きさです。
写真の大きさは、それぞれ違っても、下記に表示されている大きさ内に収まります。
ただし、1枚目のフルHDサイズのように大きすぎると、センターの一部が切り取られたようになるので、
2枚目の800×600サイズ程度のものにするのが良いと思います。
■3枚カードコンテンツ
横並びに3列のカードコンテンツです。レスポンシブで、自動的に折り返していきます。
h3 見出し見出し見出し見出し見出し
h4見出し
マーカー付きテキスト。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
p 文章 右寄せ ここにテキストが入ります。
p 文章 センター寄せ
フォントSサイズ(12px)
フォントMサイズ(20px)
フォントLサイズ(36px)
フォント太字(bold)
フォント赤
フォント青
フォント茶
フォント紫
フォント緑
文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。
文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。文字の回り込み。
- タイトル
- 内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります内容スペースになります
- タイトル
- 内容
- タイトル
- 内容
- タイトル
- 内容
- タイトル
- 内容
- タイトル
- 内容
ここはBOX付きのテキストスペースです。ここはBOX付きのテキストスペースです。
ここはBOX付きのテキストスペースです。ここはBOX付きのテキストスペースです。
ここはBOX付きのテキストスペースです。ここはBOX付きのテキストスペースです。
画像サイズ固定(画像幅500px)2列
画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px画像固定横幅500px。テキスト画像サイズ固定(画像幅330px)3列
画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px画像固定横幅330px。テキストテキスト| タイトルタイトル | 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 |
|---|---|
| タイトル | 内容内容内容内容内容内容 |
| タイトル | 内容内容内容内容内容内容 |
| タイトル | 内容内容内容内容内容内容 |
| タイトル | 内容内容内容内容内容内容 |
ボタン左寄せ
ボタンボタンセンター寄せ
ボタンボタン右寄せ
ボタン- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
- テキストテキストテキストテキストテキストテキストテキストテキスト
- テキストテキストテキストテキストテキストテキストテキストテキスト
- テキストテキストテキストテキストテキストテキストテキストテキスト
- テキストテキストテキストテキストテキストテキストテキストテキスト
背景（薄いブラウン）
h3 見出し
テキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。テキストテキストテキストテキスト。。
h4 見出し
テキストテキストテキストテキスト。