33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

切り替えポイントについて

本日の教材動画はこちら 

切り替えポイントについて

 切り替えポイントとは「ブレークポイント」と呼ばれるもので、CSSの切り替えのきっかけとなるタイミングのことを指します。

 

メディアクエリなら、@media (メディアタイプ) and ( (メディア特性) ){ CSSの記述 }で書くことになるわけですが、主にメディア特性部分がブレークポイントになるようです。

 

例えば、@medelia screen and (min-width:480px){セレクタ{background-color:red;}}と記述した場合、480px以上の場合背景を赤色にするとなります。それ以下の場合ここのCSSは適応されません。つまりここがブレークポイントってことですね。

 

なんとなくイメージはできているのですが実際に作ってみないとなんとも言えなさそうなので、詳しくか下記の参照サイトをみるとわかりやすいかもです。

 

【復習記事】

メディア特性とは

【参照サイト】

【2021年】レスポンシブデザインのブレイクポイントまとめ!