■プログラミング学習
◎レスポンシブ対応方法
WEBサイトをレスポンシブ化するためには、下記３つの工程が必要
1. 表示領域の設定をする
2.画面サイズによって、CSSを切り替えるための設定をする
3.画面サイズごとに適用するCSSを記述する
◎1.表示領域を設定する方法を学ぼう
レスポンシブ対応をするためには、画面幅が異なるデバイスに対して、Webサイトの表示領域を設定する必要があります。
この表示領域をviewportと呼びます。
viewportを指定しないとスマートフォンで表示したときに、PCサイトのレイアウトをそのままスマートフォンで画面内にに収まるように縮小して表示されるので、文字が小さく見づらくなってしまう。
viewpordを設定するためには、htmlファイルのheadタグ内に以下の記述を行う。
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
contentプロパティにwidth="device-width"を指定することで、ブラウザに大きさをPCやスマートフォンなどの大きさに合わせることができます
initial-scaleは、画面の拡大率を指しています。拡大率は「1.0」に設定しているため、拡大は行われません。
◎2.画面サイズによって、CSSを切り替えるための設定をする
例、画面幅が500px以下のときにのみ、pタグのfont-sizeを10pxにしたい
@media (max-width:500px) {
p{
font-size: 10px ;
}
}
この記述をメディアクエリと言います。
メディアクエリとは、表示された画面幅に応じて適用するスタイルを切り替える機能を指します。
◎3.画面サイズごとに適用するCSSを記述する
メディアクエリによって、規定されるスタイルの分岐点をブレークポイントと呼びます。
ブレークポイントの値を何pxにするか、何箇所ブレークポイントを置くかで制作するWebサイトの要件によって、
変わります。
PCとスマホのみの対応であれば、1箇所
PC、タブレット、スマホの対応となると2箇所のブレークポイントが必要になります。
例、PC、タブレット、スマホでそれぞれフォントサイズが異なるよう記述
/* PC表示 */
p{
font-size: 30px ;
}
/* タブレット表示 */
@media (max-width:1000px) {
p{
font-size: 25px ;
}
}
/* スマホ表示 */
@media (max-width:500px) {
p{
font-size: 20px ;
}
}
■読書 リフレクション（REFLECTION） 自分とチームの成長を加速させる内省の技術
◎読書
リフレクション内省をする機会がほしいと思い、本書を読みました。
内容としては、認知の4点セットで「意見・経験・感情・価値観」を使い、
どの内容についても振り返ること。
自分の中で不満や怒りなどネガティブな感情が起きたときに、
心の動きや変化を意識して、自分の価値感はを見つける。
アンラーンのリフレクションも方法が書かれており、過去の成功体験を捨てるだけと思っていた自分としては
過去の成功体験を振り返り、称賛をし、その後アンラーンをした先の未来を考え、アンラーンする
「異質な世界に飛び込むと良いことがある」という考えを持つなど、心が軽くなり
今から実践していきたいと思える内容が多くあった。
試しながらも読んでいくことが多かったので、2回目は一つ一つ試していきたいと思える本でした。
