ホームページの作り方 〜知ってないと大損編02〜
2019年12月11日
みなさま、こんにちはー(*´ω｀*)ﾉ
花です(*´ω｀*)
ずっと調子が悪い理由が何となくわかった気がします。
以前書いたのですが、12月5日に私は親知らずを抜きました。
綺麗にはえていたので、できれば抜きたくなかったのですが、虫歯になってしまったし、その虫歯の治療は角度的にかなり難しいということもあり、抜くことになりました。
ただ、綺麗にはえていたからこそ、その分しっかりしていたらしく、この記事を書いているのは10日ですが、いまだにうずくんです(´・ω・｀)
おかげで、6時間おきに市販の鎮痛剤を飲んでいます。
できれば、鎮痛剤も飲みたくないのですが、うずきだすと何も手につかなくなるんです(´・ω・｀)
そんなこんなで、精神的にきてるのかもしれません(´・ω・｀)
そんな話を母にしたところ、「私は1ヵ月うずいたよ」と言われました。
そんなのいやだああああああああああああああああああ｡･ﾟﾟ 'ﾟ(*/□＼*) 'ﾟﾟﾟ･｡ ｳﾜｧｰﾝ!!
頑張ります……(´；ω；`)ウゥ・・・
さて、本日は、昨日の続きのお話になります。
ということで、「ホームページの作り方 〜知ってないと大損編02〜」の始まりです！
今回もちょっと質問コーナーは、おやすみです。
なので、いきなり本題に入ります！
本日の記事は昨日の記事で予告していた、レスポンシブというお話です。
では、まずそもそもレスポンシブとは何か。
「レスポンシブWebデザイン」等と呼ばれていますが、これは大きく分けて、パソコン、タブレット、スマートフォンなど画面のサイズが違う環境で見た時に、見やすく最適な表示のデザインをしているデザインのことを言います。
昔のホームページというものは、パソコン向けのサイトと携帯向けのサイトと2つ作り、見る人の環境によって同じ内容のサイトですが、全く見た目の違うサイトに振り分けていました。
懐かしい(*´ω｀*)
ところが、今は違います。
htmlやcssのバージョンがアップして自由度の幅が広がったことにより、一つのサイトのCSSをPC用、タブレット用、スマートフォン用に書くことができるようになりました。
そのおかげで、見る人の環境によって見た目が自動で変化するので、ホームページ自体の更新があっても修正したり、管理やしやすくなりました。
つまり、PC用・タブレット用・スマートフォン用とそれぞれのサイト（3つのサイト）を作る必要はなく、CSSの書き方のみで、自動でPC用・タブレット用・スマートフォン用に変化してくれるわけです。
ですが、これには一つ落とし穴があります。
それは、次の質問でわかると思います。
あなたの持っているスマートフォンやタブレットと、あなたの隣や側に居る人のタブレットやスマートフォンは同じものですか？
当然、返答はＮＯ！でしょう。
何が言いたいかというと、日本だけでも、色んなスマートフォンがあり、色んな画面サイズがあるのです。
スワイプできるからいいじゃん！
という人もいるでしょう。
でもそれだと、かなり見にくいサイト作成になったりと様々な問題が起こります。
といって、全部のスマートフォンの画面サイズに合わせて、CSSを全部作るとなると膨大過ぎます。
そこで、ホームページを作る際、ある程度の当たりをつけてCSSを書きます。
これが「レスポンシブWebデザイン」です
分かりやすい例を出すと、例えば
0〜560px
560〜960px
960px〜
と、3段階に分けてCSSを用意します。
なので、スマートフォンのサイズが560px以下であれば、だいたい同じように見えるCSS
560〜960pxといえば、タブレット向けのCSS
960px以上は、パソコン向けのCSSとなります。
こうすることによって、ある程度みんな同じように見えるということになります。
ただし、あくまで「ある程度」なので、うまく見られない人も少なからず出てきます。
そこは、もう仕方ないと切り捨てるしかないのが、今のホームページ作成の世界の現状です。
おそらく、今後こういった問題にも対応する方法が出てくるとは思いますが、現状は仕方ありません。
では、前述のとおりある程度の当たりをつけるとありますが、それはどのサイズにするかという問題があります。
これは、そのときそのときのスマートフォンの流行り廃りで決めるしかありません。
とは言っても、判断が難しいと思うので、ホームページを作る際に、レスポンシブWebデザインとして推奨される画面サイズを調べる！
ほんと大変ですよね(´・ω・｀)
ということで、今回のまとめとして、レスポンシブWebデザインとは、画面サイズによって最適な表示をしているサイト作成ということになり、それをしなければいけないのが今のホームページ作成の現状です。
では、今回長くなってしまったのでこの辺でー(*´ω｀*)ﾉ
次回は、実際に書き方を説明してみようと思います。
次回こそは短めな文章になるといいなー(*´ω｀*)
では、~~~ヾ(*'▽'*)o マタネー♪
花です(*´ω｀*)
ずっと調子が悪い理由が何となくわかった気がします。
以前書いたのですが、12月5日に私は親知らずを抜きました。
綺麗にはえていたので、できれば抜きたくなかったのですが、虫歯になってしまったし、その虫歯の治療は角度的にかなり難しいということもあり、抜くことになりました。
ただ、綺麗にはえていたからこそ、その分しっかりしていたらしく、この記事を書いているのは10日ですが、いまだにうずくんです(´・ω・｀)
おかげで、6時間おきに市販の鎮痛剤を飲んでいます。
できれば、鎮痛剤も飲みたくないのですが、うずきだすと何も手につかなくなるんです(´・ω・｀)
そんなこんなで、精神的にきてるのかもしれません(´・ω・｀)
そんな話を母にしたところ、「私は1ヵ月うずいたよ」と言われました。
そんなのいやだああああああああああああああああああ｡･ﾟﾟ 'ﾟ(*/□＼*) 'ﾟﾟﾟ･｡ ｳﾜｧｰﾝ!!
頑張ります……(´；ω；`)ウゥ・・・
さて、本日は、昨日の続きのお話になります。
ということで、「ホームページの作り方 〜知ってないと大損編02〜」の始まりです！
今回もちょっと質問コーナーは、おやすみです。
なので、いきなり本題に入ります！
本日の記事は昨日の記事で予告していた、レスポンシブというお話です。
では、まずそもそもレスポンシブとは何か。
「レスポンシブWebデザイン」等と呼ばれていますが、これは大きく分けて、パソコン、タブレット、スマートフォンなど画面のサイズが違う環境で見た時に、見やすく最適な表示のデザインをしているデザインのことを言います。
昔のホームページというものは、パソコン向けのサイトと携帯向けのサイトと2つ作り、見る人の環境によって同じ内容のサイトですが、全く見た目の違うサイトに振り分けていました。
懐かしい(*´ω｀*)
ところが、今は違います。
htmlやcssのバージョンがアップして自由度の幅が広がったことにより、一つのサイトのCSSをPC用、タブレット用、スマートフォン用に書くことができるようになりました。
そのおかげで、見る人の環境によって見た目が自動で変化するので、ホームページ自体の更新があっても修正したり、管理やしやすくなりました。
つまり、PC用・タブレット用・スマートフォン用とそれぞれのサイト（3つのサイト）を作る必要はなく、CSSの書き方のみで、自動でPC用・タブレット用・スマートフォン用に変化してくれるわけです。
ですが、これには一つ落とし穴があります。
それは、次の質問でわかると思います。
あなたの持っているスマートフォンやタブレットと、あなたの隣や側に居る人のタブレットやスマートフォンは同じものですか？
当然、返答はＮＯ！でしょう。
何が言いたいかというと、日本だけでも、色んなスマートフォンがあり、色んな画面サイズがあるのです。
スワイプできるからいいじゃん！
という人もいるでしょう。
でもそれだと、かなり見にくいサイト作成になったりと様々な問題が起こります。
といって、全部のスマートフォンの画面サイズに合わせて、CSSを全部作るとなると膨大過ぎます。
そこで、ホームページを作る際、ある程度の当たりをつけてCSSを書きます。
これが「レスポンシブWebデザイン」です
分かりやすい例を出すと、例えば
0〜560px
560〜960px
960px〜
と、3段階に分けてCSSを用意します。
なので、スマートフォンのサイズが560px以下であれば、だいたい同じように見えるCSS
560〜960pxといえば、タブレット向けのCSS
960px以上は、パソコン向けのCSSとなります。
こうすることによって、ある程度みんな同じように見えるということになります。
ただし、あくまで「ある程度」なので、うまく見られない人も少なからず出てきます。
そこは、もう仕方ないと切り捨てるしかないのが、今のホームページ作成の世界の現状です。
おそらく、今後こういった問題にも対応する方法が出てくるとは思いますが、現状は仕方ありません。
では、前述のとおりある程度の当たりをつけるとありますが、それはどのサイズにするかという問題があります。
これは、そのときそのときのスマートフォンの流行り廃りで決めるしかありません。
とは言っても、判断が難しいと思うので、ホームページを作る際に、レスポンシブWebデザインとして推奨される画面サイズを調べる！
ほんと大変ですよね(´・ω・｀)
ということで、今回のまとめとして、レスポンシブWebデザインとは、画面サイズによって最適な表示をしているサイト作成ということになり、それをしなければいけないのが今のホームページ作成の現状です。
では、今回長くなってしまったのでこの辺でー(*´ω｀*)ﾉ
次回は、実際に書き方を説明してみようと思います。
次回こそは短めな文章になるといいなー(*´ω｀*)
では、~~~ヾ(*'▽'*)o マタネー♪
タグ：CSS
この記事へのコメント
コメントを書く
