「自分の仕事は自分でクリエイト」をコンセプトとしたWebデザイナーのための体験型オンラインスクール。自分の力で生きていくWebデザイナーを目指します。

CSS復習 4回目 背景関連のプロパティを効果的に活用したWebデザインのポイントと背景画像制作のテクニック

CSS 背景画像 ポイント

今回のZoom勉強会は背景画像の基礎と使いどころです。

スマホでWebページを見る人が増えたことから、最近は1ページに情報が詰まった長ーいページ制作の案件が増えてきました。
シングルページとかランディングページともいいますね。

長いページをスクロールするのに

いかに興味を持って、飽きずに読んでもらえるか?

どうやって伝えたい情報と共にワクワク感を感じてもらえるか?

というところがポイントとなります。

そこで使いこなしたいのがCSSでの背景画像の扱い。

コンテンツの見せ方の工夫背景画像制作のテクニック、制作サイズのポイントもバッチリやりました。

まず、初心者の方向けに、基礎部分を確認したあと、Webサイトのどの部分にどんなサイズ使えば効果的なデザインになるのか?そのポイントをお伝えしています。

参加者の声

  • 背景画像を配置することで表現の幅が広がるので、実用的だと思いました。
  • liタグの画像調整については、細かい部分まで教えていただけたので、今後に役立てられると思いました。
  • 楽天の商品ページを作ることがありますので、イメージ画像を取り入れた制作をやってみたいと思います。
  • とてもわかりやすく、後半のデザインは自分が知らないことばかりで有意義でした。
  • 今後、Photoshopをきわめて、かっこいいヘッダー画像を作成していきたいです。
  • 本当に衝撃なレッスンでした。
  • 早速委託先案件でノート開きつつバンバン使わせてもらってます!
  • Photoshopの使い方を拝見して、自分がなぜデザインに苦手意識があり、ワンパターンのデザインになりがちなのかがわかりました。
  • 使い方知るだけでもだいぶ変わる気がします。今までPhotoshopから逃げてたのでちゃんと向き合います。
  • 自分はかなり付け焼き刃でやってきたなぁと思ってはいたのですが、今までなんとなくでやっていたことがはっきりしました。
  • CSSの「なぜこうなるか?」「こうしたほうがいい理由」をしっかり説明してくださるのでスッと入ってきました。
  • あとは一番ハッとしたのは、ずっと感じてたphotoshopの苦手意識、、、、まず「知らないこと」が多すぎるんだなと改めて感じました。
  • backgroundプロパティの正しい指定の仕方、特にliに画像をつけるときのemでの細かい調整、目から鱗でした!
  • 背景画像の作り方の引き出し→ドットなどのパターンを一つ作り応用できること、画像を重ねる&Photoshopで作りながら調整するということ(今まで結構ガチガチに1枚絵で作っていました)、画像を作りながら&CSSでさらに調整できると表現の幅も広がるし早いし使い回しも効くと思いました。
    あとPhotoshopの画像の重ね方。正直初めて知ることばかりでした・・・
  • 全部仕事に活かせそうです。
  • 仕事的でCSSでのカスタマイズ、背景画像で変化をつけることが求められる案件があるので、もう早速今の案件から使います!!!
  • リアルタイムで先生の操作を見ながらというのもすごく勉強になるなと思いました。
  • こちらからの質問タイムなどもこまめに挟んでくださり参加しやすかったです。

ご質問・ご感想をお寄せください。

今回の動画はいかがだったでしょうか?ぜひ、あなたのご感想をお待ちしております!

【会員マイページ>サポートデスク】からどうぞ!

関連記事

「自分の仕事は自分でクリエイトする」

当サイトは、Webクリエイターズオンラインスクール メンバー専用サイトです。