こんにちは。ミゾグチです。
今日はクリスマスです！！
今日の予定は姉家族とクリスマスパーティです♪
朝、姪と甥にサンタさんが訪れたとの動画が送られてきました。
また子供たちはサンタさんにコーラの差し入れをしたいと言って枕元にコーラを置いて眠ったそうです。朝からほっこり。。。そのあとどうなったのかは今日行った時に聞いてみたいと思います＾＾
そして話は変わりますが12月から始まった企業実習も本日を入れてあと三日です。
最後までしっかり学んでいきたいと思います！
レスポンシブデザイン
レスポンシブデザイン。。。
webデザインをする上でどこに行ってもついてくるこの単語。
自身で学んだことについて情報整理したいと思います。
まずレスポンシブデザインとは
ユーザーのデバイス画面サイズに応じて表示を変えることができるページデザインのこと。
responsive = “すぐ応答する、敏感な、(…に)よく反応して”という意味だそうです。
メリットとデメリット
メリット
・デバイスに合わせたレイアウトが出来るためページが見やすい
・デザインが変わってもコンテンツが同じ内容なので修正、更新がしやすい
・PC、スマホのページもURLが同じになるためSEOに有利
デメリット
・スマートフォンで閲覧した際、PC用のデータも読み込むため表示が遅くなる
・CSSのデザインが複雑で記述テクニックが必要になる
などが挙げられます。
その他、ユーザーがPCからしか見ないページは場合よってはレスポンシブにする必要はない可能性もあります。
作成方法
１、ビューポート(viewport)を設定する
まず、HTMLのヘッダー内にあるmetaタグで、スマホ向けにビューポートを設定します。
<head>
<!– ビューポートの設定 –>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>
このコードを記述することで画面幅に合わせて表示領域を調整してくれます。
スマートフォンで閲覧した時、画面幅がデバイスに合わせて縮小表示されるためコンテンツが小さくて拡大しなければ閲覧がしにくい表示になってしまいます。。。
２、ブレイクポイントを決める
ブレイクポイントとは表示の切り替え地点のことをいいます。
デバイスによって様々ですが
・599pxまではスマホ
・600px～959pxまではタブレット
・960px～1280pxまでは通常のデスクトップ
・1281px以上は、横幅の広いデスクトップ
をおおよその基準として考えました。
閲覧している画面サイズの統計はこちらのサービスで確認できます。
３、メディアクエリでCSSを記述する
メディアクエリを使用してスマートフォン用のレイアウトを記述していきます。
@media screen and (max-width: 480px) {
0px～480pxの画面サイズにCSSを適応
}
@media screen and (min-width: 480px) {
480以上の画面サイズにCSSを適応
}
@media screen and (min-width: 480px) and ( max-width:1024px) {
480px～1024pxの画面サイズにCSSを適応
}
以上以下と範囲も指定できます。
通常のCSSと同様にカッコ内にセレクタを指定して記述していきます。
本日は以上です。
自分のポートフォリオサイトをレスポンシブにしてみました！
この最後のCSSの記述が中々上手くいかないんですよね。。。
まだまだ修正は必要ですがこれからもバージョンアップさせていきたいと思います。
ミゾグチ
