【入門】ドットインストール 詳解CSS レスポンシブウェブデザイン編 【基礎から徹底解説】
【更新】
2020/05/31 この記事の知識を使ってウェブサイトを作成しました！
下記リンクからチェックしてみてください！
この記事は５分で読めます
ドットインストールまとめ記事、今回は「詳解CSS レスポンシブウェブデザイン編」です。
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
→レスポンシブウェブデザインについて復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
ただしこの記事はCSSのコードを一度も書いたことがない人には向かないです。先にCSSの基本を復習されることをおすすめします。
↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓
それではいってみましょう！
【viewportの設定】
①viewportの設定
②デバイスの画面幅に表示領域の幅を合わせる
③ズーム倍率の初期設定を等倍にする
<meta name="viewport" content="width=device-width, initial-scale = 1">
ちなみに基本はこのままコピペすればよい。が、そのしくみを理解しておくことはエラー対応が発生した時など実務で役立つ
こちらの記事も参考になるかと思います↓
【メディアクエリを用いる】
①メディアクエリを呼び出す
②メディアクエリの条件式。この条件を満たす時にスタイルを適用する、という意味
widthが600~800の時に背景色をskyblueにする設定をしたところ実際にwidth=667pxの時背景色が水色になった
ディベッロパーツールでは横×縦でそれぞれpxが表示される。画像1枚目(iphone6/7/8,667px)ではCSSが適用されたのに対し,2枚目(iphoneX,812px)では適用されていないのがわかる。
【レスポンシブデザインの実践-1】
・widthが600pxより小さい時 (スマホサイズ)の①〜③の要素のスタイルを設定…④
・下に書いたもので上書きされるのでメディアクエリ不要
・aside：diplay: none;でモバイルサイトでは表示しない設定にしている…⑤
display: none;を使用したことでhtmlには記述しているasideが表示されていない。こんな使い方もできる。
【レスポンシブデザインの実践-2】
・width≧600の時(タブレットサイズ)のスタイルを設定…①
・”section>img,text,aside”をFlexboxにしimg,textのwidthをそれぞれ200px,可変とした…③
・asideは特に上書きしていないの非表示のまま…④
imageとtextの親要素sectionにFlexboxを使用して縦並びだった両者を横並びに。flex: 1;とは他の要素の幅を全体から引いたあまりを全て割り当てるという意味で、ブラウザ幅に合わせて幅を可変にしたいときなどに使用できる。
【レスポンシブデザインの実践-3】
・width≧800の時(PCサイズ)のスタイルを設定…①
・sectionは幅固定で画面の中央に配置…②
・非表示にしていたasideを表示させた…③
・表示する際のスタイルはメディアクエリ内で設定…④
asideのdisplayプロパティの値を書き換えたので表示された
【復習】
今回は以上になります。
最後に記憶に定着するように復習しましょう。
★用語
- viewport：WEBサイトを表示する領域の設定。デバイスの幅に合わせて拡大縮小率を設定できる。基本は<meta name="viewport" content="width=device-width, initial-scale = 1">と設定する。
- メディアクエリ：デバイスの幅に応じたCSSを設定することができる。
viewportはメディアクエリで設定した幅の条件式を正しく作動させるために必要なものと考えてください。
★実践
- 初期設定(スマホサイズ)の時はCSSが下に書いたもので上書きされることからメディアクエリは不要
- displayプロパティを用いることで画面幅によって要素の並び方向(縦横)を変更したり、表示させない設定をすることができる
いかがだったでしょうか？
レスポンシブウェブデザインはGoogleの検索エンジンでも推奨されており、SEO対策にも欠かせません。今後実務でHTML&CSSを使用したい場合には必須のスキルといえるでしょう。
実際ランサーズなどで調べるとレスポンシブ対応化してほしい、というような案件も見ます↓
案件があるということは需要のあるスキルということで、身に付けておいて損はないですね！
またWEBページ作成し次第記事内リンクもしくはサイドバーにリンクを追加しますのでチェックしてみてください！
👇ページはこちら
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【ドットインストール学習経過】
— とぅーご＠6/1~プログラミング講師 いよいよ明日！ (@togo_mentor) 2020年5月11日
「実践！アプリ紹介ページを作ろう」完了
HTML&CSS全て完了です！
Progateよりも細かく学べ、より本格的なデザインのサイトが作れることが分かりました👍
明日以降はJavascriptに進みます☺️#プログラミング初心者と繋がりたい #駆け出しエンジニアと繋がりたい pic.twitter.com/Vx34BjmrNu
