ホームページの作り方 〜応用編08〜
2019年10月25日
みなさま、こんにちはー(*´ω`*)ノ
花です(*´ω`*)
野球日本シリーズ、ソフトバンクが優勝しましたね!
私は、住んでるところが住んでるところなのでソフトバンクはやっぱり応援しています。
ただ、セ・リーグに関しては、うちの家族は昔からジャイアンツファンなんです。
ということで、うちの家族は今回の日本シリーズはどちらも応援していたという感じでした(笑)
とはいえ、ソフトバンクの4連勝という形は、圧倒的すぎるのかなぁ……と思いました。
本当にソフトバンクは強いですね!
ソフトバンクファンにとっては楽しい日本シリーズだったのかもしれませんが、ジャイアンツファンにはちょっとがっかりだったのかも?(´・ω・`)
ですが、勝負の世界なので仕方ないですね。
そうはいっても、ソフトバンク優勝おめでとうございます!
私はソフトバンク優勝により、買い物が色々安くできるので、それを狙いますっ(笑)
今年こそは新しいコートが欲しいので、安く手に入るといいなーって思います(*´ω`*)
ということで、今回も前回に引き続きホームページの作り方のお話です。
今回は、「ホームページの作り方 〜応用編08〜」となります!
では、問題です。
今日も、まず頭の柔軟体操としてなぞなぞです(*´ω`*)
36台もの車を所有しているが、使わずに眠らせているという大金持ちは誰?
ヒントは、36を他の言い方にします。
正解は、最後に(*´ω`*)
では、本題です。
前回は、背景に画像を指定しました。
指定の仕方を復習すると、
body {
backgroud-image: url("ファイルの場所+ファイル名");
}
となります。
ただし、このままだと、画像が上下左右に繰り返し貼られていて、ちょっと見た目がよくありません。
そこで、上記に下記のものを加えます。
background-repeat: no-repeat;
これを追加するとどうなるか。
ちなみに、同じ場所に対しての追加は上記の画像の様に書きます。
さて、画像の右側をみてもらったらわかるように(ちょっとわかりにくいかもしれませんが)、背景の画像が左上にあって、右方向にも下方向にも、繰り返しされていません。
no-repeatを指定するとこうなるんです。
これ、他にも指定方法があります。
repeat-x とすると、横方向に繰り返します。
repeat-y とすると、縦方向に繰り返します。
ちなみに、repeat がデフォルトの状態です。
と、このような感じで、背景画像は
デフォルト → repeat
横方向繰り返し → repeat-x
縦方向繰り返し → repeat-y
繰り返さない → no-repeat
となります。
ちなみに、2回だけ繰り返すなんてことはこの方法では無理です。
ただ、この方法を使わず他のいろんな方法を使うことでそういったこともできるので、興味がある方は調べてみてくださいね(*´ω`*)
ということで、今回は繰り返しについてお話しました。
ですが、じゃあ、左上に画像を置くのではなく、真ん中の上とか、右上がいいとかそういったこともできるので次回はそういったお話をしようかと思います(*´ω`*)
では、今回はこの辺でー(*´ω`*)ノ
なぞなぞの正解は、
カーネルサンダース です。
では、~~~ヾ(*'▽'*)o マタネー♪
花です(*´ω`*)
野球日本シリーズ、ソフトバンクが優勝しましたね!
私は、住んでるところが住んでるところなのでソフトバンクはやっぱり応援しています。
ただ、セ・リーグに関しては、うちの家族は昔からジャイアンツファンなんです。
ということで、うちの家族は今回の日本シリーズはどちらも応援していたという感じでした(笑)
とはいえ、ソフトバンクの4連勝という形は、圧倒的すぎるのかなぁ……と思いました。
本当にソフトバンクは強いですね!
ソフトバンクファンにとっては楽しい日本シリーズだったのかもしれませんが、ジャイアンツファンにはちょっとがっかりだったのかも?(´・ω・`)
ですが、勝負の世界なので仕方ないですね。
そうはいっても、ソフトバンク優勝おめでとうございます!
私はソフトバンク優勝により、買い物が色々安くできるので、それを狙いますっ(笑)
今年こそは新しいコートが欲しいので、安く手に入るといいなーって思います(*´ω`*)
ということで、今回も前回に引き続きホームページの作り方のお話です。
今回は、「ホームページの作り方 〜応用編08〜」となります!
では、問題です。
今日も、まず頭の柔軟体操としてなぞなぞです(*´ω`*)
36台もの車を所有しているが、使わずに眠らせているという大金持ちは誰?
ヒントは、36を他の言い方にします。
正解は、最後に(*´ω`*)
では、本題です。
前回は、背景に画像を指定しました。
指定の仕方を復習すると、
body {
backgroud-image: url("ファイルの場所+ファイル名");
}
となります。
ただし、このままだと、画像が上下左右に繰り返し貼られていて、ちょっと見た目がよくありません。
そこで、上記に下記のものを加えます。
background-repeat: no-repeat;
これを追加するとどうなるか。
ちなみに、同じ場所に対しての追加は上記の画像の様に書きます。
さて、画像の右側をみてもらったらわかるように(ちょっとわかりにくいかもしれませんが)、背景の画像が左上にあって、右方向にも下方向にも、繰り返しされていません。
no-repeatを指定するとこうなるんです。
これ、他にも指定方法があります。
repeat-x とすると、横方向に繰り返します。
repeat-y とすると、縦方向に繰り返します。
ちなみに、repeat がデフォルトの状態です。
と、このような感じで、背景画像は
デフォルト → repeat
横方向繰り返し → repeat-x
縦方向繰り返し → repeat-y
繰り返さない → no-repeat
となります。
ちなみに、2回だけ繰り返すなんてことはこの方法では無理です。
ただ、この方法を使わず他のいろんな方法を使うことでそういったこともできるので、興味がある方は調べてみてくださいね(*´ω`*)
ということで、今回は繰り返しについてお話しました。
ですが、じゃあ、左上に画像を置くのではなく、真ん中の上とか、右上がいいとかそういったこともできるので次回はそういったお話をしようかと思います(*´ω`*)
では、今回はこの辺でー(*´ω`*)ノ
なぞなぞの正解は、
カーネルサンダース です。
では、~~~ヾ(*'▽'*)o マタネー♪
この記事へのコメント
コメントを書く