ホームページの作り方 〜応用編09〜
2019年10月26日
みなさま、こんにちはー(*´ω`*)ノ
花です(*´ω`*)
年末年始まであと約2ヶ月となりました。
みなさんは今年やり残したことなどないでしょうか?
私はボーリングに行きたいっ!!
というのも、私と弟2人は毎年お盆と年末年始にボーリングに3人で行くんです(*´ω`*)
とはいっても、私が一番下手なのでスコアは私が一番低いのですが、それでも大人になってからきょうだいで遊ぶことなんて滅多にないし、私にとってはこのお盆と年末年始のボーリングは一大イベントなのです!!
なのに! なのに!!
今年のお盆は私が入院していたこともあって、この一大イベントが開催されなかったのです!
もう悔しいし悲しいし……(´・ω・`)
まして、今年のお正月に行った時、私はちょっとした自分なりのコツに気付いて、それまでスコアが80前後だったのが、120越えることが多くなり、めちゃくちゃ楽しくなっていたんです><
なのに、行けなかった(´;ω;`)
弟2人が、2人とも実家に帰ってくることもほぼないので、なかなか普段の開催も見込めないので、次は年末年始になるか、誰かと一緒に行くしかないです!
;">誰かボーリング行ってください!!
と、いつもの世間話はこれくらいにして、今日は昨日までの引き続きで背景の事について書いていこうと思います。
今回は、「ホームページの作り方 〜応用編09〜」となります!
では、質問です。
ちょっとした復習です。
文字の色を変えたり、背景の色を変えたりするときに、〇〇進数っていうもの使ったと思います。
さて、この〇〇に入る数字はなんでしょう?
正解は、16です。
16個の数字とアルファベットを使い、数値を表現する方法です。
ちなみに、普段私たちが使っている0から9までの10個の数字を使い数値を表現する方法を10進数といいます。
それでは、本題です。
昨日までは、背景に画像を置いたことと、その画像の繰り返しについてお話しました。
ところが、この方法だと、画像は絶対に左上に置かれることになります。
でも時には、画像を右上に置いたり、真ん中の上、左下など、置きたいときがあるものです。
そこで使われるものが、
background-position
です。
これを使うと好きな位置に画像を置くことが出来ます。
例として、右上に画像を置く場合
真ん中下に画像を置く場合
このようになります。
書き方として、
left,center,right と top,center,bottom を半角スペースをあけて入力します。
left,center,right はX方向(横方向)の位置になり、
top,center,bottom はY方向(縦方向)の位置になります。
ですので、この組み合わせによって、好きな位置に画像を置くことが出来ます。
また、このような書き方もあります。
細かな数値で表現するという方法ですね(*´ω`*)
この方法を使うとより細かく好きな位置に画像をおくことができるので、みなさんも色々好きな位置を試してみてください。
さて、明日は、背景の大きさに合わせて、画像がある程度大きさを合わせるという方法を書いていこうと思います。
知っておいて損はないのでぜひ見てくださいね(*´ω`*)
ということで今回はこの辺でー(*´ω`*)ノ
~~~ヾ(*'▽'*)o マタネー♪
花です(*´ω`*)
年末年始まであと約2ヶ月となりました。
みなさんは今年やり残したことなどないでしょうか?
私はボーリングに行きたいっ!!
というのも、私と弟2人は毎年お盆と年末年始にボーリングに3人で行くんです(*´ω`*)
とはいっても、私が一番下手なのでスコアは私が一番低いのですが、それでも大人になってからきょうだいで遊ぶことなんて滅多にないし、私にとってはこのお盆と年末年始のボーリングは一大イベントなのです!!
なのに! なのに!!
今年のお盆は私が入院していたこともあって、この一大イベントが開催されなかったのです!
もう悔しいし悲しいし……(´・ω・`)
まして、今年のお正月に行った時、私はちょっとした自分なりのコツに気付いて、それまでスコアが80前後だったのが、120越えることが多くなり、めちゃくちゃ楽しくなっていたんです><
なのに、行けなかった(´;ω;`)
弟2人が、2人とも実家に帰ってくることもほぼないので、なかなか普段の開催も見込めないので、次は年末年始になるか、誰かと一緒に行くしかないです!
;">誰かボーリング行ってください!!
と、いつもの世間話はこれくらいにして、今日は昨日までの引き続きで背景の事について書いていこうと思います。
今回は、「ホームページの作り方 〜応用編09〜」となります!
では、質問です。
ちょっとした復習です。
文字の色を変えたり、背景の色を変えたりするときに、〇〇進数っていうもの使ったと思います。
さて、この〇〇に入る数字はなんでしょう?
正解は、16です。
16個の数字とアルファベットを使い、数値を表現する方法です。
ちなみに、普段私たちが使っている0から9までの10個の数字を使い数値を表現する方法を10進数といいます。
それでは、本題です。
昨日までは、背景に画像を置いたことと、その画像の繰り返しについてお話しました。
ところが、この方法だと、画像は絶対に左上に置かれることになります。
でも時には、画像を右上に置いたり、真ん中の上、左下など、置きたいときがあるものです。
そこで使われるものが、
background-position
です。
これを使うと好きな位置に画像を置くことが出来ます。
例として、右上に画像を置く場合
真ん中下に画像を置く場合
このようになります。
書き方として、
left,center,right と top,center,bottom を半角スペースをあけて入力します。
left,center,right はX方向(横方向)の位置になり、
top,center,bottom はY方向(縦方向)の位置になります。
ですので、この組み合わせによって、好きな位置に画像を置くことが出来ます。
また、このような書き方もあります。
細かな数値で表現するという方法ですね(*´ω`*)
この方法を使うとより細かく好きな位置に画像をおくことができるので、みなさんも色々好きな位置を試してみてください。
さて、明日は、背景の大きさに合わせて、画像がある程度大きさを合わせるという方法を書いていこうと思います。
知っておいて損はないのでぜひ見てくださいね(*´ω`*)
ということで今回はこの辺でー(*´ω`*)ノ
~~~ヾ(*'▽'*)o マタネー♪
この記事へのコメント
コメントを書く