ホームページ制作の兵法

読者です 読者をやめる 読者になる 読者になる

ホームページ制作の兵法

マークアップエンジニアによるHTML,CSSなどサイト制作の基礎知識

CSS backgroundプロパティを極めて、自在に背景を置くWEBサイト制作の技術

CSS backgroundプロパティを極めて、自在に背景を置くWEBサイト制作の技術

なぜCSSbackgroundプロパティを勉強したいと思ったのか?

それは背景や意味を持たない画像を思い通りに配置したいと思ったから。

今回は背景の基礎を学ぶことで、背景画像の配置に悩むのは辞めよう!

 

backgroundプロバティの初期値

  • background-image: none     表示画像はありません
  • background-position: 0% 0%  表示位置は左から0、上から0の位置です
  • background-size: auto auto   サイズはautoで表示します
  • background-repeat: repeat     縦方向と横方向に繰り返します
  • background-origin: padding-box 背景の基準点はパディングされた位置です
  • background-clip: border-box   背景の表示エリアはボーダーボックスの状態
  • background-attachment: scroll  背景の固定対象はスクロールで処理され、ボックスに対して固定されます
  • background-color: transparent  背景色は透明です

 

練習問題

backgroundプロパティを使って、リストスタイルの位置を変えよう!

http://abenosite.webcrow.jp/hatena/17_04/22_background.html

1.上のリンクをChromeで開き、画面右クリック→検証をする

 

---------------------------------------------------------------------------------------

f:id:site100:20170422181551p:plain

---------------------------------------------------------------------------------------

 

上の状態を検証モードでdiv,ul,liなどの要素を指定して、cssのstyleを変更して調整してみました

 

f:id:site100:20170422181645p:plain

---------------------------------------------------------------------------------------

 

⬇ 完成図です

 

f:id:site100:20170422181815p:plain

---------------------------------------------------------------------------------------

ポイントはulの「大事」マークがポジション位置を変更すると見切れてしまいます。

その時は、パディングを使って要素の範囲を広げて、「大事」マークが見切れないようします。

以上、検証モードでバックグランドを調整する練習でした。

 

まとめ

backgroundプロバティの種類と初期値を知りました。

練習問題をすることで、リストスタイルが画像になった場合や、写真の上に画像で番号が振られているような場合でも焦らずにコーディングできます。

 

リストスタイルを背景で表現するポイントは

1.padding-leftでリストスタイルの分だけ、右に寄せる

2.background:url() no-repeat 5px 5px;のとき、初めの数字がleftからの距離で、次がtopからの距離になります。

3.無駄なmargin-leftは付けないようにしましょう(以前、見出し位置とリスト位置を合わせるためにやってしまったことがあります。その後、paddingだけで調整しました。)