花の歌奏

みなさま、こんにちはー(*´ω｀*)ﾉ
花です(*´ω｀*)


数日前にお話したすごくきれいで素敵な銀杏の木なのですが、もう冬本番ってことなのか6、7割散ってしまいました(´・ω・｀)

それがすごく残念で仕方ないのですが、そのおかげでまた素敵なものが見れています。

それは、地面一面の黄色い絨毯。

あれだけ大きな木だっただけに、木を囲んでぐるっとすごく素敵な黄色い絨毯が出来上がってるんです(*´ω｀*)

それがもう本当に綺麗なんです(*´ω｀*)


とはいえ、近くで見たら汚れとか当然あるとは思うのですが、車で通りすぎる分にはもうとても綺麗で……。


ただ、それと同時に思うことがあります。


あれを掃除して、片付けるって大変そう……




ということで、今回もホームページ作成のお話です。

今回は、「ホームページの作り方 〜知ってないと大損編03〜」となります。




今回は質問ありです！


以前は、25を引いて求めていました。
その後、88を引いて求めるようになりました。
さらにその後、今度は12を足して求めるようになりました。

では、今はどうやって求めるでしょうか？

ヒントは、「求める」と言葉を使っている以上、何かの数字の解を求めています。


答えは最後に(*´ω｀*)


さて、それでは本題です(*´ω｀*)

一昨日から、ホームページ作成の上で必ず知っておかなければいけないお話をしています。

一昨日は、ブラウザによって見え方が変わることがあり、それを考慮して作らなければいけないというお話でした。
そのうえで、基準になるのは全世界でシェア率の高いグーグルクロームというお話をしました。

ただ、これはあくまで基準です。

基本的には、全ブラウザで同じように見えるのが望ましいです。

これをできるだけ達成するためには、ホームページを作成している段階で、色んなブラウザで確認しつつやることです。


そして、昨日からお話していることは、レスポンシブWebデザインという考え方のお話です。

これは、パソコンでもタブレットでもスマートフォン（携帯）でもできるだけ１つのサイトのCSSだけをいじって、それぞれの環境で最適な表示をしましょうという考え方です。


じゃあ、実際にはどういう考え方かというお話も昨日させていただきました。

インターネットで色々調べると、それぞれの考え方があるので一概にこれがいいとは言えませんが、私はいろんなサイトを見させてもらった結果、とりあえず、今は

560px以下　　　→　スマートフォン（携帯）向け
560px〜960px　 →　タブレット向け
960px以上　　　→　パソコン向け

と3つの考え方をすることにしています。

なので、いわゆるブレイクポイントと言われるものは560pxと960pxの2つを境にしています。


ただ、これは、状況や作っているサイトによっても変わるし、そのときそのときの流行り廃りのスマートフォンの画面サイズなどによっても変わります。

なので、この560pxと960pxのブレイクポイントが正解とはいえないので、気を付けてください！


さて、では、実際CSSでどんなふうに書くのか、少し紹介してみようと思います。


例えば、

960px以上（パソコン向け）のbodyは赤
560px〜960px（タブレット向け）のbodyは青
560px以下（スマートフォン（携帯）向け）のbodyは緑

としたいとします。

その場合、このようにかきます。

body {
background-color: #ff0000;
}
@media screen and(max-width: 960px) {
body {
background-color: #0000ff;
}
}
@media screen and(max-width: 560px) {
body {
background-color: #00ff00;
}
}

このように記述します。

また後日お話しますが、私の場合は基準はパソコン向けのホームページなので、まず、パソコン向けのcssを書きます。
次に、この部分

@media screen and(max-width: 960px)

これは、画面のサイズが960px以下の場合という意味になります。
なので、

@media screen and(max-width: 960px) {
ここに960px以下のときのcssの記述をする
}

となります。

ただこのままだと、960px以下はすべて同じように見えます。

でも、やりたいことは560px以下は別のCSSが書きたいので、さらに追加で、

@media screen and(max-width: 560px) {
ここに560px以下のときのcssの記述をする
}

となるわけです。

こうすることによって、

パソコン向けとタブレット向けとスマートフォン（携帯）向けが実現できるわけです。

ちなみに、数字の部分を変えることによって、自分の考えるレスポンシブWebデザインのサイズに変えることが出来ます。
例えば、タブレットは800px以下にしたいと思えば、

@media screen and(max-width: 800px) {
ここに800px以下のときのcssの記述をする
}

とすればいいです。


ということで、今回はここまで！

長くなり過ぎました、ごめんなさいm(__)m


さて明日は、もうちょっとだけこのレスポンシブWebデザインの知っておいた方がいい話を書きますね。


それでは、今回はこの辺でー(*´ω｀*)ﾉ

質問の正解は、西暦から和暦を求める方法ということで、「18を引く」でした(*´ω｀*)

例）　　　　　昭和　→　西暦の下2桁から25を引く
　　　　　　　平成　→　西暦の下2桁から88を引く
2000年以降　→　西暦の下2桁に12を足す
　　　　　　　令和　→　西暦の下2桁から18を引く

~~~ヾ(*'▽'*)o マタネー♪