1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZerのCSSエディタでページの背景を設定する方法

KompoZerのCSSエディタでページの背景を設定する方法

CSSエディタの「背景タブ」の設定を使って、ページの背景の色や背景画像の指定を行います。 CSSエディタの左側に表示されているセレクタ(図の場合はbody、.t […]

  • 2015/7/26
  • 2012/1/7

CSSエディタの「背景タブ」の設定を使って、ページの背景の色や背景画像の指定を行います。

CSSエディタの左側に表示されているセレクタ(図の場合はbody、.textなど)のリストから、背景を指定したいセレクタを選択してから、背景の設定を指定します。

CSSエディタ「背景」タブの使い方

KompoZerのCSSエディタ「背景」タブには、背景色、透明度、背景画像、タイリング、位置の、5つの設定項目があります。

それぞれの設定項目について、ひとつずつ解説します。

  • 背景色

    ページの背景色を指定します。
    右側のボタンをクリックすると色の選択パネルが表示されますので、背景に設定したい好きな色を選びましょう。

    カラーパレット以外にも16進数の色コードや色名(redやblueなど)での指定もできます。

  • 透明度

    透明度の設定ができますが、ブラウザによって動きが異なるうえに、使いこなす為にはコツがあります。

    「opacity」というプロパティを使って設定されます。

    うまく設定すれば、図のようにテキスト部分の背景色を半透明して、その下にある背景画像をうっすらと見せるということもできます。

  • 背景画像

    ページの背景画像を指定します。
    指定した背景画像は画像の並べ方(デスクトップ画像の表示方法に近いイメージです)や表示する位置を指定することができます。

    背景画像の並べ方は「タイリング」で指定します。この項目は背景画像の選択を行った場合のみ有効になります。
    タイリングは「水平方向のみ」「垂直方向のみ」「両方向」の3種類から指定します。

  • ページスクロールで画像も一緒にスクロールする

    このチェックを入れておく事により、ページをスクロールしても背景画像も一緒にスクロールさせることができます。

    背景画像をスクロールさせる場合はページの背景色と継ぎ目のようなものが無い画像のほうが自然になります。

  • 背景画像の位置

    背景画像の表示位置を、水平方向と垂直方向でそれぞれ「上」「中央」「下」から選ぶことができます。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします