レスポンシブWEBデザインについて

お疲れ様です！

今日はレスポンシブWEBデザインについて記事を書いていこうと思います！

まずレスポンシブWEBデザインとはPCやタブレット、スマホなどの様々なデバイスの大きさに対応したデザインのWEBサイトを作成する方法です。

私自身は練習用のサイトフォルダとファイルを作成しました。

ちなみにHTMLコードを書くことをマークアップ、CSSのコードを書くことをスタイリングと呼ぶらしいです。現場ではよく使われるらしいので覚えておこうと思います。

また、WEBフォントについても学びました。

インターネット上にデータがあって、サイト表示時にそれを読み込んで使用されるフォントの総称らしいです。

では話が少し逸れてしまいましたが、まずは表示領域を設定する方法です。

レスポンシブ対応をするためには画面幅が異なるデバイスに対してWebサイトの表示領域の設定をする必要があります。この表示領域はviewportと呼ばれていてこれを指定しないとPC画面用のサイトをスマホで見るとただ縮小した形になってしまうので非常に見ずらくなってしまします。

viewportを設定するためには、htmlファイルのheadタグ内に記述を追加します。

contentプロパティにwidth="devise-widrh"を指定してブラウザの大きさをPCやスマホなどの機器の大きさに合わせることができます。

また、initial-scaleは、画面の拡大率を指していて拡大率は「1.0」に今回は設定したので拡大はおこなわれません。

では次に画面サイズごとにCSSを切り替える方法です。

記述としては今回の例でいうとmax-wodth: 500pxと記述するとこれは画面幅が最大500pxの時、つまり画面幅が500px以下の時という意味になります。

この記述の後にレイアウトや文字の大きさなどをデバイスの幅に合わせて調節していきます。

max-widthの話になりますが、min-widthというものもあり、これは画面幅が500px以下の時という意味になります。

またこういった表示された画面幅に応じて適用するスタイルを切り替える機能をメディアクエリと言います。メディアクエリによって規定されるスタイル適用の分岐点をブレークポイントと呼びます。

例えばmax-width: 500pxであれば500pxがブレークポイントとなります。

実際にこれらを使ってPCサイズ、タブレットサイズ、スマホサイズなどのサイズごとにCSSの適用するサイズを変えることができます。

コードの編集が終わったらブラウザの検証ツールを使って様々なデバイスのサイズで確認です！！

普段学生の時とか結構スマホ対応されていないWEBサイトが多く感じてましたけど最近はどれもレスポンシブ化されていますね。

多分できて当たり前なんだろうなと思いました。

ではまた！