
CSSで背景画像・背景色を設定するには?backgroundプロパティの使い方
ホームページ制作を行う際、必要になるのが背景の設定です。背景は面積が広い分、全体の印象を大きく左右する重要な役割を果たします。
背景の設定には、CSSがよく使われています。背景を設定することは決して難しい作業ではありません。背景に好きな色をつけたり、画像を配置することも簡単です。今回はCSSを使った背景の設定方法をご説明します。
backgroundを使って背景を設定する
背景を指定するには、backgroundというプロパティを使います。backgroundを使うと、背景色の指定や背景画像の設置ができます。しかも、複雑な設定をすることなく、背景画像を設置位置やサイズなど細かな調整を行い、理想のデザインを構築できるのがメリットです。
backgroundでよく使うプロパティを覚えて、思った通りのデザインができるようになると楽しくなります。
背景画像を指定する方法(background-image)
背景に画像を設置するには、background-imageというプロパティを使います。サーバーにアップロードしている画像を呼び出して表示することができます。基本的な使い方は以下のような記述です。
background-image: url(“画像パス”);
画像パスは、絶対パスと相対パスのどちらでも指定可能です。絶対パスとは、URLを指定することで、画像の位置を正確に指定するものです。それに対し、相対パスは現在の階層を基準にして画像の位置を指定するものです。相対パスの指定は、絶対パスより記述が簡単に済みます。
背景画像の色々な使い方
背景画像は、必ずしも背景一面に設置するとは限りません。画像の大きさや設置する位置をコントロールすることで、幅広いデザインが可能になるのです。画像を並べて模様を構成すると、オリジナリティの高い背景を設置できます。このようなパターンを構築するには、リピートを使いこなすことが必要です。
ここで紹介するリピートの指定は以下の4種類です。background-repeatというプロパティを使います。
背景画像を縦と横に繰り返し表示する(repeat)
以下のように記述すると、相対パスを指定したsampleという画像を縦と横の両方に繰り返し表示します。画像次第で、全面水玉模様の背景などを簡単に作ることができます。
background-image: url(img/sample.png);
background-repeat: repeat;
背景画像を繰り返さない(no-repeat)
背景画像を繰り返さず、一つだけ表示したい場合はno-repeatを指定します。先ほどのrepeatをno-repeatに変更するだけなので簡単です。
background-image: url(img/sample.png);
background-repeat: no-repeat;
背景画像を横に繰り返す(repeat-x)
背景画像を横だけに繰り返す方法もあります。この場合は、repeat-xを使用します。X軸に画像をリピートするという意味です。
background-image: url(img/sample.png);
background-repeat: repeat-x;
背景画像を縦に繰り返す(repeat-y)
背景画像を縦に繰り返す場合は、repeat-yを使用します。Y軸に画像を繰り返すという指定です。
background-image: url(img/sample.png);
background-repeat: repeat-y;
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング