擬似クラス(K)CSSの擬似要素で背景画像のリピートを使った伸縮可能なコンテンツ枠の作成(PCとスマホ)HOMEHTML/CSS(K)CSSの擬似要素で背景画像のリピートを使った伸縮可能なコンテンツ枠の作成(PCとスマホ)現在はフラットデザインなどのシンプル系のWEBサイトが主流になっていて、画像が主体のサイト案件も減っていますが、業種のジャンルによっては、CSS3メインのデコレーションより、ビットマップ画像をガシガシ使った案件もまだまだあります。そんな訳で今回はCSSの擬似要素を使って、高さと幅の伸縮可能な画像を使ったコンテンツ枠を備忘録としてまとめておきます。今回使用する紙が破れた感じのコンテンツ枠は前回の記事で紹介したものを使用します。分解するかというと、画像を見てもらうのが一番早いと思うので、要はこんな感じ。違和感ない程度にリピートできるように分割します。透明部分を保持する必要があるので、形式はPNG形式で。-->「contents_Box」はBoxの全体囲みで「inner_Box」の中にコンテンツ内容を入れます。}背景画像が612pxという中途半端なサイズで作ってしまったので、半分の306pxで設定してます。100%;」で背景画像を横幅縮小させて全て表示させてます。DEMO【スマホ向け】横幅と高さが可変する場合※背景色がベタ色の場合スマホサイトの場合は、横幅と一緒に高さが可変するので、「.inner_Box」に背景画像を指定すると、上下と真ん中の画像がズレます。この場合は全体くくりの「.contents_Box」に真ん中のリピートの背景画像をかけてみました。}ですが、この記述だとこんな感じで上下の画像が表示されませんでした。考えると、「.contents_Box」に真ん中の画像をリピートさせてるので、画像がかぶっててて見えてないだけでした。背景がベタ色の場合は上下の画像に背景色をつけてあげればきちんと表示されます。no-repeat;}こんな感じです。※横幅広げすぎると画像が荒れます。DEMO【スマホ向け02】背景がベタ色でない場合かといって、すべての場合が背景がベタ色ではない場合があるので、透過PNGを使う場合は、「min-height」を設定してあげれば、おけです。100%;}んで、できたのがこんな感じ。※これも横幅広げすぎると画像が荒れます。DEMOまとめスマホ版の方は横幅広げすぎると荒れちゃったりするんで、タブレット用とスマホ用は別でやったりと、果たしてコレが一番正しい設定なのかも微妙なとこですが、とりあえず伸縮可能なコンテンツ枠ができました。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。