資料小分類

• HTML/CSSを知る

• Web トップ

• ＨＴＭＬトップ

• ＣＳＳトップ

• 練習記録準備

• スタイルの指定

• 文字フォント指定

• 文字サイズ指定

• 文字色の指定

• 文字位置指定

• インデント指定

• 背景画像

• 画像を回り込む

• ボーダー指定

• 間隔・余白指定

• 中央揃え

• リンクの修飾

• 対象限定スタイル

• 外部 CSS

資料大分類

• 資料トップへ戻る

• 基礎編

• HPを作ってみる

• 白紙からページ作成

• トップページを作成

• サブページを作成

• サイト管理

• HTML/CSSを知る

• Web ページ

• HTML 練習

• CSS 練習

• レイアウト作成

• レイアウト編集

• 最新テクの活用

• フォトモーション

• フルＣＳＳテンプ基本

• フルＣＳＳテンプ応用

• jQuery の基本

リンク

• サイト内検索

• 問い合わせ

• 参加者作品

• ＨＰ勉強会トップ

• Ａ班ホームページ

～背景画像の指定～

基本的な スタイルについての練習です。

練習する CSS プロパティ：　背景について指定

background-color　背景色を指定する

• 要素の背景ボックスの色を指定します。
• 色は背景画像（background-image）の後ろに配置されます。
• また background-clip プロパティが指定されている場合、背景色の領域はその値に従って切り取られます。

• 指定例
  • body {background-color: silver;}
  • h1 {background-color: teal; color: white;}
    • 
    • body 要素の背景色を silver、h1 要素の背景色を teal に設定している

background-image　背景画像を指定する

• 要素の背景に置く画像を指定します。
• 値は、url の後ろに、背景画像の URL をかっこで囲んで示します。

• 指定例
  • body {background-image: url(../img/y7b.gif);}
    • 
    • 指定した画像がページ全体に繰り返し配置される。

background-position 　背景画像の表示位置を指定する

• background-image プロパティで指定した背景画像の、配置領域内での位置を指定します。
• 値は、位置を示すための％値／長さ／キーワードの１～４個の組み合わせとなります。それぞれの値は半角スペースで区切って指定します。

• 指定例１
  • body {
  •     background: url(../img/y7b.gif) no-repeat;
  •     background-position: right-top; }
    • 
    • 背景画像を１つだけ、右上端の場所を指定して配置する。

• 指定例２
  • body {
  •     background: url(../img/y7b.gif) no-repeat;
  •     background-position: bottom 10px right 20px; }
    • 領域の下端から 10px 上、右端から 20px 左の位置に画像を配置する。

background-clip　背景描画領域を指定する （CSS3）

• background-image プロパティで指定した背景画像や、background-color プロパティで指定した背景色の、描画領域を指定します。
  • border-box
    • 背景は border（囲み線を含む）ボックス内に描かれる（初期値）
  • padding-box
    • 背景は padding（囲み線の内側）ボックス内に描かれる
  • content-box
    • 背景は content（コンテンツ）ボックス内に描かれる

• 指定例
  • h1 {
  •     padding: 0.5em; border: dotted orange 10px;
  •     background-image: url(../img/y7b.gif);
  •     background-clip: content-box; }
    • 
    • padding プロパティと border プロパティを指定した h1 要素で、コンテンツ領域にのみ背景画像を表示している。

background-origin　背景配置基準を指定する （CSS3）

• background-image プロパティで指定した背景画像に対し、配置の基準とする対象のボックスを、padding-box、border-box、content-box のいずれかで指定します。

• 指定例
  • h1 { padding: 1em; border: dotted fuchsia 10px;
  •     background: url(../img/y7b.gif) no-repeat;
  •     background-origin: border-box;
  •     background-position: center top; }
    • 
    • 背景画像の配置基準を border-box とし、さらに background-position で「center top」としている。画像の水平方向の中央と上端を配置基準に合わせている。

background-size　背景画像のサイズを指定する （CSS3）

• 値の一個目で画像の幅と、２個目で画像の高さを指定します。

• 指定例
  • h1 { padding: 1em; border: dotted fuchsia 10px;
  •     background: url(../img/y7b.gif) no-repeat;
  •     background-position: left center;
  •     background-size: 30px 30px; }
    • 
    • 背景画像のサイズを幅 30px、高さ 30pxに指定し、h1 要素の左端中央に配置する

background　背景のプロパティをまとめて指定する

• 背景に関するプロパティの値をまとめて１ヶ所で記述するものです。それぞれの値を半角スペースで区切って記述します。

• 指定例
  • body { background: seashell; }
  • div { padding: 1em; border: dotted fuchsia 10px;
  •     background: url(../img/e069.gif) no-repeat right top,
  •     url(../img/y7b.gif) no-repeat top / cover ; }
    • 複数の背景画像が指定されている。

---

• ビルダーでのスタイルの設定ダイアログ：
  • 
  • ビルダーでの background 関連のスタイル設定では、CSS3関連のものは対応できていなく、ソースに直接入力して指定することになります。

---

background  のスタイル設定の詳細は、background-image プロパティを参照します。

継続作品編集：　背景画像の指定

Step-1：　背景画像を準備する

➊下の画像の上で右クリック→［名前を付けて画像を保存］を選択。

• 

➋ファイル名をfootmark.gifとし、勉強会サイト内のimgフォルダーに保存する。

Step-2：　bodyに背景画像を指定する

➊ファイルakita_index.htmlを開く。

➋次のように背景に画像を指定する。画像はダウンロードして保存した物footmark.gifを使う。

• 

• CSSソース： bodyに設定されたスタイル
  • body {
  •   background : url(../img/footmark.gif); 
  • }

➌プレビューで表示し、確認します。

➍上書き保存します。練習結果を記録します。

• 練習結果を「背景画像」に記録します。

応用練習１：　背景色を指定する

背景画像に加えて、背景色を指定してみよう

➊ファイルakita_index.htmlファイルを開く。［名前を付けて保存］で、ファイル名をbackground01.htmlとし、htmlフォルダ―に保存する。

➋背景に画像ファイルだけではなく、背景色も指定します。

• 背景色も設定する
  • 
  • 背景色には、lightyellow (#ffffe0)を追加指定しています。背景色は背景画像の後ろに配置されます。背景画像 footmark.gif の透明部分を通して、その下にある lightyellow の背景色が見えています。

•  

• CSSソース： bodyの編集されたスタイル
  • body {
  •   background-color : lightyellow; （あるいは、#ffffe0）
  •   background-image : url(../img/footmark.gif);
  •   background-position : 0% 0%
  •   background-repeat : repeat ;
  •   background-size : auto auto;
  •   background-origin : padding-box;
  •   background-clip : border-box;
  • }

➌上書き保存する。練習結果を記録します。

• 練習結果を「背景色」に記録します。

応用練習２：　背景にグラデーションを設定する

背景に色のグラデーションを指定してみよう。これはCSS3で実現できるようになりました。Internet Explorerもバージョン 10 からサポートしています。

➊ファイルbackground01.htmlを開く。ページタイトルを［背景にグラデーションを設定する］と変更し、［名前を付けて保存］でgradation01.htmlとしてhtmlフォルダ―に保存する。

➋背景に斜めの線状グラデーションを設定するスタイルを、以下の通り追加する。

• 背景に斜めのグラデーションを追加する
  • body {
  •   background : sandybrown;
  •   background-size : auto auto;
  •   background-origin : padding-box;
  •   background-clip : border-box;
  •   background: linear-gradient(45deg, white, sandybrown);
  • }

•  

• body 要素に斜めのグラデーションの背景
  • 
  • 「45deg」の指定は、対象となる要素ボックスの左下から右上へと伸びる線に沿ったグラデーションを意味するため、ボックスの形状により正確に４５度の角度とは限りません。また、負の値を指定すると、斜めの角度が逆向きになります。

➌bodyの背景に、白と黄色で斜め（角度が45deg）の線状グラデーションが設定されているのを確認する。

➍上書き保存する。練習結果を記録します。

• 練習結果は「背景にグラデーション」に記録します。

応用練習３：　背景画像をウィンドウに固定する

背景画像をウィンドウに固定し、連動スクロールを停止させてみる。

➊ファイルakita_index.htmlを開く。ファイル名をbackground02.htmlとし別名でhtmlフォルダ―に保存します。

➋背景画像をウィンドウに固定し、スクロールしても背景画像はスクロール停止させてみます。

• 

• CSSソース： bodyに設定されたスタイル
  • body{
  •   background : url(img/footmark.gif) 0% 0% / auto auto repeat
  •   fixed padding-box border-box transparent;
  • }

➌IEで表示し、スクロールしても背景画像はスクロールしないことを確認します。

➍ファイルを上書き保存します。練習結果を記録します。

• 練習結果は「背景画像を固定」に記録します。

⇒ 画像を回り込むへ進む