人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする

2017年 08月 17日
背景画像の設定は、ページデザイン上で必ず必要になります。 テクスチャーの利用や、ネット速度の向上で、最近は大きい画像を背景にする事も多くなっています。 今回はその基礎になるテストです。 以下のテスト手順は、実際のアレンジのテスト作業にも応用できると思います。

Toolsの編集画面の説明は以下のページをサンプルにしています。 実際にDevToolsを操作しながら読まれると、いっそう判り易いでしょう。



 〔 背景画像のプロパティ書式をテストする 〕 


 「body」の確認とプロパティの準備 

サンプルページの下方の、空白の多い所までスクロールしています。 DevToolsを起動して、左ウインドウのHTMLを上方に辿り「body」と言う要素を探し、これをクリックしてターゲットにしました。

Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_19300478.png

「body」という要素はネット上の殆どのページに有りますが、その全てで「body」に背景画像や背景色を設定しているとは限りません。 しかし、このサンプルページは「body」にテクスチャーを背景画像として設定しています。 右側のCSSを見ると、青い下線付きの「URL」の文字列があり、それがすぐにわかります。 この「background」プロパティのチェックを外すと、ページ全体の背景が白になるのが確認出来ます。

今回は、背景に画像を使いたいので、このページのブログジャンルのバッジの画像を利用します。 下図はToolsの左上のボタンを押し、このバッジをクリックしてターゲットにした所です。

Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_19390298.png

左ウインドウのHTMLを右クリックして、メニューでこの要素のコピーを指定します。

Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_19404907.png

これをメモ帳にペーストして、バッジの画像のURLを調べました。(下のその内容ですが、改行して見易くしています)

    src="http://md.exblog.jp/img/genre/banner/2/banner_l_11-9.gif"
alt="ブログ"
style="background: none;">

必要なのは上の太字の部分だけです。 今回はネットを調べて、背景画像の配置に関して、使い手の多いプロパティを用意しました。 メモ帳の上で、これを使える形に清書して、上のURLも組み込んで用意したのが下です。

    background: url(http://md.exblog.jp/img/genre/banner/2/banner_l_11-9.gif);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-size: cover;
background-size: contain;



 プロパティをまとめて貼り付ける 

それではToolsに、これらのプロパティを一度に貼り付けます。
背景を指定する対象は「body」ですから、これをターゲットに設定して、Toolsの右上の「」を押して、新しいCSS項を作りました。

Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_19502547.png

右上の「inspector-stylesheet:1」のリンクを押し「ソースウインドウ」で作業します。

Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_19542338.png

「ソースウインドウ」が表示されました。 プロパティの入力を待つ状態でカーソルが入っています。

Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_19572825.png

先ほどメモ帳に用意したプロパティを貼り付けたところです。 貼り付けたとたんに、Chrome画面の様相が一変します。

Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_20055738.png

デフォルトの「body」の背景指定に対して、Toolsは「inspector」の指定を優先し、直ちに背景指定が変更されたのです。



 各プロパティの効果をテストする 

Toolsの左上「Elements」を押して、メイン画面に戻ります。 CSS項に貼り付けたプロパティのチェックを、最初の行以外は一旦全部外します。 この状態は、「background」プロパティの「値」に、背景画像の「URL」を指定しただけですが、この書式は画像を敷き詰めるのがデフォルトという事です。

Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_20094855.png

この後は、2行目以降のチェックを1個ずつ入れ、各プロパティの効果をテストしました。
以下が有効にしたプロパティとその時のChrome画面の表示です。

background-repeat: no-repeat;
 背景画像が左上隅の1個(大きな画像なら様になる)
Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_20321147.png

background-repeat: repeat-x;
 背景画像が横方向に並ぶ
Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_20360079.png

background-repeat: repeat-y;
 背景画像が縦方向に並ぶ
Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_20371182.png

background-size: cover;
 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
 (注)「cover」はページの高さに画像を拡大した状態です。
Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_20381136.png

background-size: contain;
 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
 (注)「contain」はページの幅に画像を拡大した状態です。
Chrome DevTools を使ってみよう (17) 実践編 / ページ背景画像の書式をテストする_a0349576_20420828.png

〔参考〕
「background」の書式には、背景色、背景画像(色と画像が記述されていると画像が優先)、背景画像の繰り返し、背景画像の表示位置、などの複数の指定をまとめて行う事が可能です。「-color」「-image」「-repeat」「-position」など複数プロパティ行を纏められ、システムへの負担も減ります。
順序に決まりはなく、下の参考例の様に半角スペースで区切って列挙します。

background: #aabbcc url(~~~.gif) no-repeat;



この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-08-17 21:01 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。