読者です 読者をやめる 読者になる 読者になる

2月26日 授業内容① *html,cssの入力内容は②に掲載しています。

*ログインするときはセキュリティ確保のためにGoogleではシークレットモード(ctrl + shift + N)で表示してからログインする。


HTML5でアウトライン構造を理解する。

参照記事:yachin29.hatenablog.com

*入力後はHTML5 outlinerで構成をcheckすること



background-size(P286)



cover・・・ブラウザの画面サイズに合わせて全体に元画像を同一比率で表示するため、はみ出してしまうところができてしまう。(それを防止する為にbackground-attachment:fixed;を入力する)

contain・・・画像の比率を保ちつつ、常に背景画像全体が要素の中に全て表示される状態となります。


参照記事:
yachin29.hatenablog.com


分かりやすいサンプル:
background-sizeのサンプル




P284とP284の図24-7 box-sizingを設定するとborderまでの領域をwidthとして計算する。


background-size:cover;だけだと高さが広すぎる時にデザインが崩れる(同じ画像比率で表示するため)ため、background-attachment:fixed;を入力する。


画像を読み込むまでに時間がかかる、かつ文字が白いときはブラウザでの表示が白色しか見えないためbodyに中間色を設定し、ユーザーが画面からすぐ離れないようにする。


photoshop

!!jpgは編集する度にコンピュータがデータを間引きしてしまう。
pngはデータを間引きしないので保存するときはpng24で保存する。

透過させる画像でない時は保存するときにチェックをはずす。

googleでは同一内容のサイトでも、画像の容量が低いサイトの方が優先的に表示させるので
下記のようなサイトでバイト数を減らす。
tinypng.com




授業で作ったもの


background-size,background-attachmen
f:id:paris1204:20160228110022p:plain
f:id:paris1204:20160228104930p:plain
f:id:paris1204:20160228104932p:plain

rubyと縦書き

f:id:paris1204:20160228105205p:plain