花の歌奏

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


とうとう銀杏の木が完全に散ってしまいました！(´・ω・｀)

と、何のこと？と思われる方もいるかもしれませんが、私の出勤途中に立派な銀杏の木があるお宅があるんです。

当然、他人の家にある木なので、写真など撮るわけにもいかないし、みなさんにはお見せ出来なかったのですが、本当に立派な大きな木で、時期も時期なので葉を全部綺麗な黄色に変えていたんです。


少しずつ散っていく様は少し寂しかったのですがその反面、地面に黄色い絨毯が出来ていて本当に素敵でした。

そんな銀杏の木が今日の出勤時に見ると、とうとう全部散ってしまっていました(´・ω・｀)

あの綺麗な銀杏の木がもう見れないと思うと悲しいですが、来年またこの時期まで楽しみにしていようと思います(*´ω｀*)

来年は写真が撮れたらいいなー(*´ω｀*)


あと、母の体調は落ち着いたので、今日はしっかり記事を書きたいと思います！

大事な話を書いているとはいえ、画像が全くなく、退屈さを感じている方もいるとは思いますが、ホームページ作成を考えている人に取っては大事なお話なのでもうしばらくお付き合いくださいm(__)m


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



今回は質問はお休みです。

ということで、さっそく本題に入ります。

前回まで、レスポンシブWebデザインのお話をしました。

そのうえで、こんな風に書くんですよーと書きました。

実際の例を出しますね。


@media screen and (max-width: 960px){
h1 {
color: #0000ff;
background-color: #fac978;
font-size: 20px;
}
}


このような感じです。

さて、上記の場合、h1タグに対して文字色、背景色、文字サイズを指定しますが、じゃあ例えば、h2やh3も幅960pxまでのサイズで何か指定したい場合どういう風に書くのかということを説明したいと思います。

すごく単純なので、例を出しますね。


@media screen and (max-width: 960px){
h1 {
color: #0000ff;
}
h2 {
color: #00ff00;
}
h3 {
color: #ff0000;
}
}


上記は、分かりやすくするために文字色のみにしていますが、このように、

@media screen and (max-width: 960px){
ここにいくつもまとめることが出来る（一つ一つ書かなくていい）
}

となります。

ただし、注意が2つあります。

やりがちなのが、

(max-width: 960px)

この部分の、960pxの後ろに「；（セミコロン）」を入れたくなりますが入れない事！

もう一つは、「{}」この記号の位置に気を付ける事！

この2点に気を付けてくださいね(*´ω｀*)


さて、今回はこのレスポンシブWebデザインのことでもう一つお話です。

CSSを書く場合、基本的に


PC用のCSS
　↓　
タブレット用のCSS
　↓　
スマートフォン（携帯）用のCSS


と順番に書いてください。

こうすることによって、確認がしやすいです。

ただ、ホームページ作成の世界では、「モバイルファースト」という考え方もあります。


これは何かというと、基本ベースをスマートフォン（携帯）にすることです。

よって、CSSの書き方は、


スマートフォン（携帯）用のCSS
　↓
タブレット用のCSS
　↓
PC用のCSS


となります。

どちらがいいとかどちらはダメなんて一切ありません。

また、モバイルファーストの考え方は、PCユーザーをないがしろにするというわけではないので、その点に関しては注意しておいてくださいね。

そのうえで、上記の順番を考えてCSSを組むことを特にお勧めします！



ということで、今回の「ホームページの作り方 〜知ってないと大損編04〜」は終わりです。

次回は、CSSの詳細度についてお話したいと思います。

これもめちゃくちゃ重要なので、次回もぜひ読んでくださいね(*´ω｀*)

では、今回はこの辺でー(*´ω｀*)ﾉ
~~~ヾ(*'▽'*)o マタネー♪