エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
(K)CSSの擬似要素で背景画像のリピートを使った伸縮可能なコンテンツ枠の作成(PCとスマホ) | web(K)campus|WEBデザイナーのための技術系メモサイト
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
(K)CSSの擬似要素で背景画像のリピートを使った伸縮可能なコンテンツ枠の作成(PCとスマホ) | web(K)campus|WEBデザイナーのための技術系メモサイト
現在はフラットデザインなどのシンプル系のWEBサイトが主流になっていて、画像が主体のサイト案件も減っ... 現在はフラットデザインなどのシンプル系のWEBサイトが主流になっていて、画像が主体のサイト案件も減っていますが、業種のジャンルによっては、CSS3メインのデコレーションより、ビットマップ画像をガシガシ使った案件もまだまだあります。 そんな訳で今回はCSSの擬似要素を使って、高さと幅の伸縮可能な画像を使ったコンテンツ枠を備忘録としてまとめておきます。 今回使用する紙が破れた感じのコンテンツ枠は前回の記事で紹介したものを使用します。 どう分解するかというと、画像を見てもらうのが一番早いと思うので、要はこんな感じ。 Photoshopで作成した画像を「上画像」「真ん中画像」「下画像」と違和感ない程度にリピートできるように分割します。 透明部分を保持する必要があるので、形式はPNG形式で。(GIFでも違和感ないならオケです) 「PC向け」横幅と高さが決め打ちの場合 横幅と高さが決め打ちのPCサイト