YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Japanese subtitles

← 02-17 Layout

02-17 Layout

Get Embed Code
6 Languages

Showing Revision 1 created 12/10/2014 by Udacity.

  1. ゴールが見えてきたようですね
  2. レンダーツリーはできました
    画面にすぐピクセルを配置できますか?
  3. 近づいていますが もう1ステップあります
  4. ページで全要素がどこへどのように配置されるか
  5. 理解する必要がまだ残っています
  6. それがレイアウトのステップです 見てみましょう
  7. 実際の処理でのレイアウトを見せるために
  8. 簡単なレンダーツリーを用意しました
    これが最終的な結果の様子です
  9. スマートフォンを回転させると
  10. 長方形の寸法が変わりますが
    要素の比率は変わらない点に注意してください
  11. ブラウザの動作を解明できるか見てみましょう
  12. 上から始めましょう
  13. body要素の背景色を灰色に設定します
    これは明らかです
  14. まさに見たとおりです
    またその幅を100%に設定します
  15. 正確には何に対して100%なんでしょう?
  16. レイアウトビューポートの大きさの100%です
  17. 注意して見ると “Hello World”デモは
    追加のmetaタグを含んでいます
  18. レスポンシブデザインについての
  19. 基礎ガイドを読んでいたのですが
    それにはこのタグを
  20. 常に加えるとありましたが
    何のためか実際には分かりませんでした
  21. これはやや謎めいていますが 解明してみましょう
  22. これがしていることは
    レイアウトビューポートの幅が
  23. 端末の幅と等しくあるべきという点を
    ブラウザに命じることです
  24. 端末の幅が320ピクセルとすると
  25. このmeta viewportタグがあれば
  26. ブラウザはレイアウトビューポートを
    320ピクセルに設定し
  27. それがここでの100%になります
  28. 分かりました
    しかしこのタグを与えなければどうなりますか?
  29. ブラウザはデフォルトのビューポート幅を使います
  30. 大概は980ピクセルです
    また大きな画面用に最適化されています
  31. 時々サイトが小さくレンダリングされて
    操作したりテキストを読むために
  32. 拡大する必要があります それはビューポートに
    幅が設定されていないからです
  33. なるほど分かりました
  34. 確かにそういったサイトは好きではありません
  35. 私もです 携帯端末でサイトを見やすくするには
    ビューポートを常に設定すべきです
  36. さて例に戻りましょう
  37. 端末幅をこの320ピクセルとすれば
  38. bodyは320ピクセルの幅です
    次にdivノードの幅は50%です
  39. またbodyの子であり
    その幅は親と関連しているので
  40. 320ピクセルの50%は160ピクセルです
  41. また段落については幅が親の50%です
  42. つまり幅は80ピクセルです そこで終わりです
  43. これがレイアウトです 皆さんも試してみては?