半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録15日目

更新日:

こんばんは、こずえです。
プログラミング学習記録15日目です。
レスポンシブウェブデザインについて学習しました。

所感:レスポンシブ対応ってこういうことだったのね!

合計学習時間

前回までの時間:23.75[h]
今回の時間:0.75[h]
合計時間:24.50[h]

学習内容

はじめてのレスポンシブWebデザイン入門講座

レスポンシブデザインの考え方

レスポンシブ

response:反応 / 返信
レスポンシブデザイン:反応が発生することによって見た目が変化する。

レスポンシブデザイン

1つのファイルを何らかの形で、様々な表示形態(画面サイズ)に合わせることができるデザインのこと。

例えば「media query」を使用することで、画面の横幅を取得し、必要なCSSを適用することができるなど。

切り替えポイント(ブレークポイント)を作る

ブレークポイントとは

CSSの切り替えのきっかけとなるタイミングのこと。

media query

タイミングを決めるために使用する。

*****部分はscreenやmax-widthなどのメディアタイプを指定する。

@media ***** and (*****) { /*CSSの記述*/ }

段組(カラム)を切り替える

段のことを英語ではカラム(column)という。

段組の変更例:2段→1段

2段組になっている段組をある一定の細さになったら1段組にしたい場合は以下のように記述する。

/*横幅が480px以下で2→1段組に変化する*/
@media screen and (max-width: 480px) {
	#gallery li {
		width: 90%;
		margin:5%;
	}
}


-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.