Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

俺のHtmlマークアップ【head編】

2,923 views

Published on

  • Be the first to comment

俺のHtmlマークアップ【head編】

  1. 1. 俺のhtmlマークアップ ~ もっと意識して組んでみようよ ~ 【head 編】
  2. 2. 西村 宗倫(にしむら むねのり) 1979.7.27 生 A 型 【ニックネーム】 むねりん 俺の 朝まで飲める 最近肉より魚が好きな WEBディレクター / WEBデザイナー自己紹介 facebook.com/ munerin @mune_nori
  3. 3. e a d >< h head内のタグの 順番とか気にしてる ?
  4. 4. e a d >< h meta title link script style ↑head内に入るタグって大体こんなとこだよね
  5. 5. e a d >< h <!DOCTYPE html> <html lang="ja"> <head> じゃあ何から 記述すればいい? </head>
  6. 6. e a d >< h そり 文字コードでしょうYO ゃ !【html5】 <head> ちゃんと記述してないと <meta charset="UTF-8"> … “文字化け”の原因になりますね ((((; Д゜ コワイ コワイ ゜ )))【xhtml】 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> …
  7. 7. e a d >< h まぁ、ぶっちゃけ文字コード以下は どんな順序でタグを記述しても 特にルールはないんです
  8. 8. e a d >< h でも… それで満足しないでっ ! ! あきらめないでっ ! !
  9. 9. e a d >< h せっかく記述するなら 「見やすくて」 「パフォーマンスがいい」 ほうが…
  10. 10. e a d >< h イイ━━━(゜ )━━━ !!!!! ∀゜
  11. 11. e a d >< h 見 やすい ? って何やっ
  12. 12. e a d >< h 例えば、仕事で第3者から 引き継いだhtmlが こんな感じだったら ??
  13. 13. e a d >< h orz... ↑こうですね (゚ д゚)バカチンガッ!
  14. 14. e a d >< h とりあえず、 インデン く ト らい 意味ない改行 揃えようYO やめようYO ! ! 細かいこと言えば… link や meta はまとめて記述する href や rel 属性などの位置を揃える 必要なくダブルクォーテーションとシングルクォーテーション混ぜない
  15. 15. e a d >< h だいぶ見やすくなった! けど… まだまだツッコミどころ 満載ですね\(^o^) /
  16. 16. e a d >< h そこで、 パ フォーマンスがいい 何やっ? って です ! ってこと
  17. 17. e a d >< h WEBブラウザは ソースコードを読み込んだ後に 上から順番に解釈していきます
  18. 18. e a d >< h 重要なのは CSSとJavaScript どちらを先に記述するのが いいのか? ということ
  19. 19. e a d >< h このJavaScriptの読み込みが 終わらない限り、その下にある CSSとかは読み込まない JavaScriptの実行中は 次のタグの解釈を 止めてしまいます… ! !
  20. 20. e a d >< h んとっ ! CSSは な 同時読み込みが可能なので CSSから先に記述 しておいたほうが…
  21. 21. e a d >< h イイ━━━(゜ )━━━ !!!!! ∀゜
  22. 22. e a d >< h ではでは、 これらを踏まえて コードを書き換えると…
  23. 23. e a d >< h Oh! Beautiful!
  24. 24. e a d >< h さらに追及すれば、 HTTPリクエストを減らすために 外部のCSSやJavascriptを まとめてしまいなYO !
  25. 25. e a d >< h これでみんな ヾ(* ∀`*)ノ ´ ↑こうですね キャッキャウフフ
  26. 26. ご清聴ありがとうございました

×