２月２６日 授業内容① ＊html,cssの入力内容は②に掲載しています。
＊ログインするときはセキュリティ確保のためにGoogleではシークレットモード（ctrl + shift + N）で表示してからログインする。
＊HTML5でアウトライン構造を理解する。
＊入力後はHTML5 outlinerで構成をcheckすること
＊background-size(P286)
＊cover・・・ブラウザの画面サイズに合わせて全体に元画像を同一比率で表示するため、はみ出してしまうところができてしまう。（それを防止する為にbackground-attachment:fixed;を入力する）
＊contain・・・画像の比率を保ちつつ、常に背景画像全体が要素の中に全て表示される状態となります。
参照記事：
yachin29.hatenablog.com
分かりやすいサンプル：
background-sizeのサンプル
＊P284とP284の図２４－７ box-sizingを設定するとborderまでの領域をwidthとして計算する。
＊background-size:cover;だけだと高さが広すぎる時にデザインが崩れる（同じ画像比率で表示するため）ため、background-attachment:fixed;を入力する。
＊画像を読み込むまでに時間がかかる、かつ文字が白いときはブラウザでの表示が白色しか見えないためbodyに中間色を設定し、ユーザーが画面からすぐ離れないようにする。
!!jpgは編集する度にコンピュータがデータを間引きしてしまう。
pngはデータを間引きしないので保存するときはpng24で保存する。
透過させる画像でない時は保存するときにチェックをはずす。
＊googleでは同一内容のサイトでも、画像の容量が低いサイトの方が優先的に表示させるので
下記のようなサイトでバイト数を減らす。
tinypng.com
授業で作ったもの
＊background-size,background-attachmen
①
＊rubyと縦書き
②
