ホームページの作り方 〜応用編07〜
2019年10月24日
みなさま、こんにちはー(*´ω`*)ノ
花です(*´ω`*)
またもや台風が近づいていますね。
今回は日本に上陸しない予想らしいですが、大手を振って喜ぶということにはならないようです(´・ω・`)
というのも、天気予報を見ている方はすでにご存じだと思いますが、台風は関東方面の東側を通過予定で、上陸の恐れはないらしいですが、雨がずっと降り続けるような予報が出ています。
そう、前回の台風19号により関東方面の被災地は今でも大変な思いをしています。
あの、川の氾濫や決壊。
今もテレビでよく流れていますが、本当に怖いと思うし、被害にあわれた方はもっと怖かったでしょう。
そんな状態にもかかわらず、また雨が降り続くって本当に嫌がらせにもほどがあります!
連日、テレビでもあの反乱や決壊した模様を流していますが、亡くなった方々や被害にあわれた方々を考えると、その辛さや悲しみがテレビを通して訴えかけてくるような思いになり私もみていると辛くなってきます。
とはいえ、まだ悲しみにくれている人は実は少ないのかもしれません。
人は強いです。
そして、ありがたいことに日本国内だけでなく、世界中の人が被災された方々を応援してくれています。
SNSでも拡散されたのでご存知の方もたくさんいらっしゃると思いますが、台風19号のとき、ラグビーカナダ代表の選手は戦わずして敗退が決まったにもかかわらず、日本に残りボランティアに参加してくれました。
きっと、その情報だけでなく、いろんな国や人種なんて関係なく日本を応援してくれていると思ったら、私はすごく心強いと感じます。
だからこそ、乗り越えていきたいですね。
そして、できることなら、これ以上の被害がないことを祈ります……。
では、そろそろ本題に入ろうと思います。
今回は、前回の背景色変更に続き、「ホームページの作り方 〜応用編07〜」となります。
さて、質問です。
今回は、ひさしぶりになぞなぞにしたいと思います(*´ω`*)
幼稚園、小学生、中学生、高校生、大学生、専門学生、大学院生。 一番大きいのは?
正解は、最後にしたいと思います(*´ω`*)
では、本題。
前回は背景色を変えるということで、
body {
background-color: #faebd7;
}
という記述をしました。
今回は、背景に画像を入れたいと思います。
画像は何でもいいのですが、せっかくなのでインターネット上のフリー素材のサイトからお借りしました。
では、書き方です。
今回は、前回の色を付けた部分を変更したいと思います。
ですので、上記にある
background-color: #faebd7;
の部分を、
下記のように書き換えてください。
background-image: url("images/03.jpg");
ちなみに、この場合、画像のファイル名は03.jpgで、index.htmlのあるところにimagesというフォルダに用意し、その中に先ほどの03.jpgを入れている状態です。
ちなみにこのやり方は以前、ホームページの作り方 〜追加編01〜でお話したので、よかったら読み直してみてくださいね(*´ω`*)
ということで、表示すると、
このような感じになります。
これは、画面を少し縮小して大きく見ているのですが、背景画像が繰り返し表示されています。
ただこのままだと、ちょっと見た目がよくないですよね。
ということでこういう場合、
背景画像を繰り返し表示でもおかしくないタイプの画像を準備する
もしくは
多少大きさ的に切れる部分があってもぴったりと合わせるか
になると思います。
さて、そのやり方はまた次回のお話(*´ω`*)
ということで今回は、この辺でー(*´ω`*)ノ
なぞなぞの答えは、幼稚「園」です(*´ω`*)
では~~~ヾ(*'▽'*)o マタネー♪
花です(*´ω`*)
またもや台風が近づいていますね。
今回は日本に上陸しない予想らしいですが、大手を振って喜ぶということにはならないようです(´・ω・`)
というのも、天気予報を見ている方はすでにご存じだと思いますが、台風は関東方面の東側を通過予定で、上陸の恐れはないらしいですが、雨がずっと降り続けるような予報が出ています。
そう、前回の台風19号により関東方面の被災地は今でも大変な思いをしています。
あの、川の氾濫や決壊。
今もテレビでよく流れていますが、本当に怖いと思うし、被害にあわれた方はもっと怖かったでしょう。
そんな状態にもかかわらず、また雨が降り続くって本当に嫌がらせにもほどがあります!
連日、テレビでもあの反乱や決壊した模様を流していますが、亡くなった方々や被害にあわれた方々を考えると、その辛さや悲しみがテレビを通して訴えかけてくるような思いになり私もみていると辛くなってきます。
とはいえ、まだ悲しみにくれている人は実は少ないのかもしれません。
人は強いです。
そして、ありがたいことに日本国内だけでなく、世界中の人が被災された方々を応援してくれています。
SNSでも拡散されたのでご存知の方もたくさんいらっしゃると思いますが、台風19号のとき、ラグビーカナダ代表の選手は戦わずして敗退が決まったにもかかわらず、日本に残りボランティアに参加してくれました。
きっと、その情報だけでなく、いろんな国や人種なんて関係なく日本を応援してくれていると思ったら、私はすごく心強いと感じます。
だからこそ、乗り越えていきたいですね。
そして、できることなら、これ以上の被害がないことを祈ります……。
では、そろそろ本題に入ろうと思います。
今回は、前回の背景色変更に続き、「ホームページの作り方 〜応用編07〜」となります。
さて、質問です。
今回は、ひさしぶりになぞなぞにしたいと思います(*´ω`*)
幼稚園、小学生、中学生、高校生、大学生、専門学生、大学院生。 一番大きいのは?
正解は、最後にしたいと思います(*´ω`*)
では、本題。
前回は背景色を変えるということで、
body {
background-color: #faebd7;
}
という記述をしました。
今回は、背景に画像を入れたいと思います。
画像は何でもいいのですが、せっかくなのでインターネット上のフリー素材のサイトからお借りしました。
では、書き方です。
今回は、前回の色を付けた部分を変更したいと思います。
ですので、上記にある
background-color: #faebd7;
の部分を、
下記のように書き換えてください。
background-image: url("images/03.jpg");
ちなみに、この場合、画像のファイル名は03.jpgで、index.htmlのあるところにimagesというフォルダに用意し、その中に先ほどの03.jpgを入れている状態です。
ちなみにこのやり方は以前、ホームページの作り方 〜追加編01〜でお話したので、よかったら読み直してみてくださいね(*´ω`*)
ということで、表示すると、
このような感じになります。
これは、画面を少し縮小して大きく見ているのですが、背景画像が繰り返し表示されています。
ただこのままだと、ちょっと見た目がよくないですよね。
ということでこういう場合、
背景画像を繰り返し表示でもおかしくないタイプの画像を準備する
もしくは
多少大きさ的に切れる部分があってもぴったりと合わせるか
になると思います。
さて、そのやり方はまた次回のお話(*´ω`*)
ということで今回は、この辺でー(*´ω`*)ノ
なぞなぞの答えは、幼稚「園」です(*´ω`*)
では~~~ヾ(*'▽'*)o マタネー♪
この記事へのコメント
コメントを書く