Contents Block Sample その1

はじめに

本ページはブロック要素100％指定のコンテンツエリアを作成する際に利用するサンプルとなります。

本仕様を行う際は必ず、以下のCSSを追記するようにしてください。

利用する際は必ず入れる共通のCSS

それでは以下がコンテンツブロックのCSS参考例となります。

CBlock-color（背景に色を敷く場合）

私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
お客様だけの「安心」を誰よりも考慮し、その期待を上回る「人生」を教授する事が、私たちの使命です。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
「心配無用な暮らし」は、ユーザー、顧客のご身内、地域の皆様、が豊かで幸せな暮らしを送るためにも大事な事です。

「新しい家」「リフォーム」をはじめとし、ホームの修繕や施設の入れ替え、店舗改装や室内装飾工事、エントランスアプローチなどのエクステリアなど総合的な建築業を営んでおります。

執着のある部分をわざわざ残して、直近での生活習慣に合う部屋に変更したり、年を経るごとに経年劣化の激しいところを新しいものと取り替えしたりという改装は、メモリーを大事にしつつ心地よいに生活したいというニーズを満たすことができます。
顧客のお声に耳を傾け、地域の皆様に寄り添い、「心配無用・安全・清潔」をモットーに皆様に「安心な生活」をご用意いたします。
弊社は約20年にわたり、ユーザーのホームに携わってまいりました。
「一回のユーザーを一生のクライアントに」、社員一同皆様との出会いを心待ちにしております。

一級建築士オフィスとして、クライアントのリニューアル計画に楽しさや気持ちが良いさを付加する提案をさせていただきます。

html

CSS

CBlock-img（背景に画像を敷く場合）

背景画像のポイント

  • ・色がシンプル（本サンプルのようにゴチャゴチャします）
  • ・文字などのキャッチが絶対に入っていない事
  • ・意味ありげな壮大な画像
  • ・画像は幅1920px、高さはある程度あるような（レスポンシブを加味）画像

スクロールすると背景も一緒にスクロール(一般的)

私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
お客様だけの「安心」を誰よりも考慮し、その期待を上回る「人生」を教授する事が、私たちの使命です。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
「心配無用な暮らし」は、ユーザー、顧客のご身内、地域の皆様、が豊かで幸せな暮らしを送るためにも大事な事です。

「新しい家」「リフォーム」をはじめとし、ホームの修繕や施設の入れ替え、店舗改装や室内装飾工事、エントランスアプローチなどのエクステリアなど総合的な建築業を営んでおります。

執着のある部分をわざわざ残して、直近での生活習慣に合う部屋に変更したり、年を経るごとに経年劣化の激しいところを新しいものと取り替えしたりという改装は、メモリーを大事にしつつ心地よいに生活したいというニーズを満たすことができます。
顧客のお声に耳を傾け、地域の皆様に寄り添い、「心配無用・安全・清潔」をモットーに皆様に「安心な生活」をご用意いたします。
弊社は約20年にわたり、ユーザーのホームに携わってまいりました。
「一回のユーザーを一生のクライアントに」、社員一同皆様との出会いを心待ちにしております。

一級建築士オフィスとして、クライアントのリニューアル計画に楽しさや気持ちが良いさを付加する提案をさせていただきます。

html

CSS

スクロールすると背景が固定される

私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
お客様だけの「安心」を誰よりも考慮し、その期待を上回る「人生」を教授する事が、私たちの使命です。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
「心配無用な暮らし」は、ユーザー、顧客のご身内、地域の皆様、が豊かで幸せな暮らしを送るためにも大事な事です。

「新しい家」「リフォーム」をはじめとし、ホームの修繕や施設の入れ替え、店舗改装や室内装飾工事、エントランスアプローチなどのエクステリアなど総合的な建築業を営んでおります。

執着のある部分をわざわざ残して、直近での生活習慣に合う部屋に変更したり、年を経るごとに経年劣化の激しいところを新しいものと取り替えしたりという改装は、メモリーを大事にしつつ心地よいに生活したいというニーズを満たすことができます。
顧客のお声に耳を傾け、地域の皆様に寄り添い、「心配無用・安全・清潔」をモットーに皆様に「安心な生活」をご用意いたします。
弊社は約20年にわたり、ユーザーのホームに携わってまいりました。
「一回のユーザーを一生のクライアントに」、社員一同皆様との出会いを心待ちにしております。

一級建築士オフィスとして、クライアントのリニューアル計画に楽しさや気持ちが良いさを付加する提案をさせていただきます。

CAUTION 1

スマホの場合、CSSの「background-attachment: fixed;」が効きませんのでこの書き方では背景を固定する事（パララックス）はスマホだと適応できません。(汎用的に展開できない)
それ以外にも背景画像が荒く指定されてしまう事から、jsにて「background-attachment: scroll;」と指定してあります。（Ver3.02以降より）

CAUTION 2

Ver3.02より以下のCSSが記載されています。もし本設定でも背景固定にできない場合は以下が入っていない可能性があるので、入っていなければCSSを追記してください。

html

CSS

CBlock-img-pa0とCBcolor-bk(CBcolor-wh)（背景に画像とCSSで背景色を敷く場合）

上記指定のメリット

  • ・色がごちゃこちゃしていてもどうにかなる（本サンプルのようになる）
  • ・背景色が透過が使える為、画像に色を敷くことができる。rgba＝Red Green Blue Alpha(透過度)

私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
お客様だけの「安心」を誰よりも考慮し、その期待を上回る「人生」を教授する事が、私たちの使命です。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
「心配無用な暮らし」は、ユーザー、顧客のご身内、地域の皆様、が豊かで幸せな暮らしを送るためにも大事な事です。

「新しい家」「リフォーム」をはじめとし、ホームの修繕や施設の入れ替え、店舗改装や室内装飾工事、エントランスアプローチなどのエクステリアなど総合的な建築業を営んでおります。

執着のある部分をわざわざ残して、直近での生活習慣に合う部屋に変更したり、年を経るごとに経年劣化の激しいところを新しいものと取り替えしたりという改装は、メモリーを大事にしつつ心地よいに生活したいというニーズを満たすことができます。
顧客のお声に耳を傾け、地域の皆様に寄り添い、「心配無用・安全・清潔」をモットーに皆様に「安心な生活」をご用意いたします。
弊社は約20年にわたり、ユーザーのホームに携わってまいりました。
「一回のユーザーを一生のクライアントに」、社員一同皆様との出会いを心待ちにしております。

一級建築士オフィスとして、クライアントのリニューアル計画に楽しさや気持ちが良いさを付加する提案をさせていただきます。

html

CSS

CAUTION 3

CBlock-imgでそのまま入れると分かりますが、padding要素がCBlock-imgの場合は高さ8em程空いている為、背景を敷いたとしてもはみ出ているように見えます。そのようなデザインであれば良いですが、基本は違うと思うので、padding（あくまで高さの指定）が0なCBlock-img-pa0というclass属性を作っています。

CBlock-img-pa0とCBcolor-bk(CBcolor-wh)とbgfix（背景に画像とCSSで背景色を敷く場合＝パララックス）

上記指定のメリット

  • ・色がごちゃこちゃしていてもどうにかなる（本サンプルのようになる）
  • ・背景色が透過が使える為、画像に色を敷くことができる。rgba＝Red Green Blue Alpha(透過度)

私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
お客様だけの「安心」を誰よりも考慮し、その期待を上回る「人生」を教授する事が、私たちの使命です。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
「心配無用な暮らし」は、ユーザー、顧客のご身内、地域の皆様、が豊かで幸せな暮らしを送るためにも大事な事です。

「新しい家」「リフォーム」をはじめとし、ホームの修繕や施設の入れ替え、店舗改装や室内装飾工事、エントランスアプローチなどのエクステリアなど総合的な建築業を営んでおります。

執着のある部分をわざわざ残して、直近での生活習慣に合う部屋に変更したり、年を経るごとに経年劣化の激しいところを新しいものと取り替えしたりという改装は、メモリーを大事にしつつ心地よいに生活したいというニーズを満たすことができます。
顧客のお声に耳を傾け、地域の皆様に寄り添い、「心配無用・安全・清潔」をモットーに皆様に「安心な生活」をご用意いたします。
弊社は約20年にわたり、ユーザーのホームに携わってまいりました。
「一回のユーザーを一生のクライアントに」、社員一同皆様との出会いを心待ちにしております。

一級建築士オフィスとして、クライアントのリニューアル計画に楽しさや気持ちが良いさを付加する提案をさせていただきます。

html

CSS

CBlock-img-pa0とCBcolor-bk(CBcolor-wh)とsection （コンテンツ領域のみ背景を敷く）

ご挨拶

私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
お客様だけの「安心」を誰よりも考慮し、その期待を上回る「人生」を教授する事が、私たちの使命です。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
「心配無用な暮らし」は、ユーザー、顧客のご身内、地域の皆様、が豊かで幸せな暮らしを送るためにも大事な事です。

「新しい家」「リフォーム」をはじめとし、ホームの修繕や施設の入れ替え、店舗改装や室内装飾工事、エントランスアプローチなどのエクステリアなど総合的な建築業を営んでおります。

執着のある部分をわざわざ残して、直近での生活習慣に合う部屋に変更したり、年を経るごとに経年劣化の激しいところを新しいものと取り替えしたりという改装は、メモリーを大事にしつつ心地よいに生活したいというニーズを満たすことができます。
顧客のお声に耳を傾け、地域の皆様に寄り添い、「心配無用・安全・清潔」をモットーに皆様に「安心な生活」をご用意いたします。
弊社は約20年にわたり、ユーザーのホームに携わってまいりました。
「一回のユーザーを一生のクライアントに」、社員一同皆様との出会いを心待ちにしております。

一級建築士オフィスとして、クライアントのリニューアル計画に楽しさや気持ちが良いさを付加する提案をさせていただきます。

html

CSS

(応用編)Block3

ご挨拶

私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。

ご挨拶

私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。