レスポンシブデザインを学ぼう「Progate」
レスポンシブデザインを学ぼう
レスポンシブデザインとは
・正直 レスポンシブデザイン適用されていなくても違和感はあまり感じなかった。
しかし、レスポンシブデザインを適用されたデザインを見直してみる。
すると、確かに格段に見やすくなっている事に気づく。
メディアクエリ
MediaQueriesMediaQueriesMediaQueriesMediaQueriesMediaQueriesM
・ブラウザの画面サイズにより合わせて表示させる技術このこと。
・CSS設定により変更可能。
・media(cssによって設定したい幅を決める：設定数値）
・mediaにはセミコロン；は不要
max-widthとmin-width
・最大幅はmax-width
・最小幅はmin-width
こう覚える
max-width
指定したｐｘ以下のｐｘ最大幅をCSS指定できる
min-width
指定したｐｘ以下のｐｘ最小幅をCSS指定できる
メディアクエリ設定方法
EX. h1に緑色をつける
@medeia(max-with or min-with: 指定したｐｘ) {
h1 ｛
color: green;
}
}
この様に書く
ポイント
・最大・最小幅～ｐｘ以下時に適応される、CSSによる緑色設定
これがメディアクエリの条件である
・書き方の順序は、メディアクエリ設定後、CSS設定をする
・大カッコ｛は上記のように２回書くので注意
ブレイクポイント
ブレイクポイントとは「～PX」の部分である
こう覚える
各電子機器におけるブレイクポイントの設定方法
こう覚える
